Changeset 46746

Timestamp:

11/18/2019 04:49:42 PM (7 years ago)

Author:

afercia

Message:

Accessibility: Add an aria-current attribute to the Media Library switch links.

The aria-current attribute is a simple, effective, way to help assistive technology users orientate themselves within a set of items.

Props mayanksonawat, afercia.
Fixes #48271.

Location:

trunk/src

Files:

• wp-admin/includes/class-wp-list-table.php (modified) (1 diff)
• wp-includes/media-template.php (modified) (1 diff)

trunk/src/wp-admin/includes/class-wp-list-table.php

@@ -632 +632 @@
                 <?php
                 foreach ( $this->modes as $mode => $title ) {
-                        $classes = array( 'view-' . $mode );
+                        $classes      = array( 'view-' . $mode );
+                        $aria_current = '';
+
                         if ( $current_mode === $mode ) {
-                                $classes[] = 'current';
+                                $classes[]    = 'current';
+                                $aria_current = ' aria-current="page"';
                         }
                         printf(
-                                "<a href='%s' class='%s' id='view-switch-$mode'><span class='screen-reader-text'>%s</span></a>\n",
+                                "<a href='%s' class='%s' id='view-switch-$mode'$aria_current><span class='screen-reader-text'>%s</span></a>\n",
                                 esc_url( add_query_arg( 'mode', $mode ) ),
                                 implode( ' ', $classes ),

trunk/src/wp-includes/media-template.php

@@ -319 +319 @@
                         <span class="screen-reader-text"><?php _e( 'List View' ); ?></span>
                 </a>
-                <a href="<?php echo esc_url( add_query_arg( 'mode', 'grid', $_SERVER['REQUEST_URI'] ) ); ?>" class="view-grid current">
+                <a href="<?php echo esc_url( add_query_arg( 'mode', 'grid', $_SERVER['REQUEST_URI'] ) ); ?>" class="view-grid current" aria-current="page">
                         <span class="screen-reader-text"><?php _e( 'Grid View' ); ?></span>
                 </a>