Changeset 33483

Timestamp:

07/29/2015 09:49:55 AM (10 years ago)

Author:

ocean90

Message:

Customizer: Add an aria-expanded attribute to Edit menu item toggles.

props afercia.
fixes #33129.

Location:

trunk/src

Files:

• wp-admin/css/customize-nav-menus.css (modified) (3 diffs)
• wp-admin/js/customize-nav-menus.js (modified) (2 diffs)
• wp-includes/class-wp-customize-control.php (modified) (1 diff)

trunk/src/wp-admin/css/customize-nav-menus.css

@@ -215 +215 @@
     height: 38px;
     margin-right: 0 !important;
-    text-indent: 100%;
     outline: none;
     overflow: hidden;
-    white-space: nowrap;
     cursor: pointer;
 }
@@ -228 +226 @@
 }
 
-/* Duplicates `.nav-menus-php .item-edit:before {}` in common.css:2220. */
-.wp-customizer .menu-item .item-edit:before {
-    top: -1px;
-    right: 0;
+/* rework the arrow indicator implementation for NVDA bug same as #32715 */
+.wp-customizer .menu-item .item-edit .toggle-indicator {
+    display: inline-block;
+    font-size: 20px;
+    line-height: 1;
+}
+
+.wp-customizer .menu-item .item-edit .toggle-indicator:after {
     content: '\f140';
-    border: none;
-    background: none;
     font: normal 20px/1 dashicons;
+    color: #a0a5aa;
+    vertical-align: top;
     speak: none;
-    display: block;
-    padding: 0;
-    text-indent: 0;
-    text-align: center;
-    position: relative;
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
@@ -247 +244 @@
 }
 
-.wp-customizer .menu-item.menu-item-edit-active .item-edit:before {
-    content: '\f142';
-}
-
-.wp-customizer .menu-item .item-edit:before {
-    line-height: 2;
-}
-
-/* Duplicates `.nav-menus-php .menu-item-edit-active .item-edit:before {}` in common.css:2271. */
-.wp-customizer .menu-item .menu-item-edit-active .item-edit:before {
+.wp-customizer .menu-item.menu-item-edit-active .item-edit .toggle-indicator:after {
     content: '\f142';
 }

trunk/src/wp-admin/js/customize-nav-menus.js

@@ -1365 +1365 @@
                 };
 
+                $menuitem.find( '.item-edit' ).attr( 'aria-expanded', 'true' );
                 $inside.slideDown( 'fast', complete );
 
@@ -1378 +1379 @@
                 self.container.trigger( 'collapse' );
 
+                $menuitem.find( '.item-edit' ).attr( 'aria-expanded', 'false' );
                 $inside.slideUp( 'fast', complete );
             }

trunk/src/wp-includes/class-wp-customize-control.php

@@ -1686 +1686 @@
                 </span>
                 <span class="item-controls">
-                    <button type="button" class="not-a-button item-edit"><span class="screen-reader-text"><?php
+                    <button type="button" class="not-a-button item-edit" aria-expanded="false"><span class="screen-reader-text"><?php
                         /* translators: 1: Title of a menu item, 2: Type of a menu item */
                         printf( __( 'Edit menu item: %1$s (%2$s)' ), '{{ data.title || wp.customize.Menus.data.l10n.untitled }}', '{{ data.item_type_label }}' );
-                    ?></span></button>
+                    ?></span><span class="toggle-indicator" aria-hidden="true"></span></button>
                     <button type="button" class="not-a-button item-delete submitdelete deletion"><span class="screen-reader-text"><?php
                         /* translators: 1: Title of a menu item, 2: Type of a menu item */