Changeset 59225

Timestamp:

10/13/2024 08:47:12 PM (2 months ago)

Author:

joedolson

Message:

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.

Location:

trunk/src

Files:

• js/_enqueues/wp/revisions.js (modified) (5 diffs)
• wp-admin/css/revisions.css (modified) (2 diffs)
• wp-admin/includes/revision.php (modified) (3 diffs)

trunk/src/js/_enqueues/wp/revisions.js

@@ -596 +596 @@
             _.bindAll( this, 'setWidth' );
 
+            // Add the checkbox view.
+            this.views.add( new revisions.view.Checkbox({
+                model: this.model
+            }) );
+
             // Add the button view.
             this.views.add( new revisions.view.Buttons({
-                model: this.model
-            }) );
-
-            // Add the checkbox view.
-            this.views.add( new revisions.view.Checkbox({
                 model: this.model
             }) );
@@ -628 +628 @@
                 model: tooltip
             }) );
+
+            // Add the visually hidden slider help view.
+            this.views.add( new revisions.view.SliderHelp() );
 
             // Add the slider view.
@@ -805 +808 @@
     });
 
+    // 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.
@@ -958 +967 @@
         },
 
+        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.
@@ -997 +1020 @@
                     .toggleClass( 'from-handle', !! isRtl )
                     .toggleClass( 'to-handle', ! isRtl );
+                this.accessibilityHelper();
             } else {
                 handles.removeClass('from-handle to-handle');
-            }
+                this.accessibilityHelper();
+            }
+
         },
 

trunk/src/wp-admin/css/revisions.css

@@ -459 +459 @@
 }
 
-.wp-slider .ui-slider-handle,
-.wp-slider .ui-slider-handle.focus {
+.wp-slider .ui-slider-handle {
     background: #f6f7f7;
     border: 1px solid #c3c4c7;
@@ -478 +477 @@
     box-shadow: inset 0 2px 5px -3px rgba(0, 0, 0, 0.5);
     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;
 }
 

trunk/src/wp-admin/includes/revision.php

@@ -379 +379 @@
     </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">
@@ -398 +403 @@
             <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">
@@ -465 +470 @@
         <div class="diff">
         <# _.each( data.fields, function( field ) { #>
-            <h3>{{ field.name }}</h3>
+            <h2>{{ field.name }}</h2>
             {{{ field.diff }}}
         <# }); #>