Task #92679
closed
Epic #89595: Improve accessibility of backend
Pagetree Toolbar Focus Styles and Labels
0%
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
Updated by Matthias Weber about 4 years ago
- Copied from Bug #92637: Create new pages, Filter and Reload buttons have missing focus style added
Updated by Riccardo De Contardi about 4 years ago
- Category set to Backend User Interface
Updated by Benni Mack almost 4 years ago
- Target version changed from 11.0 to Candidate for Major Version
Updated by Benni Mack over 3 years ago
Hey,
can you check if this still applies to v11.2/master?
Updated by Riccardo De Contardi over 3 years ago
- File schermata1.png schermata1.png added
- File schermata2.png schermata2.png added
- File schermata3.png schermata3.png added
- File schermata4.png schermata4.png added
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
Updated by Ariane Kreßner about 3 years ago
- Related to Bug #95767: Add labels for creating a new page and following actions added
Updated by Simon Schaufelberger over 2 years ago
- Related to Task #97344: [TASK] Polish SvgTree component styling added
Updated by Annett Jähnichen about 2 years ago
- TYPO3 Version changed from 11 to 12
- Tags changed from accessibility to accessibility, UX
Updated by Annett Jähnichen about 2 years ago
- Related to Epic #98290: [UX] - Keep the house clean added
Updated by Riccardo De Contardi over 1 year ago
- Related to Bug #95333: Focus border in PageTree is cluttered in chrome added
Updated by Georg Ringer 5 months ago
- Status changed from New to Closed
the tree has been reworked in v13, also keeping a11y in mind, therefore I am closing this issue