sergiotarxz/Wordpress
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

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

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

Props mayanksonawat, afercia.
Merges [46746] to the 5.3 branch.
Fixes #48271.

git-svn-id: https://develop.svn.wordpress.org/branches/5.3@46777 602fd350-edb4-49c9-b593-d223f7449a82
This commit is contained in:
Sergey Biryukov 2019-11-25 10:21:25 +00:00
parent 544663c065
commit 68a98448e9
2 changed files with 7 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
src/wp-admin/includes/class-wp-list-table.php
View File

@ -631,12 +631,15 @@ class WP_List_Table {
<div class="view-switch">
<?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 ),
$title

2
src/wp-includes/media-template.php
View File

@ -318,7 +318,7 @@ function wp_print_media_templates() {
<a href="<?php echo esc_url( add_query_arg( 'mode', 'list', $_SERVER['REQUEST_URI'] ) ); ?>" class="view-list">
<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>
</script>