Set featured image button incorrectly coded as link and missing required ARIA attributes

[alh0319]

In the classic editor, there is a link that opens the Media Library in a modal so users can select the featured image. This is the link:

<a href="https://wooclassic.instawp.xyz/wp-admin/media-upload.php?post_id=229&amp;type=image&amp;TB_iframe=1&amp;width=753&amp;height=847" id="set-post-thumbnail" class="thickbox">Set featured image</a>

Links take people to another page or another part of the same page. Buttons trigger behaviors on a page such as opening a modal. This element is incorrectly coded as a link and should be a button instead.

Additionally, screen reader users are not warned that triggering this button will open a modal dialog.

For WCAG conformance, the following changes need to be made:

• Recode the button using a proper <button> tag or add role="button" to the link (if adding role="button" JavaScript must also be added that allows it to be triggered with the spacebar.
• Add aria-haspopup="dialog"
• Add the aria-controls attribute referencing the ID of the modal being opened.

For additional information see:

• ​MDN button role
• ​MDN ARIA: aria-haspopup attribute
• ​MDN ARIA: aria-controls attribute

[joedolson]

See: #26504

This is an example of a case that has a no-JS fallback behavior. The no-js fallback does still work, so while it is unlikely, it is *possible* that it is still in use.

Per my comment 62 on #26504, I'm in favor of removing the no-JS fallback to support a JS-required interface.

[joedolson]

I can solve this one problem by rewriting the link as a button in JS, but that's really just a bandaid solution. But maybe it's time to reach agreement on whether or not we're still supporting no-JS in core.

[alh0319]

Are there other elements that work without JS in core? Like what happens with Gutenberg if JavaScript has been disabled? It would make sense that if the main editor can't function without JS, then it might make sense to remove support for no-JS in other parts of core as well.

[joedolson]

Gutenberg displays a message instructing people to install the Classic Editor plugin; same with block widgets and the Classic Widget plugin.

The majority of the classic editor and widget environment works without JS - there may be exceptions, but it hasn't changed a lot for some time, and the last time I checked that over, it seemed like most things still work. It's a large enough system that it's hard to state with certainty that everything is functional.

But the classic environment is very much built with progressive enhancement in mind, so most features are not JS dependent.

[joedolson]

A similar issue was handled in #63238, where the no-js fallback was considered irrelevant, since it was never rendered if there was no JS.

Practically speaking, we can just change the way the no-js conditions are handled, and instead of handling these *like* a button, we just switch them to buttons. I'm not sure there's anyway to handle this in bulk, however, so at some level we need a list of items that are relevant.

Explore in 7.0.

PR changes the "Set featured image" control to use role="button", add aria-haspopup, and aria-controls targeting the media modal. Also adds role="button" on the remove featured image.

Adds handlers to trigger on space/enter.

This doesn't change the control to an actual button to avoid interfering with styling, though that could be done, as well.

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

## Use of AI Tools

None

[joedolson]

Testing instructions:

1) Install the classic editor plugin.
2) Navigate to the 'Set Featured Image' metabox.
3) Select the control using the keyboard. (Tab key)

Before patch:

• The link will only trigger on Enter, not on space.
• Screen readers report the control as a link, with no additional information.

After patch:

• The link will trigger on either Enter or using the spacebar.
• If using the spacebar, you can depress the spacebar, hit tab, and release the spacebar and the control will not be triggered.
• The link will be reported to screen readers as a button that has a popup of type "dialog".

[huzaifaalmesbah]

Patch Testing Report

Patch Tested: ​https://github.com/WordPress/wordpress-develop/pull/10885

Environment

• WordPress: 7.0-alpha-61215-src
• PHP: 8.2.x
• Browser: Chrome (macOS)
• OS: macOS
• Theme: Twenty Twenty-Five
• Plugins:
  • Classic Editor

Steps Taken

1. Installed and activated the Classic Editor plugin.
2. Navigated to Posts → Add New.
3. Located the "Set Featured Image" metabox.
4. Used the Tab key to focus the "Set featured image" control.
5. Tested activation using:
   • Enter key
   • Spacebar
6. Repeated testing before and after applying the patch.
7. Verified screen reader output for role and dialog announcement.
8. Repeated tests for "Remove featured image" after setting an image.
9. ✅ Patch is solving the problem.

Before patch:

• Activates only when pressing Enter.
• Spacebar does not trigger the control.
• No indication that activating the control opens a dialog.

After patch:

• Control is announced as a "button".
• Screen readers report it as having a popup of type "dialog".
• Both Enter and Spacebar trigger the media modal.
• Holding Spacebar, pressing Tab, and releasing Spacebar does NOT trigger the control (correct key handling).
• "Remove featured image" control behaves consistently.
• Behavior matches expected results.

Screenshots / Screencast

Before: ​https://files.catbox.moe/jluavh.mp4

After: ​https://files.catbox.moe/442b4k.mp4

[joedolson]

In 61616:

Editor: A11y: Fix featured image control naming.

The controls to set and remove a featured image in the Classic Editor use a link with no attributes to identify purpose. Triggering a modal dialog should be done using a button with proper identification.

Add role="button", aria-haspopup="dialog", and aria-controls attributes to give users appropriate information about the control behavior. Add keypress handlers for button-specific keyboard events.

Does not use a button element to avoid interfering with style customizations.

Props alh0319, joedolson, mukesh27, huzaifaalmesbah.
Fixes #63980.