Skip to content

Accessibility: Set tabindex=0 on tab panels with no content #2014

@emteknetnz

Description

@emteknetnz

Follow on from #1966

https://www.w3.org/WAI/ARIA/apg/patterns/tabs/ Keyboard Interaction Notes 4 states

When the tabpanel does not contain any focusable elements or the first element with content is not focusable, the tabpanel should set tabindex="0" to include it in the tab sequence of the page

An example of non-tabbable data might be a LiteralField that has <p>lorem ipusm</p> in it

We have 3x types of applicable tab panels

  • The primary tabs (e.g. Content/Settings/History) that pjaxes in heaps of content
  • Secondary tabs (e.g. getCMSFIelds()) that shows/hides content based using jquery
  • React based tabs (<TabNav>) that do their own thing

Acceptance criteria

  • Tab panels without tabbable content have tabindex="0" added to them

Kitchen sink CI

PRs

Metadata

Metadata

Assignees

No one assigned

    Projects

    No projects

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions