WordPress-C
/
WordPress
mirror of https://github.com/WordPress/WordPress.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Revisions: Improve accessibility of revisions selection. 

Add `aria-labelledby` and `aria-describedby` attributes to revision slider selection handle. Add keyboard `:focus` state to revision slider  handle. Move 'multiple revision' checkbox before the buttons panel, matching its visual order. Change diff `Title` and `Content` headings from `h3` to `h2` to correct headings hierarchy.

Props joedolson, rishishah, sarahricker, williamalexander, afercia. 
Fixes #52303.
Built from https://develop.svn.wordpress.org/trunk@59225


git-svn-id: http://core.svn.wordpress.org/trunk@58617 1a063a9b-81f0-0310-95a4-ce76da25c4cd
This commit is contained in:
joedolson 2024-10-13 20:49:13 +00:00
parent f7fb13a3c4
commit 0c88366123
8 changed files with 63 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
wp-admin/css/revisions-rtl.css
View File

@ -459,8 +459,7 @@ div.revisions-controls > .wp-slider > .ui-slider-handle {
touch-action: none;
}
.wp-slider .ui-slider-handle,
.wp-slider .ui-slider-handle.focus {
.wp-slider .ui-slider-handle {
background: #f6f7f7;
border: 1px solid #c3c4c7;
box-shadow: 0 1px 0 #c3c4c7;
@ -480,6 +479,15 @@ div.revisions-controls > .wp-slider > .ui-slider-handle {
transform: translateY(1px);
}
.wp-slider .ui-slider-handle:focus,
.wp-slider .ui-slider-handle.ui-state-focus {
background: #f0f0f1;
border-color: #8c8f94;
box-shadow: 0 0 0 2px #2271b1;
/* Only visible in Windows High Contrast mode */
outline: 2px solid transparent;
}
.wp-slider .ui-slider-handle:before {
background: none;
position: absolute;

2
wp-admin/css/revisions-rtl.min.css vendored
View File

File diff suppressed because one or more lines are too long

12
wp-admin/css/revisions.css
View File

@ -458,8 +458,7 @@ div.revisions-controls > .wp-slider > .ui-slider-handle {
touch-action: none;
}
.wp-slider .ui-slider-handle,
.wp-slider .ui-slider-handle.focus {
.wp-slider .ui-slider-handle {
background: #f6f7f7;
border: 1px solid #c3c4c7;
box-shadow: 0 1px 0 #c3c4c7;
@ -479,6 +478,15 @@ div.revisions-controls > .wp-slider > .ui-slider-handle {
transform: translateY(1px);
}
.wp-slider .ui-slider-handle:focus,
.wp-slider .ui-slider-handle.ui-state-focus {
background: #f0f0f1;
border-color: #8c8f94;
box-shadow: 0 0 0 2px #2271b1;
/* Only visible in Windows High Contrast mode */
outline: 2px solid transparent;
}
.wp-slider .ui-slider-handle:before {
background: none;
position: absolute;

2
wp-admin/css/revisions.min.css vendored
View File

File diff suppressed because one or more lines are too long

13
wp-admin/includes/revision.php
View File

@ -378,6 +378,11 @@ function wp_print_revision_templates() {
</div>
</script>
<script id="tmpl-revisions-slider-hidden-help" type="text/html">
<h2 class="screen-reader-text"><?php esc_html_e( 'Select a revision' ); ?></h2>
<p id="revisions-slider-hidden-help" hidden><?php esc_html_e( 'Change revision by using the left and arrow keys' ); ?></p>
</script>
<script id="tmpl-revisions-checkbox" type="text/html">
<div class="revision-toggle-compare-mode">
<label>
@ -397,13 +402,13 @@ function wp_print_revision_templates() {
<# if ( ! _.isUndefined( data.attributes ) ) { #>
<div class="diff-title">
<# if ( 'from' === data.type ) { #>
<strong><?php _ex( 'From:', 'Followed by post revision info' ); ?></strong>
<strong id="diff-title-from"><?php _ex( 'From:', 'Followed by post revision info' ); ?></strong>
<# } else if ( 'to' === data.type ) { #>
<strong><?php _ex( 'To:', 'Followed by post revision info' ); ?></strong>
<strong id="diff-title-to"><?php _ex( 'To:', 'Followed by post revision info' ); ?></strong>
<# } #>
<div class="author-card<# if ( data.attributes.autosave ) { #> autosave<# } #>">
{{{ data.attributes.author.avatar }}}
<div class="author-info">
<div class="author-info" id="diff-title-author">
<# if ( data.attributes.autosave ) { #>
<span class="byline">
<?php
@ -464,7 +469,7 @@ function wp_print_revision_templates() {
<div class="diff-error"><?php _e( 'Sorry, something went wrong. The requested comparison could not be loaded.' ); ?></div>
<div class="diff">
<# _.each( data.fields, function( field ) { #>
<h3>{{ field.name }}</h3>
<h2>{{ field.name }}</h2>
{{{ field.diff }}}
<# }); #>
</div>

34
wp-admin/js/revisions.js
View File

@ -595,13 +595,13 @@ window.wp = window.wp || {};
initialize: function() {
_.bindAll( this, 'setWidth' );
// Add the button view.
this.views.add( new revisions.view.Buttons({
// Add the checkbox view.
this.views.add( new revisions.view.Checkbox({
model: this.model
}) );
// Add the checkbox view.
this.views.add( new revisions.view.Checkbox({
// Add the button view.
this.views.add( new revisions.view.Buttons({
model: this.model
}) );
@ -628,6 +628,9 @@ window.wp = window.wp || {};
model: tooltip
}) );
// Add the visually hidden slider help view.
this.views.add( new revisions.view.SliderHelp() );
// Add the slider view.
this.views.add( new revisions.view.Slider({
model: slider
@ -804,6 +807,12 @@ window.wp = window.wp || {};
}
});
// The slider visually hidden help view.
revisions.view.SliderHelp = wp.Backbone.View.extend({
className: 'revisions-slider-hidden-help',
template: wp.template( 'revisions-slider-hidden-help' )
});
// The tooltip view.
// Encapsulates the tooltip.
revisions.view.Tooltip = wp.Backbone.View.extend({
@ -957,6 +966,20 @@ window.wp = window.wp || {};
this.applySliderSettings();
},
accessibilityHelper: function() {
var handles = $( '.ui-slider-handle' );
handles.first().attr( {
role: 'button',
'aria-labelledby': 'diff-title-from diff-title-author',
'aria-describedby': 'revisions-slider-hidden-help',
} );
handles.last().attr( {
role: 'button',
'aria-labelledby': 'diff-title-to diff-title-author',
'aria-describedby': 'revisions-slider-hidden-help',
} );
},
mouseMove: function( e ) {
var zoneCount = this.model.revisions.length - 1, // One fewer zone than models.
sliderFrom = this.$el.allOffsets()[this.direction], // "From" edge of slider.
@ -996,9 +1019,12 @@ window.wp = window.wp || {};
handles.last()
.toggleClass( 'from-handle', !! isRtl )
.toggleClass( 'to-handle', ! isRtl );
this.accessibilityHelper();
} else {
handles.removeClass('from-handle to-handle');
this.accessibilityHelper();
}
},
start: function( event, ui ) {

2
wp-admin/js/revisions.min.js vendored
View File

File diff suppressed because one or more lines are too long

2
wp-includes/version.php
View File

@ -16,7 +16,7 @@
*
* @global string $wp_version
*/
$wp_version = '6.7-beta2-59224';
$wp_version = '6.7-beta2-59225';
/**
* Holds the WordPress DB revision, increments when changes are made to the WordPress DB schema.