Skip to content

Conversation

majornista
Copy link
Collaborator

The aria-labelledby attribute on the tabpanel should be updated to refer to the Picker rather than the current tab, which is no longer in the DOM.

Closes #1271

✅ Pull Request Checklist:

  • Included link to corresponding React Spectrum GitHub Issue #1271.
  • Added/updated unit tests and storybook for this change (for new code or code which already has tests).
  • Filled out test instructions.
  • Updated documentation (if it already exists for this component).
  • Looked at the Accessibility Practices for this feature - Aria Practices

📝 Test Instructions:

  1. Open http://localhost:9003/?path=/story/tabs--collapse-behavior
  2. Inspect the element with role="tabpanel" in the Web Inspector
  3. resize the webpage viewport width to test.
  4. Verify that when the Tabs are collapsed the tabpanel element's aria-labelledby attribute points to the Picker button element.
  5. Verify that when the Tabs are not collapsed the tabpanel element's aria-labelledby attribute points to the selected Tab.

🧢 Your Project:

Adobe/Accessibility

…ment when Tabs are collapsed

The aria-labelledby attribute on the tabpanel should be updated to refer to the Picker rather than the current tab, which is no longer in the DOM.

// When the tabs are collapsed, the tabPanel should be labelled by the Picker button element.
let collapsibleTabListId = useId();
if (collapse) {
Copy link
Member

Choose a reason for hiding this comment

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

Tested in the orientation flip story and the collapse id aria-labelledby remained when the orientation flipped. Its a bit of a non-sensical example but you could fix it by adding a check here on orientation !== 'vertical' as well

Copy link
Member

@LFDanLu LFDanLu left a comment

Choose a reason for hiding this comment

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

LGTM

@dannify dannify merged commit a427541 into adobe:main Nov 17, 2020
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.

Tabs: tabpanel should be labelled by the Picker button element when Tabs are collapsed

3 participants