Media: Fix accessibility violations reported by Axe-core

[afercia]

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.

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.

Thank you @itzmekhokan the new unique ID seem to work nicely.
I'd just wait for feedback from @joedolson to confirm the role=group for the attachments list is the most appropriate one. Also to consider whether it needs to be labeled, not sure because there is already a visually hidden heading before it.

Hint for testing:

• Create a post and add a Classic block.
• When editing the Classic block, click 'Add Media' in the TinyMCE editor toolbar.
• That will give you access to a media modal dialog with all the frames like Add media, Create Gallery, Create audio playlist etc. so that all the media frames can be tested when the heading changes dynamically.

@joedolson when you have a chance, a quick feedback about the role="group" would help unblock ​the Axe-core automated checks PR.

[arkaprabhachowdhury]

After patch: WordPress Playground screenshot showing the accessible Add Media dialog and attachments group/list semantics.

[arkaprabhachowdhury]

Test Report

Description

This report validates that PR #13368 addresses the issue in Trac #66025.

Patch tested: ​https://github.com/WordPress/wordpress-develop/pull/13368 at db79f13cc7c907833c9112d3f243849926165a01

Environment

• WordPress: 7.2-alpha-20260902.15272
• PHP: 7.4
• Server: WordPress Playground, PHP.wasm
• Browser: Relay Browser
• OS: Windows
• MU Plugins: None activated
• Plugins: None activated

Steps to Test

1. Open the PR-specific Playground: ​https://playground.wordpress.net/wordpress.html?pr=13368
2. Open a new post.
3. Insert a Classic block.
4. Open the Classic block editor and select “Add Media”.
5. Inspect the media modal and attachments container.

Expected Results

• The media modal has an accessible name derived from its visible heading.
• The attachments container uses compatible group/list semantics.

Actual Results

• The Add Media modal opened successfully and was exposed as a dialog named “Add media”.
• The attachments container was exposed as a group with an underlying ul.
• The Classic block flow remained usable.

Supplemental Artifacts

• After patch: ticket-66025-after.png

[afercia]

In 63612:

Media: Fix accessibility violations reported by Axe-core.

• Fixes the labelling of the media modal dialog.
• Fixes the semantics of the attachments browser list: given each attachment has a role=checkbox, the list itself must have a role=group.

Developed in ​https://github.com/WordPress/wordpress-develop/pull/13368

Props khokansardar, arkaprabhachowdhury, afercia.
Fixes #66025.