Skip to content

[Accessibility] Dialog close button unlabelled #16

Description

@amberhinds
  • I've read and understood the contribution guidelines.
  • I've searched for any related issues and avoided creating a duplicate issue.

Please give us a description of what happened

The close button for the dialog is unlabelled and screen readers announc eit as "X button".

Current code:

<button class="close" popovertarget="brand_assets_logo_popover" popovertargetaction="hide">X</button>

To Reproduce

Step-by-step reproduction instructions

  1. Turn on a screen reader such as VoiceOver or NVDA.
  2. Trigger the dialog so it opens.
  3. Tab to the close button and note it does not give a maningful name to the button.

Expected results

The button should have an aria-label giving it an accessible name such as "close dialog".

Actual results

The button is unlabelled.

Screenshots, screen recording, code snippet

You can hear this being read in this screen recording:

Screen.Recording.2025-11-14.at.9.27.36.AM.mov

Technical info

  • If relevant, which editor is affected (or editors):
  • Block Editor
  • Gutenberg Editor
  • Elementor Editor
  • Classic Editor
  • Other:
  • Which browser is affected (or browsers):
  • Chrome
  • Firefox
  • Safari
  • Other:

Used versions

  • Device you are using:
  • Operating system:
  • PHP version:
  • WordPress version:
  • WordPress Theme:
  • Plugin version:
  • Gutenberg plugin version:
  • Elementor plugin version:
  • Classic Editor plugin version:
  • Relevant plugins in case of a bug:

Metadata

Metadata

Labels

bugSomething isn't working

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions