The selected item in a Fluent v9 TabList should be indicated by aria-selected="true" for screen reader users.
Environment Information
- Package version(s): 9.0.0-rc.6, @fluentui/react-components
- Browser and OS versions: Edge 99.0.1150.36, Windows 11
Describe the issue:
Selected Tabs in a TabList should be marked as selected for screen reader users.
Please provide a reproduction of the issue in a codepen:
This can be seen in the TabList in the Fluent v9 storybook, by inspecting a Tab in DevTools.
Actual behavior:
No aria-selected attribute is set
Expected behavior:
aria-selected="true" is set for the selected tabs, and other tabs have aria-selected="false".
Documentation describing expected behavior
https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/Tab_Role#associated_roles_and_attributes
https://www.w3.org/TR/wai-aria-1.1/#tab
The selected item in a Fluent v9 TabList should be indicated by
aria-selected="true"for screen reader users.Environment Information
Describe the issue:
Selected
Tabs in a TabList should be marked as selected for screen reader users.Please provide a reproduction of the issue in a codepen:
This can be seen in the TabList in the Fluent v9 storybook, by inspecting a Tab in DevTools.
Actual behavior:
No aria-selected attribute is set
Expected behavior:
aria-selected="true" is set for the selected tabs, and other tabs have aria-selected="false".
Documentation describing expected behavior
https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/Tab_Role#associated_roles_and_attributes
https://www.w3.org/TR/wai-aria-1.1/#tab