Changeset 44426 for branches/5.0/src/wp-content/themes/twentynineteen/sass/navigation/_menu-main-navigation.scss

Timestamp:

01/07/2019 03:59:04 PM (3 years ago)

Author:

SergeyBiryukov

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.
Merges [44376] to the 5.0 branch.
Fixes #45713.

Location:

branches/5.0

Files:

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

branches/5.0/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);
+        }
     }
 
@@ -183 +216 @@
             }
 
+            > .menu-item-link-return {
+                width: 100%;
+                font-size: $font__size_base;
+                font-weight: normal;
+                text-align: left;
+            }
+
             > a:empty {
                 display: none;