wp/wp-admin/js/revisions.js
changeset 22 8c2e4d02f4ef
parent 16 a86126ab1dd4
--- 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 ) {