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 elementlist: 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)
Change History (2)
This ticket was mentioned in PR #13368 on WordPress/wordpress-develop by @khokansardar.
7 hours ago
#1
- Keywords has-patch added
![(please configure the [header_logo] section in trac.ini)](/chrome/site/your_project_logo.png)
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-modallabeled itsrole="dialog"element with a fixedmedia-frame-titleID 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'sh1. Separately, the attachmentsulgetsrole="group", since itslichildren carryrole="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.