Changeset 59225 for trunk/src/wp-admin/includes/revision.php

Timestamp:

10/13/2024 08:47:12 PM (7 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.

File:

• trunk/src/wp-admin/includes/revision.php (modified) (3 diffs)

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 }}}
         <# }); #>