Make WordPress Core

Opened 8 hours ago

Last modified 7 hours ago

#66025 new defect (bug)

Media: Fix accessibility violations reported by Axe-core

Reported by: afercia Owned by:
Priority: normal Milestone: 7.2
Component: Media Version:
Severity: normal Keywords: has-screenshots has-patch
Cc: Focuses: accessibility, javascript

Description

Discovered while testing the experimental PR to introduce Axe-core accessibility checks in #66015 / https://github.com/WordPress/wordpress-develop/pull/13348

In order of severity, there are a few violations that need to be fixed:

1
The Edit attachment modal dialog (and possibly other media modal dialogs) is not labeled.

  • aria-dialog-name: Ensure every ARIA dialog and alertdialog node has an accessible name

Likely, this is a regression as I remember the media modal dialogs used to be correctly labeled.
The element with role=dialog uses an aria-labelledby="media-frame-title" attribute.
However, there is no element with ID media-frame-title.

In other media frames, the ID media-frame-title is used on the heading container. Instead, a proper ID should be set directly on the H1 heading.
Alternatively, the modal dialog could use aria-label instead of aria-labelledby but given the heading title is dynamic, I think aria-labelledby is preferred.

2
Two violations are reported for the rules:

  • aria-allowed-role: Ensure role attribute has an appropriate value for the element
  • list: Ensure that lists are structured correctly

They both have the same origin. The attachments in the list are <li> elements with a role="checkbox".
However, the wrapper <ul> element has no explicit role set, so that it keeps its native semantics of list.
This is a violation of ARIA in HTML, where the role of list elements can only be changed if the role of the <ul> element is changed as well.
I guess the most appropriate role for the <ul> element would be group.
Worth considering whether the group should also be labeled.
It is also worth checking the attachments list in other media modal dialogs.

Attachments (1)

01 unlabeled media modal dialog.png (429.8 KB ) - added by afercia 8 hours ago.

Download all attachments as: .zip

Change History (2)

This ticket was mentioned in PR #13368 on WordPress/wordpress-develop by @khokansardar.


7 hours ago
#1

  • Keywords has-patch added

The Edit attachment modal in the Media Library grid opens without an accessible name, and the attachments list is reported as structurally invalid because its items override the list-item role.

tmpl-media-modal labeled its role="dialog" element with a fixed media-frame-title ID that sat on the frame's heading container. In the grid that ID belongs to the manage frame's empty heading, and any page opening more than one media frame produces duplicates. The ID is now generated per modal instance and set on the frame's h1. Separately, the attachments ul gets role="group", since its li children carry role="checkbox" and ARIA in HTML only permits that when the list role changes too.

Trac ticket: https://core.trac.wordpress.org/ticket/66025

## Use of AI Tools
AI assistance: Yes
Tool(s): Claude Code
Model(s): Claude Opus 5
Used for: reproducing the violations in the browser, diagnosing the duplicate ID, and drafting the fix. All changes were reviewed and validated by me.

Note: See TracTickets for help on using tickets.