How to deal with disabled tabs in an automatically activated tablist
@ZoeBijl is already working on this.
Since Oct 31, 2019.
- Dominant language
- HTML
- Stars
- 1.4k
- Forks
- 486
- PR merge metrics
- No merged PRs in 30d
Description
According to the WAI-ARIA Authoring Practices, tab elements in a set of tabs should still be focusable when disabled:
For the following composite widget elements, keep them focusable when disabled:
- ...
- Tab elements in a set of Tabs
- ...
However, this is at odds with the automatic activation pattern of tabs, which automatically displays a tab’s associated tabpanel on focus:
a tab is automatically activated and its associated panel is displayed when the tab receives focus
The problem we're running into is that if a tab is disabled, then its associated tabpanel should not be displayed on focus. This is possible with manually activated tabs, because you can focus on a tab without activating that tab. However with automatically activated tabs, each tab is, by definition, activated upon focus. Pardon the repetition, but this means that in an automatically activated tablist, if we focus on any tab, including a disabled tab, that tab will be activated and its associated tabpanel will be displayed. But the whole point of disabling a tab is to ensure the tab cannot be activated. It seems like the automatic activation pattern is at odds with the guidance to make disabled tabs focusable.
I discussed this a bit with @sh0ji and he said:
I would expect making the tab disabled to disable the automatic activation of the panel, but not focus.
In my opinion, this is a confusing mixing of two paradigms (manual and automatic activation).
The only solution I can think of that doesn't mix the manual/automatic activation paradigms and respects the need to keep all tabs focusable is to still activate a disabled tab on focus, but hide the contents of the associated tab panel somehow. I'd appreciate any other suggestions or guidance on this.
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Assessment
This issue has not been assessed yet.