Skip to content

[WNMGDS-3186] Pulls in an accessibility fix for react-aria's <HiddenSelect />#3452

Merged
4 commits merged into
mainfrom
kcn/WNMGDS-3186/dropdown-tab-index
Feb 19, 2025
Merged

[WNMGDS-3186] Pulls in an accessibility fix for react-aria's <HiddenSelect />#3452
4 commits merged into
mainfrom
kcn/WNMGDS-3186/dropdown-tab-index

Conversation

@ghost
Copy link
Copy Markdown

@ghost ghost commented Feb 19, 2025

Summary

Jira ticket

When initially loading the Dropdown component in Storybook (link), the tabIndex for the hidden input field was set to -1, which is great — no accessibility issues at that point. However, after interacting with the page (either via keyboard or mouse events) the react-aria library would set the tabIndex to 0, which does register as an accessibility issue.

This PR pulls in the specific changed lines found in this PR (adobe/react-spectrum#7200) to the local copy of react-aria that affects the HiddenSelect component / function. Note: this does not update the package.json version dependency of react-aria or the rest of the local library. I'm thinking that will require a more meticulous approach and should be prioritized appropriately. Instead, this follows precedence set forth with this commit (01e01e2).

How to test

  1. Pull down the branch locally and run storybook
  2. Go to http://localhost:6006/?path=/story/components-dropdown--default
  3. Open dev tools and run an axe page scan (no errors)
  4. Select an item from the dropdown menu on the page
  5. Run the axe page scan again and see the error

Checklist

  • Prefixed the PR title with the Jira ticket number as [WNMGDS-####] Title or [NO-TICKET] if this is unticketed work.
  • Selected appropriate Type (only one) label for this PR, if it is a breaking change, label should only be Type: Breaking
  • Selected appropriate Impacts, multiple can be selected.
  • Selected appropriate release milestone

If this is a change to code:

  • Verified that running both npm run test:unit and npm run test:browser:all were each successful
  • If necessary, updated unit-test snapshots (npm run test:unit:update) and browser-test snapshots (npm run test:browser:all:update)

@ghost ghost added Type: Fixed Indicates an unexpected problem or unintended behavior Impacts: Core Impacts the core DS primarily, changes may occur in other themes as well. labels Feb 19, 2025
@ghost ghost added this to the 12.1.0 milestone Feb 19, 2025
@jack-ryan-nava-pbc
Copy link
Copy Markdown
Collaborator

Screenshot 2025-02-19 at 9 21 56 AM

V nice 👌🏻

Copy link
Copy Markdown
Collaborator

@jack-ryan-nava-pbc jack-ryan-nava-pbc left a comment

Choose a reason for hiding this comment

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

Looks good and passes tests!

@ghost ghost merged commit a13618c into main Feb 19, 2025
@ghost ghost deleted the kcn/WNMGDS-3186/dropdown-tab-index branch February 19, 2025 16:59
tamara-corbalt pushed a commit that referenced this pull request Apr 1, 2025
…enSelect />` (#3452)

* applies changes from adobe/react-spectrum#7200 to local `react-aria` copy

* Updates snapshots

* Updates WC snapshots
jack-ryan-nava-pbc pushed a commit that referenced this pull request Apr 10, 2025
…enSelect />` (#3452)

* applies changes from adobe/react-spectrum#7200 to local `react-aria` copy

* Updates snapshots

* Updates WC snapshots
jack-ryan-nava-pbc pushed a commit that referenced this pull request Apr 10, 2025
…enSelect />` (#3452)

* applies changes from adobe/react-spectrum#7200 to local `react-aria` copy

* Updates snapshots

* Updates WC snapshots
This pull request was closed.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

Impacts: Core Impacts the core DS primarily, changes may occur in other themes as well. Type: Fixed Indicates an unexpected problem or unintended behavior

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant