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() { + +