Fixed search bar stealing tab focus

material/base.html

@@ -46,7 +46,7 @@
       {% endif %}
     {% endblock %}
     {% block styles %}
-      <link rel="stylesheet" href="{{ base_url }}/assets/stylesheets/application.0e9c8aca.css">
+      <link rel="stylesheet" href="{{ base_url }}/assets/stylesheets/application.cab7c440.css">
       {% if palette.primary or palette.accent %}
         <link rel="stylesheet" href="{{ base_url }}/assets/stylesheets/application-palette.792431c1.css">
       {% endif %}
@@ -167,7 +167,7 @@
       {% endblock %}
     </div>
     {% block scripts %}
-      <script src="{{ base_url }}/assets/javascripts/application.206c856d.js"></script>
+      <script src="{{ base_url }}/assets/javascripts/application.a2b571e1.js"></script>
       {% if lang.t("search.language") != "en" %}
         {% set languages = lang.t("search.language").split(",") %}
         {% if languages | length and languages[0] != "" %}

material/partials/search.html

@@ -1,11 +1,13 @@
 {% import "partials/language.html" as lang with context %}
 <div class="md-search" data-md-component="search" role="dialog">
   <label class="md-search__overlay" for="search"></label>
-  <div class="md-search__inner">
+  <div class="md-search__inner" role="search">
     <form class="md-search__form" name="search">
-      <input type="text" class="md-search__input" name="query" required placeholder="{{ lang.t('search.placeholder') }}" autocapitalize="off" autocorrect="off" autocomplete="off" spellcheck="false" data-md-component="query">
+      <input type="text" class="md-search__input" name="query" required placeholder="{{ lang.t('search.placeholder') }}" autocapitalize="off" autocorrect="off" autocomplete="off" spellcheck="false" data-md-component="query" data-md-state="active">
       <label class="md-icon md-search__icon" for="search"></label>
-      <button type="reset" class="md-icon md-search__icon" data-md-component="reset">&#xE5CD;</button>
+      <button type="reset" class="md-icon md-search__icon" data-md-component="reset" tabindex="-1">
+        &#xE5CD;
+      </button>
     </form>
     <div class="md-search__output">
       <div class="md-search__scrollwrap" data-md-scrollfix>

src/assets/javascripts/application.js

@@ -381,8 +381,8 @@ function initialize(config) { // eslint-disable-line func-style
           }
         }
 
