Skip to content

Bootstrap tabs WAI-ARIA attributes set for better accessibility #13554

@bassettsj

Description

@bassettsj

Again from the paypal/bootstrap-accessibility-plugin, these changes should be added to the documentation and the JS plugin.

Tab Panel

  1. Add ARIA roles like tablist, presentation, and tab for tabs UL, LI.
  2. Add tabIndex, aria-expanded, aria-selected, aria-controls for tab.
  3. Add ARIA roles of tabpanel, tabIndex, aria-hidden, and aria-labelledBy for tabPanel.
  4. Add keydown event listener for the tab to work with keyboard.
  5. Dynamically flip tabIndex, aria-selected, and aria-expanded for tab when it is activated and add aria-hidden to hide the previously visible tab.

Metadata

Metadata

Assignees

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions