Accessibility bugs with vertical tabs

Problem/Motivation

Vertical tabs have the many accessibility issues. At the most basic level, tablist/tab/tabpanel aria roles are not in use. More specific issues are described below.

To see these issues on a plain Drupal 9 site, install Drupal with the standard or Umami install profile, and check a text format settings form (i.e. /admin/config/content/formats/manage/filtered_html), or a block layout config form (i.e. /admin/structure/block/manage/claro_page_title).

1. Drupal.verticalTab doesn't take care of the right aria attributes. Whatever happens, every details summary element (of a single VerticalTabs) are described with aria-expanded="false" and aria-pressed="false".
2. Drupal.verticalTab marks active vertical tab menu items with an element that text is active tab. The element has a non-unique CSS id #active-vertical-tab. Sadly, this will be very wrong on the filter format and editor configuration form where multiple vertical tabs may appear (e.g. /admin/config/content/formats/manage/basic_html).

   Fearing the duplicated id, if the user changes the active tab, this marker will be removed from every other vertical tab's of the page as well

   • May 9, 2022, alisonjo315: I don't see this issue on a plain Drupal 9 site, probably it's been fixed since September 2019? -- but, I'll leave it here for now, until a second person confirms what I'm seeing.
3. Auto-focus bug: When a vertical tab is activated (triggered to be shown) by pressing Enter on the tab menu link Drupal.verticalTab tries to focus the first visible :input element in a vertical tab content. But the implementation is wrong. The effects are most obvious on pages with multiple vertical tab groups.
   
   For example, on the Filter format and editor form (/admin/config/content/formats/manage/basic_html), if you press the Enter key to select a tab under Filter settings (the last vertical tabs element on the page), the focus should be on the tab you just selected, but instead, the focus is moved to the first vertical tabs further up on the page (CKEditor plugin settings).
   
   This is because the focus trigger happens globally; it isn't limited to the current vertical tabs.
4. The label of a vertical tabs element has invalid for attribute value.

   From #3023310-85: Vertical Tabs style update.2:

   (...) the for attribute is looking for an ID that is not present on the page. The value it is looking for does appear in a div's data-drupal-selector attribute, an element that can't receive focus.

Added May 9, 2022:

5. Should be able to press enter or spacebar to activate a vertical tab.
6. Attribute aria-selected is missing from tab elements -- it should be present and have a value of true/false based on whether the tab is active.
7. Each tab should have attribute aria-controls, pointing to the related tabpanel ID.
8. Attribute tabindex="-1" must be present on all non-active tabs (and tabindex="0" on active tabs).
9. When I tab through the form, it should take me into the "active" tabpanel and then out of the tablist -- right now, it takes me through the tablist, then into the tabpanel. (If I press spacebar/enter on a tab, it does move focus to the active tabpanel then out of the tablist; it should behave like this with tabs that are open by default/on page load, too.)
10. Using up/down arrow keys while focused on a tab should take user to the next or previous tab.

Proposed resolution

Remaining tasks

User interface changes

API changes

Data model changes

Release notes snippet

@todo