Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

@W-12627107@ Make security code tooltip receive keyboard focus. #1551

Merged
merged 10 commits into from
Nov 21, 2023

Conversation

wjhsf
Copy link
Contributor

@wjhsf wjhsf commented Nov 20, 2023

When checking out, the Security Code info tooltip now receives keyboard focus.

(git2GUS compliant redo of #1548)

Description

Types of Changes

  • Bug fix (non-breaking change that fixes an issue)
  • New feature (non-breaking change that adds functionality)
  • Documentation update
  • Breaking change (could cause existing functionality to not work as expected)
  • Other changes (non-breaking changes that does not fit any of the above)

Breaking changes include:

  • Removing a public function or component or prop
  • Adding a required argument to a function
  • Changing the data type of a function parameter or return value
  • Adding a new peer dependency to package.json

Changes

screenshot of voiceover reading the tooltip content

How to Test-Drive This PR

  • Start dev server
  • Add item to cart, begin checkout
  • At payment step, focus on Expiration Date.
  • Hit tab.
    • Focus should move to the info icon and the tooltip should appear.
    • VoiceOver should read the tooltip content (will require some interaction)
  • Hit tab. Focus should move to the Security Code input, and VoiceOver should announce "Security Code input".

Checklists

General

  • Changes are covered by test cases
  • CHANGELOG.md updated with a short description of changes (not required for documentation updates)

Accessibility Compliance

You must check off all items in one of the follow two lists:

  • There are no changes to UI

or...

Localization

  • Changes include a UI text update in the Retail React App (which requires translation)

@wjhsf wjhsf requested a review from a team as a code owner November 20, 2023 17:17
@wjhsf wjhsf enabled auto-merge (squash) November 20, 2023 17:17
@@ -1969,6 +1969,20 @@
"value": "]"
}
],
"credit_card_fields.tool_tip.security_code_aria_label": [
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

image
Missing translation for en-GB

shethj
shethj previously approved these changes Nov 21, 2023
vmarta
vmarta previously approved these changes Nov 21, 2023
@wjhsf wjhsf merged commit 5066dcc into develop Nov 21, 2023
17 checks passed
@wjhsf wjhsf deleted the wjh/W-12627107/keyboard-a11y-security-code branch November 30, 2023 21:53
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

4 participants