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.

git-svn-id: https://develop.svn.wordpress.org/trunk@59988 602fd350-edb4-49c9-b593-d223f7449a82
This commit is contained in:
Joe Dolson 2025-03-16 19:38:42 +00:00
parent fc0531c4d5
commit d07d4fce8c
3 changed files with 36 additions and 18 deletions

View File

@ -419,12 +419,18 @@ window.columns = {
*/
saveManageColumnsState : function() {
var hidden = this.hidden();
$.post(ajaxurl, {
action: 'hidden-columns',
hidden: hidden,
screenoptionnonce: $('#screenoptionnonce').val(),
page: pagenow
});
$.post(
ajaxurl,
{
action: 'hidden-columns',
hidden: hidden,
screenoptionnonce: $('#screenoptionnonce').val(),
page: pagenow
},
function() {
wp.a11y.speak( __( 'Screen Options updated.' ) );
}
);
},
/**

View File

@ -461,13 +461,19 @@
closed = $( '.postbox' ).filter( '.closed' ).map( function() { return this.id; } ).get().join( ',' );
hidden = $( '.postbox' ).filter( ':hidden' ).map( function() { return this.id; } ).get().join( ',' );
$.post(ajaxurl, {
action: 'closed-postboxes',
closed: closed,
hidden: hidden,
closedpostboxesnonce: jQuery('#closedpostboxesnonce').val(),
page: page
});
$.post(
ajaxurl,
{
action: 'closed-postboxes',
closed: closed,
hidden: hidden,
closedpostboxesnonce: jQuery('#closedpostboxesnonce').val(),
page: page
},
function() {
wp.a11y.speak( __( 'Screen Options updated.' ) );
}
);
},
/**

View File

@ -27,11 +27,17 @@ jQuery( function($) {
* @return {void}
*/
updateWelcomePanel = function( visible ) {
$.post( ajaxurl, {
action: 'update-welcome-panel',
visible: visible,
welcomepanelnonce: $( '#welcomepanelnonce' ).val()
});
$.post(
ajaxurl,
{
action: 'update-welcome-panel',
visible: visible,
welcomepanelnonce: $( '#welcomepanelnonce' ).val()
},
function() {
wp.a11y.speak( wp.i18n.__( 'Screen Options updated.' ) );
}
);
};
// Unhide the welcome panel if the Welcome Option checkbox is checked.