Bug #92695

Epic #89595: Improve accessibility of backend

Search modal dialog cannot be used with a keyboard

Added by Gabe Troyan about 1 year ago. Updated 12 months ago.

Status:
In Progress
Priority:
Should have
Assignee:
Category:
Backend User Interface
Start date:
2020-10-23
Due date:
% Done:

0%

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

Description

Pages/Tasks

  • Search

Affected WCAG 2.1 Success criterions

  • 1.3.1 Info and Relationships A
  • 2.1.1 Keyboard A
  • 2.4.4 Link Purpose (In Context) A
  • 4.1.2 Name, Role, Value A

Affected components

  • Dialog

Description

When you type text in the search input field, a modal dialog with the search results opens. This dialog with all including search results cannot be reached with the keyboard. As soon as the input field loses focus, the dialog gets closed.

The modal dialog also has an invalid ARIA role="menu", which would require to have additonal child nodes with other ARIA roles like role="menuitem":

<div class="dropdown-menu" role="menu">
  ... 
</div>

The ARIA role="menu" is wrong in this context, as the modal dialog doesn't contain a menu.

Before the search model dialog there is an empty link, which seems to control the visibility of the dialog:

<a href="#" class="dropdown-toggle t3js-toolbar-search-dropdowntoggle" data-toggle="dropdown" aria-expanded="false"></a>

Empty links should be avoided.

Recommendation

Make the search modal dialog available for keyboard usage and use the best practice design pattern for modal dialogs for the search dialog.
Remove the empty link or at least make it invisible for screenreader users, for example with aria-hidden="true".

Further Information

https://www.w3.org/TR/wai-aria-practices-1.1/examples/dialog-modal/dialog.html

Search dialog modal with the typed text "AD" shows 5 results


Related issues

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

Actions
Related to TYPO3 Core - Bug #92688: Search result list is missing correct HTML markup and additional search informationNew2020-10-23

Actions
#1

Updated by Paul Hansen about 1 year ago

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

Updated by Gabe Troyan about 1 year ago

  • Related to Bug #92688: Search result list is missing correct HTML markup and additional search information added
#3

Updated by Gabe Troyan about 1 year ago

In progress by Gabe

#4

Updated by Riccardo De Contardi about 1 year ago

  • Parent task set to #89595
#5

Updated by Michael Telgkamp about 1 year ago

  • Status changed from New to In Progress
  • Assignee set to Gabe Troyan
  • Target version set to 11.0
#6

Updated by Benni Mack 12 months ago

  • Target version changed from 11.0 to Candidate for Major Version

Also available in: Atom PDF