Bug #86818

Page tree is not accessible via tab key anymore

Added by Oliver Bartsch 12 months ago. Updated 7 days ago.

Status:
Under Review
Priority:
Should have
Assignee:
-
Category:
Backend User Interface
Target version:
-
Start date:
2018-10-31
Due date:
% Done:

0%

TYPO3 Version:
9
PHP Version:
7.2
Tags:
page tree, tab key, usability, gremlin
Complexity:
Is Regression:
Sprint Focus:

Description

After the re-work of the page tree it’s no longer possible to access the pages in the page tree via the tab key. This should be made possible again.

History

#1 Updated by Oliver Bartsch 12 months ago

  • Description updated (diff)

#2 Updated by Gerrit Code Review 11 months ago

  • Status changed from New to Under Review

Patch set 1 for branch master of project Packages/TYPO3.CMS has been pushed to the review server.
It is available at https://review.typo3.org/58906

#3 Updated by Gerrit Code Review 11 months ago

Patch set 2 for branch master of project Packages/TYPO3.CMS has been pushed to the review server.
It is available at https://review.typo3.org/58906

#4 Updated by Gerrit Code Review 11 months ago

Patch set 3 for branch master of project Packages/TYPO3.CMS has been pushed to the review server.
It is available at https://review.typo3.org/58906

#5 Updated by Gerrit Code Review 7 months ago

Patch set 4 for branch master of project Packages/TYPO3.CMS has been pushed to the review server.
It is available at https://review.typo3.org/c/Packages/TYPO3.CMS/+/58906

#6 Updated by Michael Telgkamp 7 months ago

I would like to help on this topic.

In my opinion it would be good to implement the tree as Aria Tree View > https://www.w3.org/TR/wai-aria-practices-1.1/#TreeView
If you add a-Tags for all elements in the list you have to tab through all elements of the list. With tree view you only have one tabstop for the tree view and then navigate using the arrow keys (like in file browsers).

This would mean not to add additional a-Tags, but instead implement the aria pattern.

Some parts of the aria pattern are to add an attribute `tabindex="0"` for the active page (or the root if no active page is selected) to make one element of the list focusable.

Also the JS needs to be adjusted to handle keypresses
  • Enter/Space: should trigger the click handler
  • Key Up/Down: should move the selection to the page above/below
  • Key Left/Right: should expand/collapse the subtree

Having implemented the last bullet point you would prevent an additional tabstop for the chevron.

Also you have to think on how to open the menu of the selected item with the keyboard. I will have a look if the menu button of the keyboard can be used as trigger for this.

#7 Updated by Oliver Hader 7 days ago

  • Tags changed from page tree, tab key, usability to page tree, tab key, usability, gremlin

Also available in: Atom PDF