Add screen reader announcements confirming saved changes in screen options

[kkmuffme]

• ​Screen options
• ​inline comment reply-to form

open /wp-admin/

Both of those forms do not have a "submit" but all forms must have a submit for accessibility reasons ​https://www.w3.org/WAI/WCAG22/Techniques/html/H32

Since the submit button is displayed conditionally, it might make sense to only load it as form conditionally too? (e.g. as div if we do not have anything submittable)

[rinkalpagdar]

Hello @kkmuffme
Can you please provide more details or screenshot? So it will be helpful to reproduce the exact issue.
Thanks!

[joedolson]

The purpose of a submit button in a form is to request a change of context, and it is certainly valuable there. In the screen options interface, the behavior is immediate when selecting which features are shown on the page, and doesn't generate a change of context. However, this form also doesn't inform the user audibly that the update has taken place, so there's very low confidence in what has happened.

Practically speaking, I'm not sure it would be a benefit to add the submit button when the only fields are the metabox selectors or list table selectors; but we should definitely add a wp.a11y.speak() announcement to confirm that the change has happened.

Regarding the inline comment reply form, I don't see any case where that appears without a submit button, so I'm not sure what you're referring to.

I'm milestoning this for 6.8, but only to add a speak() announcement to the Options checkboxes; I don't think that a submit button would be beneficial here.

### Description
This pull request introduces speak announcements to provide audible confirmation for changes made to checkbox actions within the Screen Options panel.

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

[yogeshbhutkar]

In response to the recent feedback provided by @joedolson, the speak announcements have been appropriately implemented in the submitted pull request.

Thank you @joedolson for your input.

[kkmuffme]

Thanks!
That doesn't fix the issue of validity - if we don't have a submit (e.g. bc it's all JS), then this shouldn't be a <form> but a <div>

Hi @yogeshbhutkar and thanks for the PR.
I tested you changeset on Playground using the ​provided link and I wasn't able to show any a11y.speak message when toggling the Welcome Panel for example.

Hi @audrasjb, I tried testing the Playground link and looks like it's working fine for me. I believe in order to test these, we need to enable the voice over setting from accessibility settings.

​https://github.com/user-attachments/assets/15da589f-57ff-4088-8b4f-a8a29f4b487e

Hi @audrasjb, circling back to check if you were able to reproduce the speak events.

I believe in order to test these, we need to enable the voice over setting from accessibility settings.

Yeah I know, but when looking at the DOM (via the inspector) on Playground, I can't see any change in the a11y.speak elements. I'll give it a new test later today :)

[krupajnanda]

This ticket was discussed during the Test team bug scrub, and we found that it needs more testing to perform.

[codersaiful]

I see the #PR, but I'm unable to reproduce the scenario. Could you provide more details along with a screenshot?

[yogeshbhutkar]

This PR adds wp.a11y.speak() announcement to confirm the changes that happen after interacting with the checkboxes present under the Screen Elements within the Dashboard and Posts pages.

To hear the speak events, you'll however need to enable voice over settings from accessibility.

I've attached a screencast demonstrating the working of the PR here: ​https://github.com/WordPress/wordpress-develop/pull/7944#issuecomment-2609525196

Notice the presence of events stating The checkbox Quick Drafts has been unchecked. when you either check or uncheck the checkbox.

In general, this is how the speak events would be produced: ​https://www.youtube.com/watch?v=qQI6HqU-zSA&t=20s&ab_channel=SamifromFoxland

[joedolson]

Thanks for your PR, @yogeshbhutkar! I've left comments in the PR requesting changes.

Thanks for the review, @joedolson!

I've implemented your suggestions, updated the speak message to a more generalized version, and streamlined the changeset for clarity.

I tested this ticket in WordPress Playground ​here

When I click the checkbox and uncheck it, it displays 'Screen Options Saved.' 3 times.

I checked Settings > General, and the 'Accessibility' option is missing.

Note: Attached file with sound.
​https://github.com/user-attachments/assets/3c7cff20-a935-4820-822e-1b230bf4f3bb

[sourabhjain]

I tested this ticket in WordPress Playground here: ​https://playground.wordpress.net/?core-pr=7944#%7B%22$schema%22:%22https://playground.wordpress.net/blueprint-schema.json%22,%22landingPage%22:%22/wp-admin%22,%22login%22:true,%22preferredVersions%22:%7B%22php%22:%227.4%22%7D,%22features%22:%7B%22networking%22:true%7D%7D.

When I click the checkbox and uncheck it, it displays 'Screen Options Saved.' 3 times.

I checked Settings > General, and the 'Accessibility' option is missing.

Updated the Video here :​https://github.com/WordPress/wordpress-develop/pull/7944#issuecomment-2673769335

Thanks for the test report.

Also, Instead of say "checkbox" it sound and displays as unticked, Categories, Tick box.

This is the default and intended behavior. However, speaking the Save event thrice is not. I'm not sure what's going wrong in the playground environment, but when I test it on localhost, it produces just a single speak event.

According to my testing in the playground, sometimes I found it to produce four/five speak events as well. Maybe it has to do with how Ajax requests are handled on the playground(?). I can't replicate the same on my local environment for me to debug, locally, it just produces a single speak event.

@joedolson can you provide your insights on this?

I tried testing the following code from Trunk, it follows a similar structure as introduced in this PR:
​https://github.com/WordPress/wordpress-develop/blob/d5d7d6ee801e6b8474185224e4b8cc7848bf62e6/src/js/_enqueues/admin/post.js#L1047

In Playground, I noticed that the speak events are triggered at least three times. However, this isn’t specific to this PR—it also occurs with other speak events, as shown in the following video. Since the events are correctly triggered just once outside the Playground environment, I believe this can be safely ignored for now.

Ref.
​https://github.com/user-attachments/assets/0ec79f42-fd35-4794-9ac6-fe0dfb62f953

[manojmaharrshi]

Tested the patch on the playground at : ​https://playground.wordpress.net/?core-pr=7944#%7B%22$schema%22:%22https://playground.wordpress.net/blueprint-schema.json%22,%22landingPage%22:%22/wp-admin%22,%22login%22:true,%22preferredVersions%22:%7B%22php%22:%227.4%22%7D,%22features%22:%7B%22networking%22:true%7D%7D and could see that "screen Option Saved" is announced three times, while on the local only one time announcement is made.

[joedolson]

Tested. As far as I can tell, the repeated announcement is unique to Playground, and not relevant to this specific patch; I think the assumption that this is related to how Playground works is probably accurate.

Tests effectively, so I think it's good to go. It's a little confusing that some screen options auto save and others don't; but the fact that this difference is now reported to screen reader users should be helpful.

[joedolson]

Note to respond to the comments from @kkmuffme about this not solving a validation problem due to the missing submit. The HTML specifications do not require a submit button inside a form; and it would get quite complicated to conditionally wrap this content in a form depending on whether or not a submit type was present, given that the contents are filterable. If you have more specific thoughts about why some cases should not be a form, I suggest opening a separate ticket for that issue.

[joedolson]

In 59988:

A11y: Add spoken notice when screen options are saved on change.

When some screen option input fields are changed (post table columns, welcome panel, and metabox visibility), the change is saved to options. Other screen options (e.g. number of items per page) are only saved on submit. The changes that are saved immediately are visibly changed for sighted readers immediately. Change adds a wp.a11y.speak() call to inform screen readers that a value change has updated screen options.

Props kkmuffme, joedolson, yogeshbhutkar, audrasjb, sourabhjain.
Fixes #62550.