-      /* Escape: close search */
-      } else if (ev.keyCode === 27) {
+      /* Escape or Tab: close search */
+      } else if (ev.keyCode === 9 || ev.keyCode === 27) {
         toggle.checked = false
         toggle.dispatchEvent(new CustomEvent("change"))
         query.blur()
@@ -392,10 +392,9 @@ function initialize(config) { // eslint-disable-line func-style
         if (query !== document.activeElement)
           query.focus()
 
-      /* Vertical arrows and tab: select previous or next search result */
-      } else if ([9, 38, 40].indexOf(ev.keyCode) !== -1) {
-        const map = ev.shiftKey ? 38 : 40
-        const key = ev.keyCode === 9 ? map : ev.keyCode
+      /* Vertical arrows: select previous or next search result */
+      } else if ([38, 40].indexOf(ev.keyCode) !== -1) {
+        const key = ev.keyCode
 
         /* Retrieve all results */
         const links = Array.prototype.slice.call(

src/assets/javascripts/components/Material/Search/Result.jsx

@@ -276,7 +276,7 @@ export default class Result {
         const article = (
           <li class="md-search-result__item">
             <a href={doc.location} title={doc.title}
-              class="md-search-result__link">
+              class="md-search-result__link" tabindex="-1">
               <article class="md-search-result__article
                     md-search-result__article--document">
                 <h1 class="md-search-result__title">
@@ -297,7 +297,8 @@ export default class Result {
             const section = this.docs_.get(item.ref)
             article.appendChild(
               <a href={section.location} title={section.title}
-                class="md-search-result__link" data-md-rel="anchor">
+                class="md-search-result__link" data-md-rel="anchor"
+                tabindex="-1">
                 <article class="md-search-result__article">
                   <h1 class="md-search-result__title">
                     {{ __html: section.title.replace(match, highlight) }}
@@ -329,21 +330,27 @@ export default class Result {
       /* Bind click handlers for anchors */
       const anchors = this.list_.querySelectorAll("[data-md-rel=anchor]")
       Array.prototype.forEach.call(anchors, anchor => {
-        anchor.addEventListener("click", ev2 => {
-          const toggle = document.querySelector("[data-md-toggle=search]")
-          if (!(toggle instanceof HTMLInputElement))
-            throw new ReferenceError
-          if (toggle.checked) {
-            toggle.checked = false
-            toggle.dispatchEvent(new CustomEvent("change"))
-          }
+        ["click", "keydown"].forEach(action => {
+          anchor.addEventListener(action, ev2 => {
+            if (action === "keydown" && ev2.keyCode !== 13)
+              return
 
-          /* Hack: prevent default, as the navigation needs to be delayed due
-             to the search body lock on mobile */
-          ev2.preventDefault()
-          setTimeout(() => {
-            document.location.href = anchor.href
-          }, 100)
+            /* Close search */
+            const toggle = document.querySelector("[data-md-toggle=search]")
+            if (!(toggle instanceof HTMLInputElement))
+              throw new ReferenceError
+            if (toggle.checked) {
+              toggle.checked = false
+              toggle.dispatchEvent(new CustomEvent("change"))
+            }
+
+            /* Hack: prevent default, as the navigation needs to be delayed due
+               to the search body lock on mobile */
+            ev2.preventDefault()
+            setTimeout(() => {
+              document.location.href = anchor.href
+            }, 100)
+          })
         })
       })
 

src/assets/stylesheets/base/_reset.scss

@@ -71,12 +71,6 @@ input {
 a {
   color: inherit;
   text-decoration: none;
-
-  // Remove outline on focused or active links
-  &:active,
-  &:hover {
-    outline-width: 0;
-  }
 }
 
 // Normalize font-size in all browsers
@@ -125,7 +119,7 @@ th {
 button {
   padding: 0;
   border: 0;
-  outline: 0;
+  outline-style: none;
   background: transparent;
   font-size: inherit;
 }

src/assets/stylesheets/layout/_clipboard.scss

@@ -50,20 +50,19 @@
     transition:
       color   0.25s,
       opacity 0.25s;
-    color: $md-color-black--light;
+    color: $md-color-black--lightest;
     content: "\E14D"; // content_copy
-    opacity: 0.25;
 
     // Show on container hover
     pre:hover &,
     .codehilite:hover & {
-      opacity: 1;
+      color: $md-color-black--light;
     }
   }
 
-  // Hovered and active icon
-  &:hover::before,
-  &:active::before {
+  // Focused or hovered icon
+  &:focus::before,
+  &:hover::before {
     color: $md-color-accent;
   }
 

src/partials/search.html

@@ -25,15 +25,18 @@
 <!-- Search interface -->
 <div class="md-search" data-md-component="search" role="dialog">
   <label class="md-search__overlay" for="search"></label>
-  <div class="md-search__inner">
+  <div class="md-search__inner" role="search">
     <form class="md-search__form" name="search">
       <input type="text" class="md-search__input" name="query"
           required placeholder="{{ lang.t('search.placeholder') }}"
           autocapitalize="off" autocorrect="off" autocomplete="off"
-          spellcheck="false" data-md-component="query" />
+          spellcheck="false" data-md-component="query"
+          data-md-state="active" />
       <label class="md-icon md-search__icon" for="search"></label>
       <button type="reset" class="md-icon md-search__icon"
-          data-md-component="reset">&#xE5CD;<!-- close --></button>
+          data-md-component="reset" tabindex="-1">
+        &#xE5CD;<!-- close -->
+      </button>
     </form>
     <div class="md-search__output">
       <div class="md-search__scrollwrap" data-md-scrollfix>