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

[A11y][Header] Avoid forced focus changes that are not user-initiated (@W-12627128@) (@W-12627141@) #1940

Merged
merged 3 commits into from
Jul 31, 2024

Conversation

adamraya
Copy link
Collaborator

@adamraya adamraya commented Jul 30, 2024

Description

The PR adds the title attribute to indicate the link opens a dialogue and keeps the focus on the My Account control element.

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

  • Added title attribute and keep the focus on the popup trigger when using Shift+Tab.

How to Test-Drive This PR

  1. Verify the hamburger icon on mobile now has the title attribute.
  2. Verify the focus is kept in the My Account menu trigger when using Shift + Tab.
    2.1. Open the My Account menu.
    2.2. Press the Tab key to navigate between the options.
    2.3. Press Shift+Tab multiple times and verify the focus is kept in the popup trigger.

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)

@adamraya adamraya requested a review from a team as a code owner July 30, 2024 16:20
@shethj
Copy link
Collaborator

shethj commented Jul 30, 2024

LGTM! 🚀
We might want to add a test for this though.

shethj
shethj previously approved these changes Jul 30, 2024
@@ -153,6 +162,7 @@ const Header = ({
id: 'header.button.assistive_msg.menu',
defaultMessage: 'Menu'
})}
title="Opens a dialog"
Copy link
Collaborator

Choose a reason for hiding this comment

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

Is there any translation that we can reuse here so we don't have to reach out to the translation team? I'm assuming that the screen ready will read this text aloud?

bendvc
bendvc previously approved these changes Jul 30, 2024
shethj
shethj previously approved these changes Jul 30, 2024
@adamraya adamraya dismissed stale reviews from shethj and bendvc via 733edea July 30, 2024 22:49
@adamraya adamraya merged commit 6b6c417 into develop Jul 31, 2024
28 checks passed
@adamraya adamraya deleted the a11y-header-my-account-focus branch July 31, 2024 16:19
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.

3 participants