NOTE: Accessibility backlog issue and work-in-progress. This issue has been opened to account for all the issues flagged in the initial Milestone 1a Audit Report. If this is a duplicate issue, it will be closed by the end of September 2026.
| Milestone 1a finding ID | M1a-010 |
|---|---|
| Backlog priority | Immediate |
| Severity — carried from Milestone 1a | Critical |
| Implementation effort | High |
| Target milestone(s) | MS2a, MS2b, MS3a, MS3b, MS4, MS5a, MS5b, MS7a, MS7b, MS8a, MS9a, MS10 |
| WCAG 2.2 success criterion | 1.3.1 Info and Relationships; 1.4.1 Use of Color; 1.4.11 Non-text Contrast; 2.1.1 Keyboard; 4.1.2 Name, Role, Value; 4.1.3 Status Messages |
| Responsibility tag(s) from report | Design, Development, Editorial |
| Affected Joomla area/component | https://accessibility-project.joomla.org/results/Milestone-1a/milestone1/deliverable1/wcag-report#06fbccbe-a70a-404d-b6ef-782258b5c87d |
| Affected user journey(s) | 06 – Media Manager (com_media) |
| Source report/reference | Milestone 1a WCAG audit report |
| STF reporting reference | To be assigned |
| Issue owner | To be assigned |
| Status | Triage |
Audit finding
Media manager: Visual information is not conveyed programmatically, keyboard navigation is inconsistent, elements lack roles and states, names
User impact
Keyboard-only users and many assistive-technology users may be blocked from operating the interface or completing the task.
Remediation plan
Refactor the interaction so it is fully keyboard operable, uses correct semantics and states, preserves predictable focus movement, and avoids unexpected changes of context.
Steps to reproduce
6.1
All controls in media manager are accessible to keyboard and assistive technology users. Toast messages are conveyed appropriately.
Instead of fixing the individual issues, it makes sense to re-think how the media manager is built and works and plan it from the ground up in an accessible way.
In the grid view, the focusable icons for folders have no accessible name and no role. The checkmarks to select individual items have no role and hence also cannot receive the name through aria-label. Their status is not set. The checkboxes cannot be set using space or enter.
The ellipsis button that shows the sub menu to manage files does not expand using the arrow keys, but once expanded behaves like a toolbar with arrow navigation. This is inconsistent and also not communicated through roles and properties.
Keyboard interaction is inconsistent in the ellipsis menu in general. Sometimes the arrow key works as expected, occasionally the page scrolls, and sometimes the preview of a file is opened.
Pressing ESC does not close the ellipsis menu.
The table view is not keyboard accessible at all. Its columns can be sorted, but there is no programmatic indication of the current sorting direction.
In both views, the information panel cannot be filled when using the keyboard as activating an item immediately opens the folder or shows a preview of the file.
The toolbar also has accessibility issues:
The “Toggle select all” checkbox is implemented as a regular checkbox, and hence works as expected. (Consider dropping the word “toggle” from its accessible name, it is unnecessarily wordy and can be confusing. That the UI element toggles is implied by the fact that it is a checkbox.)
The file path navigation does not well convey what it is visually and also uses a navigation (
) element that has the aria-label of Breadcrumb. As this is not a classical navigation like a page navigation, consider using a different element. Pick a better accessible name than “Breadcrumb”, for example “Current path”.The search field that filters the results shows an alert visually when there are no matches, but does not convey it to the assistive technologies.
The sort button (“Change ordering”) opens two select boxes that allow you to select what to order by and in which direction, but the select boxes are positioned after other buttons and the button does not convey that something would open. This makes the actual sorting options difficult to find.
The buttons to change the grid size look disabled when the minimum/maximum grid size is selected, but they are not made disabled programmatically. So the icons need to meet contrast requirements (at least 3∶1 contrast).
The switch from grid to list view and vice versa is named “Toggle between grid and table views” and gives users no indication on what mode is selected.
The toggle item info button does not indicate if the item info pane is shown or not.
The folder tree navigation is unclear to users and not properly implemented. Especially there roles need to be properly nested and expanded/collapsed set properly. See this example from W3C/WAI. That said, even the WAI treeview works sub-optimally on platforms that do not support treeviews natively, namely macOS and iOS.
Desktop web
Chrome, Firefox, Edge, Safari
VoiceOver, JAWS, NVDA
No response
| Labels |
Added:
a11y
a11y-audit-backlog
a11y-priority-critical (Immediate)
|
||
| Labels |
Added:
No Code Attached Yet
|
||