No Code Attached Yet a11y a11y-audit-backlog a11y-priority-critical (Immediate)
avatar mbeganyi-a11y
mbeganyi-a11y
7 Sep 2026

Steps to reproduce the issue

Milestone 1a finding ID M1a-010
Backlog priority Immediate
Severity — carried from Milestone 1a Critical
Implementation effort High
Target milestone(s) MS2a — Design Tokens and Core Components; MS2b — Core Forms and Validation; MS3b — Backend Template Build
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 Development, Editorial, Design
Affected Joomla area/component Media Manager — grid view, table view, toolbar, information panel, and folder tree — Milestone 1a finding #10
Affected user journey(s) 06 — Media Manager (com_media)

Media Manager grid view showing folders and files whose focusable icons lack accessible roles and names

Media Manager grid and table view toolbars showing selection, path, search, ordering, view, and information controls

Audit finding

The Media Manager does not consistently convey visual information, structure, states, and operations programmatically. It also has inconsistent keyboard behaviour.

The report identifies issues across several areas

Grid view

  • Focusable folder icons have no accessible name and no role
  • Item-selection checkmarks have no role, cannot receive an accessible name through aria-label, and do not expose their checked state
  • The checkmarks cannot be set using Space or Enter

Ellipsis menu

  • The ellipsis button that opens the file-management submenu does not expand using arrow keys
  • Once expanded, it behaves like a toolbar with arrow navigation, but this behaviour is not communicated through roles or properties
  • Arrow-key behaviour is inconsistent: sometimes it moves within the menu, sometimes the page scrolls, and sometimes a file preview opens
  • Escape does not close the menu

Table view

  • The table view is not keyboard accessible
  • Its columns can be sorted, but the current sorting direction is not conveyed programmatically

Both views

  • The information panel cannot be populated using the keyboard because activating an item immediately opens a folder or shows a file preview

Toolbar

  • The “Toggle select all” checkbox works, but “Toggle” is unnecessary and potentially confusing in a checkbox name
  • The file-path navigation uses a <nav> element labelled “Breadcrumb”, although it is not conventional page navigation; the report suggests “Current path” as a clearer name
  • A visual no-results alert from the search filter is not conveyed to assistive technology
  • The “Change ordering” button opens two select boxes, but does not indicate that it opens controls; the selects are also positioned after other buttons, making them difficult to find
  • Grid-size buttons look disabled at the minimum or maximum size but are not programmatically disabled; because they remain interactive, their icons must meet the 3:1 non-text contrast requirement
  • The view switch is named “Toggle between grid and table views” but does not indicate which view is current
  • The item-information button does not indicate whether the information pane is shown

Folder tree

  • The folder tree is unclear and improperly implemented
  • Its roles need proper nesting, and expanded and collapsed states need to be set correctly

The report recommends rethinking how the Media Manager is built and planning it from the ground up in an accessible way, rather than fixing each issue in isolation.

User impact

Keyboard-only users may be unable to select items, use item actions, sort the table view, populate the information panel, or navigate the folder tree reliably.

Screen-reader users may encounter unnamed folder icons, selection controls without a role or state, and menus whose behaviour and structure are not communicated.

Users may not know which view, sorting direction, information pane, or folder is currently active. They may also miss search results or errors that are conveyed only visually.

These barriers can prevent users from completing core Media Manager tasks, including locating, selecting, previewing, and managing files.

Remediation plan

Plan and implement the Media Manager as an accessible application interface

  • Make every function operable with a keyboard alone
  • Provide accessible names, roles, and states for all interactive controls
  • Make item-selection controls real checkboxes or equivalent controls with programmatically exposed checked states
  • Ensure selection controls can be operated with Space and Enter as appropriate to their role
  • Give folder and file controls descriptive accessible names
  • Implement the ellipsis menu with a consistent, documented interaction pattern and appropriate roles and properties
  • Ensure Escape closes the menu and returns focus to a logical location
  • Make the table view keyboard accessible and expose the current sort column and direction
  • Provide a keyboard method to open an item's information panel without immediately opening a folder or preview
  • Review the accessible name and semantics of the file-path navigation; consider “Current path” rather than “Breadcrumb”
  • Convey search no-results and other status information to assistive technology
  • Make the ordering controls discoverable and explain that the button opens them
  • Programmatically disable grid-size controls at their limits, or otherwise convey their unavailable state; ensure visible icons meet the 3:1 non-text contrast requirement where they remain interactive
  • Expose the currently selected view and the visibility of the information pane
  • Implement the folder tree with correctly nested roles and expanded or collapsed states, following an appropriate tree pattern
  • Test the interface with keyboard-only interaction and multiple screen readers
  • Avoid introducing horizontal scrolling as a solution
  • Treat this as a component and interaction redesign, not a collection of unrelated visual fixes

Preconditions

  • Use Joomla 6.2 with the Atum administrator template
  • Sign in with an account permitted to access Media
  • Use a test media repository containing folders, files, and enough items to exercise sorting and navigation
  • Record the exact Joomla build, browser name and version, operating system, viewport dimensions, and browser zoom
  • Record the screen reader and browser combination if testing announcements
  • Start at 100% browser zoom
  • Use disposable test files and folders
  • Do not delete or overwrite production media during verification

