Comment reply admin notices not announced by screen readers

[joedolson]

The comment reply admin notice does not get announced by screen readers when notice content is injected into the admin notice container. This can either be resolved by role="alert" or wp.a11y.speak().

[joedolson]

Patch using role="alert"

[joedolson]

Patch using wp.a11y.speak

[joedolson]

There's no functional difference between the two patches, just a choice to make.

[peterwilsoncc]

@joedolson Either version looks like an improvement, I'm happy with either approach. Is there a best practice favouring one over the other?

[joedolson]

Nobody else seems to have a preference; so I'm going to go with role="alert". The argument, in my opinion, is that it keeps the behavior associated directly with the call that sets up the HTML, but I don't really think it matters overall.

To test:

Using a screen reader, go to Comments. Click 'Reply' on a comment. Click the 'Reply' button primary to submit a blank comment. This will spawn an admin notice error.

Before patch: No announcement from the screen reader.
After patch: The error is announced by the screen reader.

[peterwilsoncc]

I tested each of the patches and could only get the one using JavaScript to announce the error when using VoiceOver on macOS.

It's possible that's due to a configuration error in my settings as I don't know the settings very well.

[joedolson]

It could also be a distinction between VoiceOver and other, more standards compliant screen readers. But, it's no problem to just choose the JS driven announcement in order to get better support with VoiceOver.

• Uses wp.speak to announce an error when replying to comments within the dashboard
• Adds wp-a11y as a dependency to the JavaScript

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

[peterwilsoncc]

Replying to joedolson:

It could also be a distinction between VoiceOver and other, more standards compliant screen readers. But, it's no problem to just choose the JS driven announcement in order to get better support with VoiceOver.

OK, let's do that.

In the ​linked pull request I've added wp-a11y as a dependency to the script and included the code in 61480.speak.diff​.

[peterwilsoncc]

Testing notes using Joe's patch with the inclusion of the enqueue dependency.

Test Report

This report validates that the indicated patch addresses the issue.

Patch tested: ​https://github.com/WordPress/wordpress-develop/pull/7218

Environment

• OS: macOS 14.6.1
• Web Server: Nginx
• PHP: 8.1.29
• WordPress: 6.7-alpha @ r58919
• Browser: Firefox 129.0.1
• Theme: Twenty Twenty-Four
• Active Plugins:
  • Query Monitor 3.16.4

Actual Results

• ✅ Issue resolved with patch.

Testing Notes

1. Checkout trunk without patch
2. Run npm run build:dev
3. Enable Voice over in System settings
4. Open WP Dashboard Comments screen
5. Hover over test comment
6. Click reply link
7. Submit empty reply
8. ❌ Error announced
9. Apply patch
10. Run npm run build:dev
11. Open WP Dashboard Comments screen
12. Hover over test comment
13. Click reply link
14. Submit empty reply
15. ✅ Error announced.

[peterwilsoncc]

In 58931:

Comments: Announce reply notices to screen reader users.

Improve experience for screen reader users by calling wp.a11y.speak() with the results of comment reply submissions within the WordPress dashboard.

Props joedolson, khokansardar.
Fixes #61480.

Merged r58931 / ​https://github.com/WordPress/wordpress-develop/commit/0687800e091d6e0c34a9e3d44d649814cec05385