Make WordPress Core

Opened 6 months ago

Last modified 9 hours ago

#50273 new defect (bug)

Media modal uses incorrect 'checkbox' role for list items

Reported by: talldanwp Owned by:
Milestone: Awaiting Review Priority: normal
Severity: normal Version:
Component: Media Keywords:
Focuses: accessibility Cc:


The media modal uses the role of 'checkbox' on list items (<li>) when selecting media (e.g. to add to a gallery.)

The specification of a role here is overriding the list item element's implicit listitem role.

The list item elements in this case should ideally have no role specified. The element with a checkbox role should be a child element of the list item and other associated attributes like aria-checked should also be moved to that element.

For context, this issue was caught by the automated Axe tests when writing an end-to-end test for the block editor:

To reproduce:

  1. Ensure some images are uploaded to the media library
  2. Add a gallery block to a post
  3. Click the 'Media Library' button
  4. Open the browser dev tools and inspect the HTML of an image
  5. Observe that the list item element for the image has the role of 'checkbox':
    <li tabindex="0" role="checkbox" aria-label="ac-kitchen" aria-checked="false" data-id="594" class="attachment save-ready">

Change History (5)

#1 @afercia
6 months ago

Thanks for reporting @talldanwp.

This is a known issue, together with several other, long standing, accessibility issues in the media views. The checkbox role is essential to make the JavaScript related to attachments selection work, especially when using assistive technologies. It is true it overrides the list item native semantics, and it worked this way since... forever.

Ideally, the media grid should not have a list semantics to start with. Actually, it's a grid with a JS-managed "spacial" navigation, meaning that Up/Right/Down/Left arrow keys allow to navigate the attachments in any direction. A list wouldn't convey this interaction model. The roles grid / gridcell would be more appropriate, but I'm not sure about their actual assistive technologies support.

Will discuss with the accessibility team.

This ticket was mentioned in Slack in #accessibility by afercia. View the logs.

6 months ago

#3 @afercia
6 months ago

Previously: #23560, #30390

#4 @afercia
6 months ago

Previously: #23560, #30390.

This ticket was mentioned in Slack in #core-media by joedolson. View the logs.

9 hours ago

Note: See TracTickets for help on using tickets.