Changeset 46363 for trunk/src/wp-includes/media-template.php

Timestamp:

09/30/2019 07:36:42 PM (7 years ago)

Author:

afercia

Message:

Accessibility: Media: Use the ARIA tabs pattern for the media modal menus.

The ARIA tabs pattern improves interaction for keyboard and assistive technologies users.
It gives the menu items proper roles, and aria-selected allows users of assistive technologies to know which tab is currently selected.

Props audrasjb, afercia, joedolson, karmatosed, melchoyce.
See #47149.

File:

• trunk/src/wp-includes/media-template.php (modified) (1 diff)

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

@@ -179 +179 @@
     <script type="text/html" id="tmpl-media-frame">
         <div class="media-frame-title" id="media-frame-title"></div>
+        <button type="button" class="button button-link media-frame-menu-toggle" aria-expanded="false">
+            <?php _e( 'Media Types' ); ?>
+            <span class="dashicons dashicons-arrow-down" aria-hidden="true"></span>
+        </button>
         <div class="media-frame-menu"></div>
-        <div class="media-frame-router"></div>
-        <div class="media-frame-content"></div>
+        <div class="media-frame-tab-panel">
+            <div class="media-frame-router"></div>
+            <div class="media-frame-content"></div>
+        </div>
         <div class="media-frame-toolbar"></div>
         <div class="media-frame-uploader"></div>