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. git-svn-id: https://develop.svn.wordpress.org/trunk@59225 602fd350-edb4-49c9-b593-d223f7449a82
WordPress · Oct 13, 2024 · b5cc572 · pedro-mendonca · Oct 25, 2024 · b5cc572
1 parent ded6cc7
commit b5cc572
Show file tree

Hide file tree

Showing 3 changed files with 49 additions and 10 deletions.
diff --git 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
@@ -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
@@ -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>