diff -r 48c4eec2b7e6 -r 8c2e4d02f4ef wp/wp-admin/js/revisions.js --- a/wp/wp-admin/js/revisions.js Fri Sep 05 18:40:08 2025 +0200 +++ b/wp/wp-admin/js/revisions.js Fri Sep 05 18:52:52 2025 +0200 @@ -595,13 +595,13 @@ 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 @@ 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 @@ } }); + // 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 @@ 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 @@ 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 ) {