Steps to reproduce — grid view

  1. Open the Joomla administrator interface at the site's base URL followed by /administrator/
  2. Open Content → Media
    • Alternatively, navigate to /administrator/index.php?option=com_media on the same installation
  3. Use the grid view
  4. Navigate using Tab and Shift+Tab
  5. Locate a folder icon and record its accessible name and role
  6. Locate an item-selection checkmark and record its role, accessible name, and checked state
  7. Attempt to select and clear an item using Space and Enter
  8. Record whether the selection state changes and is exposed programmatically
  9. Open the ellipsis menu for an item
  10. Record the control's expanded state, role, and keyboard behaviour
  11. Test arrow keys within the menu and record each result
  12. Press Escape and record whether the menu closes and where focus moves
  13. Capture the grid view, focused controls, menu states, and keyboard results

Steps to reproduce — table view

  1. Switch to the table view
  2. Navigate the interface using the keyboard only
  3. Record whether rows, cells, and controls can be reached and operated
  4. Locate the column-sorting controls
  5. Activate a sort control
  6. Record whether the current sort column and direction are programmatically conveyed
  7. Attempt to open an item's information panel without opening the item or preview
  8. Record whether a keyboard-only method exists
  9. Capture the table view, sorting state, and keyboard results

Steps to reproduce — toolbar

  1. Locate the select-all checkbox
  2. Record its accessible name and test its operation
  3. Locate the file-path navigation
  4. Record its element, accessible name, and announced purpose
  5. Use the search field to enter a query with no matches
  6. Record whether the visual no-results alert is announced to assistive technology
  7. Locate “Change ordering”
  8. Record its accessible name and whether it indicates that it opens controls
  9. Activate it and record where the ordering select boxes appear in the focus order
  10. Adjust the grid size to its minimum and maximum
  11. Record whether the relevant buttons are programmatically disabled and measure their icon contrast
  12. Switch between grid and table views
  13. Record whether the current view is conveyed
  14. Toggle the item-information pane
  15. Record whether its visibility is conveyed
  16. Capture each toolbar control, state, and result

Steps to reproduce — folder tree

  1. Locate the folder tree
  2. Navigate it using the keyboard only
  3. Record the tree's roles, nesting, and focus behaviour
  4. Expand and collapse folders
  5. Record whether expanded and collapsed states are exposed programmatically
  6. Check whether the current folder is identifiable
  7. Capture the tree structure, focus movement, and state changes

Screen-reader verification

  1. Use a screen reader with the browser combination being tested
  2. Navigate the grid view, table view, toolbar, information panel, and folder tree
  3. Record announced names, roles, states, and status messages
  4. Attempt each documented keyboard interaction
  5. Record any inconsistency, unexpected context change, or missing announcement
  6. Repeat with at least one additional screen reader if available
  7. Record the screen-reader name, version, browser, and operating system

Version

6.2

Expected result

All Media Manager functions are operable with a keyboard alone and are conveyed accurately to assistive technology.

Interactive controls have appropriate accessible names, roles, and states. Selection, menus, sorting, view mode, information-pane visibility, folder expansion, and status messages are programmatically exposed.

Visual information is not conveyed by colour or appearance alone, and interactive icons meet the applicable non-text contrast requirement.

Actual result

The audit reports missing accessible names and roles, missing selection states, inconsistent keyboard behaviour, an inaccessible table view, missing status announcements, unclear toolbar states, and an improperly implemented folder tree.

The ellipsis menu does not close with Escape, and its arrow-key behaviour is inconsistent.

The current Joomla 6.2 build needs to be checked to establish which behaviours persist and to prioritise the refactor.

What device were you using? (eg, phone, laptop)

Desktop web

What web browser were you using? (eg, Chrome, Safari)

Chrome, Firefox, Edge, Safari

Assistive Technology?

VoiceOver, JAWS, NVDA

Additional Comments

The browser and assistive-technology entries above are carried forward from the original issue and do not represent a new verification of every combination against Joomla 6.2.

Development, Editorial, and Design are the responsibility tags in the original report.

This finding is intentionally broad because the reported barriers span the Media Manager's interaction model, semantics, states, and status communication. It should be broken into tracked implementation tasks only after the interaction model has been agreed.

The report's suggestion to reconsider the interface does not remove the need to verify each resulting component against the listed success criteria.

The grid-size buttons are described as appearing disabled but not being programmatically disabled. If they remain interactive, their icons must meet the 3:1 non-text contrast requirement.

MS2a and MS2b are proposed for the foundational media components, with MS3b covering the documented Media Manager integration.

avatar mbeganyi-a11y mbeganyi-a11y - open - 7 Sep 2026
avatar mbeganyi-a11y mbeganyi-a11y - change - 7 Sep 2026
Labels Added: a11y a11y-audit-backlog a11y-priority-critical (Immediate)
avatar mbeganyi-a11y mbeganyi-a11y - labeled - 7 Sep 2026
avatar mbeganyi-a11y mbeganyi-a11y - labeled - 7 Sep 2026
avatar mbeganyi-a11y mbeganyi-a11y - labeled - 7 Sep 2026
avatar joomla-cms-bot joomla-cms-bot - change - 7 Sep 2026
Labels Added: No Code Attached Yet
avatar joomla-cms-bot joomla-cms-bot - labeled - 7 Sep 2026
avatar mbeganyi-a11y mbeganyi-a11y - change - 7 Sep 2026
The description was changed
avatar mbeganyi-a11y mbeganyi-a11y - edited - 7 Sep 2026
avatar mbeganyi-a11y mbeganyi-a11y - change - 8 Sep 2026
The description was changed
avatar mbeganyi-a11y mbeganyi-a11y - edited - 8 Sep 2026
avatar mbeganyi-a11y mbeganyi-a11y - change - 26 Oct 2026
The description was changed
avatar mbeganyi-a11y mbeganyi-a11y - edited - 26 Oct 2026

Add a Comment

Login with GitHub to post a comment