Project

General

Profile

Actions

Task #92679

open

Epic #89595: Improve accessibility of backend

Pagetree Toolbar Focus Styles and Labels

Added by Matthias Weber over 3 years ago. Updated over 1 year ago.

Status:
New
Priority:
Should have
Assignee:
-
Category:
Backend User Interface
Start date:
2020-10-22
Due date:
% Done:

0%

Estimated time:
TYPO3 Version:
12
PHP Version:
Tags:
accessibility, UX
Complexity:
easy
Sprint Focus:

Description

Create new pages, Filter and Reload buttons have missing focus style

https://typo3.audit.gugler.at/issues#TYPO3-18

When you navigate with your keyboard to an interactive element, you should see a visible focus style. This success criterion helps to know which element has the keyboard focus. The Create new pages, Filter and Reload buttons don't change its style, when it receives focus.

Create new pages, Filter and Reload buttons have no descriptive text

https://typo3.audit.gugler.at/issues#TYPO3-20

When navigating to a button, a descriptive text must be presented to screen reader users to indicate the function of the button.

The Create new pages, Filter and Reload buttons use only the title attribute. Many user agents do not expose the title in an accessible manner as required by the specification (e.g. requiring a pointing device such as a mouse to cause a tooltip to appear, which excludes keyboard-only users and touch-only users, such as anyone with a modern phone or tablet).


Files

schermata2.png (46.7 KB) schermata2.png Riccardo De Contardi, 2021-05-15 15:09
schermata1.png (93.2 KB) schermata1.png Riccardo De Contardi, 2021-05-15 15:09
schermata3.png (50 KB) schermata3.png Riccardo De Contardi, 2021-05-15 15:09
schermata4.png (43.9 KB) schermata4.png Riccardo De Contardi, 2021-05-15 15:09

Related issues 5 (4 open1 closed)

Related to TYPO3 Core - Bug #95767: Add labels for creating a new page and following actionsNew2021-10-25

Actions
Related to TYPO3 Core - Task #97344: [TASK] Polish SvgTree component stylingClosed2022-04-08

Actions
Related to TYPO3 Core - Epic #98290: [UX] - Keep the house cleanIn ProgressAnnett Jähnichen2022-04-05

Actions
Related to TYPO3 Core - Bug #95333: Focus border in PageTree is cluttered in chromeNew2021-09-23

Actions
Copied from TYPO3 Core - Bug #92637: Create new pages, Filter and Reload buttons have missing focus styleNew2020-10-21

Actions
Actions #1

Updated by Matthias Weber over 3 years ago

  • Copied from Bug #92637: Create new pages, Filter and Reload buttons have missing focus style added
Actions #2

Updated by Riccardo De Contardi over 3 years ago

  • Parent task set to #89595
Actions #3

Updated by Riccardo De Contardi over 3 years ago

  • Category set to Backend User Interface
Actions #4

Updated by Benni Mack over 3 years ago

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

Updated by Benni Mack almost 3 years ago

Hey,

can you check if this still applies to v11.2/master?

Updated by Riccardo De Contardi almost 3 years ago

Some screenshots taken from the latest master (11.3.0-dev):

1) Focus style on filter (search):

2)Focus style on reload button

3) Focus style on a selected page

4) Focus style on hide pagetree panel button

Further notes

- the "hide pagetree panel button" is the last element that can be selected with keyboard (tab) (it comes after the whole pagetree) . Maybe it's by design?

- I could be wrong, but it seems that the "create new page" icons cannot be reached by keyboard navigation;

- The context menu on page cannot be opened by keyboard (but I could be wrong, I have not tested with MacOS accessibility features turned on)

- the filter/search input has a placeholder attribute but no <label> nor title attribute (problematic)

- the filter/search input has an hidden "close" button with no accessible text; its state does not update when switching between visible/invisibile (problematic)

- the reload icon is a <button> with title attribute so it seems ok

- the hide pagetree panel button is a <button> with title attribute; looks fine but

1) it has a role="button" attribute that looks redundant. Opinions?
2) I see that there is also an invisible "show navigation" twin button; the button has a role="button" attribute,too. It becomes visible when the pagetree panel is collapsed (and vice versa with the other one); the state of the
buttons does not update

Actions #7

Updated by Ariane Kreßner over 2 years ago

  • Related to Bug #95767: Add labels for creating a new page and following actions added
Actions #8

Updated by Simon Schaufelberger about 2 years ago

  • Related to Task #97344: [TASK] Polish SvgTree component styling added
Actions #9

Updated by Annett Jähnichen over 1 year ago

  • TYPO3 Version changed from 11 to 12
  • Tags changed from accessibility to accessibility, UX
Actions #10

Updated by Annett Jähnichen over 1 year ago

  • Related to Epic #98290: [UX] - Keep the house clean added
Actions #11

Updated by Riccardo De Contardi 10 months ago

  • Related to Bug #95333: Focus border in PageTree is cluttered in chrome added
Actions

Also available in: Atom PDF