Bug #86818

Page tree is not accessible via tab key anymore

Added by Oliver Bartsch about 1 year ago. Updated 29 days ago.

Status:
Closed
Priority:
Should have
Assignee:
-
Category:
Backend User Interface
Target version:
-
Start date:
2019-12-16
Due date:
% Done:

100%

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.


Subtasks

Task #89832: Add acceptance tests for keyboard interaction with pagetreeResolvedMichael Telgkamp

Task #89955: Adjust build plans to include acceptancePagetreeResolvedAnja Leichsenring

Associated revisions

Revision f8c06e13 (diff)
Added by Michael Telgkamp about 2 months ago

[FEATURE] Reintroduce keyboard accessible version of the pagetree

- Pagetree is focusable via tab key
- Keyboard navigation with arrow keys inside pagetree is enabled
- Implement accessible tree structure for tree nodes (role=tree)

Resolves: #86818
Releases: master

Change-Id: Ic948fb0de8461a8c5b4b5297b94e5cb94465ec42
Reviewed-on: https://review.typo3.org/c/Packages/TYPO3.CMS/+/62051
Tested-by: TYPO3com <>
Tested-by: Georg Ringer <>
Tested-by: Richard Haeser <>
Reviewed-by: Georg Ringer <>
Reviewed-by: Richard Haeser <>

History

#1 Updated by Oliver Bartsch about 1 year ago

  • Description updated (diff)

#2 Updated by Gerrit Code Review about 1 year 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 about 1 year 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 about 1 year 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 11 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 10 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 3 months ago

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

#8 Updated by Gerrit Code Review 3 months ago

Patch set 6 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/+/62051

#9 Updated by Michael Telgkamp 3 months ago

The context menu will not be adjusted in this issue, I created #89496 for this.

#10 Updated by Gerrit Code Review 3 months ago

Patch set 7 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/+/62051

#11 Updated by Gerrit Code Review 3 months ago

Patch set 8 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/+/62051

#12 Updated by Gerrit Code Review 3 months ago

Patch set 9 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/+/62051

#13 Updated by Gerrit Code Review 3 months ago

Patch set 10 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/+/62051

#14 Updated by Gerrit Code Review 3 months ago

Patch set 11 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/+/62051

#15 Updated by Gerrit Code Review 3 months ago

Patch set 12 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/+/62051

#16 Updated by Gerrit Code Review 3 months ago

Patch set 13 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/+/62051

#17 Updated by Gerrit Code Review 3 months ago

Patch set 14 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/+/62051

#18 Updated by Gerrit Code Review 3 months ago

Patch set 15 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/+/62051

#19 Updated by Gerrit Code Review 3 months ago

Patch set 16 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/+/62051

#20 Updated by Gerrit Code Review 3 months ago

Patch set 17 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/+/62051

#21 Updated by Gerrit Code Review 3 months ago

Patch set 18 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/+/62051

#22 Updated by Gerrit Code Review 3 months ago

Patch set 19 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/+/62051

#23 Updated by Gerrit Code Review 3 months ago

Patch set 20 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/+/62051

#24 Updated by Gerrit Code Review 3 months ago

Patch set 21 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/+/62051

#25 Updated by Gerrit Code Review 3 months ago

Patch set 22 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/+/62051

#26 Updated by Gerrit Code Review 3 months ago

Patch set 23 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/+/62051

#27 Updated by Gerrit Code Review 3 months ago

Patch set 24 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/+/62051

#28 Updated by Gerrit Code Review about 2 months ago

Patch set 25 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/+/62051

#29 Updated by Gerrit Code Review about 2 months ago

Patch set 26 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/+/62051

#30 Updated by Gerrit Code Review about 2 months ago

Patch set 27 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/+/62051

#31 Updated by Gerrit Code Review about 2 months ago

Patch set 28 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/+/62051

#32 Updated by Gerrit Code Review about 2 months ago

Patch set 29 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/+/62051

#33 Updated by Gerrit Code Review about 2 months ago

Patch set 30 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/+/62051

#34 Updated by Michael Telgkamp about 2 months ago

  • Status changed from Under Review to Resolved
  • % Done changed from 0 to 100

#35 Updated by Benni Mack about 1 month ago

  • Status changed from Resolved to Closed

Also available in: Atom PDF