Changeset 44376 for trunk/src/wp-content/themes/twentynineteen/sass/navigation/_menu-main-navigation.scss

Timestamp:

12/31/2018 05:48:08 PM (8 years ago)

Author:

laurelfulford

Message:

Twenty Nineteen: Improve menu semantics and keyboard navigation.

The menu's original markup included some non-semantic tags and an unnecessary tabindex attribute that made it difficult to navigate via keyboard.

Props allancole, anevins, kjellr.
Fixes #45713.

File:

• trunk/src/wp-content/themes/twentynineteen/sass/navigation/_menu-main-navigation.scss (modified) (2 diffs)

trunk/src/wp-content/themes/twentynineteen/sass/navigation/_menu-main-navigation.scss

@@ -12 +12 @@
         > div {
                 display: inline;
+        }
+
+        /* Un-style buttons */
+        button {
+                display: inline-block;
+                border: none;
+                padding: 0;
+                margin: 0;
+                font-family: $font__heading;
+                font-weight: 700;
+                line-height: $font__line-height-heading;
+                text-decoration: none;
+                background: transparent;
+                color: inherit;
+                cursor: pointer;
+                transition: background 250ms ease-in-out,
+                            transform 150ms ease;
+                -webkit-appearance: none;
+                -moz-appearance: none;
+
+                &:hover,
+                &:focus {
+                        background: transparent;
+                }
+
+                &:focus {
+                        outline: 1px solid transparent;
+                        outline-offset: -4px;
+                }
+
+                &:active {
+                        transform: scale(0.99);
+                }
         }
 
@@ -184 +217 @@
                         }
 
+                        > .menu-item-link-return {
+                                width: 100%;
+                                font-size: $font__size_base;
+                                font-weight: normal;
+                                text-align: left;
+                        }
+
                         > a:empty {
                                 display: none;