diff --git a/src/js/_enqueues/wp/revisions.js b/src/js/_enqueues/wp/revisions.js
index 83c2641485208..b0c555e934361 100644
--- a/src/js/_enqueues/wp/revisions.js
+++ b/src/js/_enqueues/wp/revisions.js
@@ -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 ) {
diff --git a/src/wp-admin/css/revisions.css b/src/wp-admin/css/revisions.css
index 46cf263b5e67c..9d3a0b3a91e18 100644
--- a/src/wp-admin/css/revisions.css
+++ b/src/wp-admin/css/revisions.css
@@ -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;
diff --git a/src/wp-admin/includes/revision.php b/src/wp-admin/includes/revision.php
index a0f2c0e875e30..b6b946fd0861a 100644
--- a/src/wp-admin/includes/revision.php
+++ b/src/wp-admin/includes/revision.php
@@ -378,6 +378,11 @@ function wp_print_revision_templates() {
+
+