Themes: Fix accessibility issues with controls in themes screen.

Add accessible names to several theme controls so provide better context for screen reader users. Change theme details element into a button that can receive focus. Ensure focus is set back on existing theme when theme details modal is closed.

props alexstine, poena.
Fixes #52649.

git-svn-id: https://develop.svn.wordpress.org/trunk@51083 602fd350-edb4-49c9-b593-d223f7449a82
This commit is contained in:
Joe Dolson
2021-06-07 23:09:56 +00:00
parent 6213114f49
commit e31b25ed4d
3 changed files with 56 additions and 28 deletions
+3 -7
View File
@@ -404,11 +404,7 @@ themes.view.Theme = wp.Backbone.View.extend({
var data = this.model.toJSON();
// Render themes using the html template.
this.$el.html( this.html( data ) ).attr({
tabindex: 0,
'aria-describedby' : data.id + '-action ' + data.id + '-name',
'data-slug': data.id
});
this.$el.html( this.html( data ) ).attr( 'data-slug', data.id );
// Renders active theme styles.
this.activeTheme();
@@ -764,7 +760,7 @@ themes.view.Details = wp.Backbone.View.extend({
// Return focus to the theme div.
if ( themes.focusedTheme ) {
themes.focusedTheme.trigger( 'focus' );
themes.focusedTheme.find('.more-details').trigger( 'focus' );
}
});
}
@@ -952,7 +948,7 @@ themes.view.Preview = themes.view.Details.extend({
// Return focus to the theme div.
if ( themes.focusedTheme ) {
themes.focusedTheme.trigger( 'focus' );
themes.focusedTheme.find('.more-details').trigger( 'focus' );
}
}).removeClass( 'iframe-ready' );