mirror of
https://github.com/WordPress/WordPress.git
synced 2024-12-22 09:07:59 +01:00
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
parent
f7fb13a3c4
commit
0c88366123
@ -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
2
wp-admin/css/revisions-rtl.min.css
vendored
File diff suppressed because one or more lines are too long
@ -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
2
wp-admin/css/revisions.min.css
vendored
File diff suppressed because one or more lines are too long
@ -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>
|
||||
|
||||
@ -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
2
wp-admin/js/revisions.min.js
vendored
File diff suppressed because one or more lines are too long
@ -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.
|
||||
|
||||
Loading…
Reference in New Issue
Block a user