Project

General

Profile

Actions

Bug #91645

open

Epic #89595: Improve accessibility of backend

Incorrect keyboard focus order in tab menus

Added by Elisabeth Zeilinger over 4 years ago. Updated almost 4 years ago.

Status:
Accepted
Priority:
Should have
Assignee:
-
Category:
Backend User Interface
Start date:
2020-06-15
Due date:
% Done:

0%

Estimated time:
TYPO3 Version:
11
PHP Version:
Tags:
accessibility
Complexity:
easy
Is Regression:
Sprint Focus:

Description

When you have a tab menu, e.g. with the modal "Create new content element", you see a tab menu with "Typical page content", "Form elements", "Menu", etc.
The tab order for this component ist incorrect. First you tab through the tab menu, then you tab through the content of the focussed tab.
Correct would be: when focussing a tab menu, the next focusable element should be the content of this tab. Navigating through the tab menu should work with arrow keys.

The following keyboard rules should be implemented for tab menus:
- Tab: When focus moves into the tab list, places focus on the active tab element. When the tab list contains the focus, moves focus to the next element in the page tab sequence outside the tablist, which is typically either the first focusable element inside the tab panel or the tab panel itself.

When focus is on a tab element in a horizontal tab list:
- Left Arrow: moves focus to the previous tab. If focus is on the first tab, moves focus to the last tab. Optionally, activates the newly focused tab (See note below).
- Right Arrow: Moves focus to the next tab. If focus is on the last tab element, moves focus to the first tab. Optionally, activates the newly focused tab (See note below).

When focus is on a tab in a tablist with either horizontal or vertical orientation:
- Space or Enter: Activates the tab if it was not activated automatically on focus.
- Home (Optional): Moves focus to the first tab. Optionally, activates the newly focused tab (See note below).
- End (Optional): Moves focus to the last tab. Optionally, activates the newly focused tab (See note below).

See implementation example here:
https://www.w3.org/TR/wai-aria-practices/examples/tabs/tabs-2/tabs.html


Files

Bildschirmfoto 2020-06-15 um 08.29.33.png (162 KB) Bildschirmfoto 2020-06-15 um 08.29.33.png Modal Create new content element Elisabeth Zeilinger, 2020-06-15 08:30

Related issues 2 (1 open1 closed)

Related to TYPO3 Core - Epic #91518: Keyboard usage in the TYPO3 backendAcceptedMichael Telgkamp2020-06-05

Actions
Related to TYPO3 Core - Bug #91701: Skip focus on disabled tabs for keyboard usersClosed2020-06-23

Actions
Actions #1

Updated by Elisabeth Zeilinger over 4 years ago

  • Related to Epic #91518: Keyboard usage in the TYPO3 backend added
Actions #2

Updated by Elisabeth Zeilinger over 4 years ago

  • Related to Bug #91701: Skip focus on disabled tabs for keyboard users added
Actions #3

Updated by Georg Ringer about 4 years ago

  • Status changed from New to Accepted
Actions #4

Updated by Riccardo De Contardi about 4 years ago

  • Parent task set to #89595
Actions #5

Updated by Benni Mack almost 4 years ago

  • Target version changed from 11.0 to Candidate for Major Version
Actions

Also available in: Atom PDF