Fixed focus/hover hierarchy of version selector

material/base.html

@@ -39,7 +39,7 @@
       {% endif %}
     {% endblock %}
     {% block styles %}
-      <link rel="stylesheet" href="{{ 'assets/stylesheets/main.9299cb39.min.css' | url }}">
+      <link rel="stylesheet" href="{{ 'assets/stylesheets/main.ea5871b0.min.css' | url }}">
       {% if config.theme.palette %}
         {% set palette = config.theme.palette %}
         <link rel="stylesheet" href="{{ 'assets/stylesheets/palette.ef6f36e2.min.css' | url }}">
@@ -223,7 +223,7 @@
       </script>
     {% endblock %}
     {% block scripts %}
-      <script src="{{ 'assets/javascripts/bundle.56defda5.min.js' | url }}"></script>
+      <script src="{{ 'assets/javascripts/bundle.4ea5477f.min.js' | url }}"></script>
       {% for path in config["extra_javascript"] %}
         <script src="{{ path | url }}"></script>
       {% endfor %}

material/partials/header.html

@@ -27,9 +27,10 @@
         </div>
       </div>
     </div>
-    {% if not config.theme.palette is mapping %}
+    {% set palette = config.theme.palette %}
+    {% if palette and not palette is mapping %}
       <form class="md-header__option" data-md-component="palette">
-        {% for option in config.theme.palette %}
+        {% for option in palette %}
           {% set primary = option.primary | replace(" ", "-") | lower %}
           {% set accent  = option.accent  | replace(" ", "-") | lower %}
           <input class="md-option" data-md-color-media="{{ option.media }}" data-md-color-scheme="{{ option.scheme }}" data-md-color-primary="{{ primary }}" data-md-color-accent="{{ accent }}" type="radio" name="__palette" id="__palette_{{ loop.index }}">
@@ -45,14 +46,14 @@
       <div class="md-header__option">
         <div class="md-select">
           {% set icon = config.theme.icon.alternate or "material/translate" %}
-          <span class="md-header__button md-icon">
+          <button class="md-header__button md-icon">
             {% include ".icons/" ~ icon ~ ".svg" %}
-          </span>
+          </button>
           <div class="md-select__inner">
             <ul class="md-select__list">
               {% for alt in config.extra.alternate %}
                 <li class="md-select__item">
-                  <a href="{{ alt.link | url }}" class="md-select__link">
+                  <a href="{{ alt.link | url }}" hreflang="{{ alt.lang }}" class="md-select__link">
                     {{ alt.name }}
                   </a>
                 </li>

src/assets/javascripts/templates/version/index.tsx

@@ -85,9 +85,9 @@ export function renderVersionSelector(versions: Version[]): HTMLElement {
   /* Render version selector */
   return (
     <div class="md-version">
-      <span class="md-version__current">
+      <button class="md-version__current">
         {active.title}
-      </span>
+      </button>
       <ul class="md-version__list">
         {versions.map(renderVersion)}
       </ul>

src/assets/stylesheets/main/layout/_search.scss

@@ -578,7 +578,7 @@
     padding: px2em(12px) px2rem(16px);
     color: var(--md-typeset-a-color);
     font-size: px2rem(12.8px);
-    outline: 0;
+    outline: none;
     cursor: pointer;
     transition:
       color            250ms,

src/assets/stylesheets/main/layout/_select.scss

@@ -99,6 +99,7 @@
     width: 100%;
     padding-right: px2rem(24px);
     padding-left: px2rem(12px);
+    outline: none;
     cursor: pointer;
     transition:
       background-color 250ms,
@@ -114,6 +115,11 @@
     // Link on focus/hover
     &:focus,
     &:hover {
+      color: var(--md-accent-fg-color);
+    }
+
+    // Link on focus
+    &:focus {
       background-color: var(--md-default-fg-color--lightest);
     }
   }

src/assets/stylesheets/main/layout/_version.scss

@@ -47,6 +47,9 @@
     top: px2rem(1px);
     margin-right: px2rem(8px);
     margin-left: px2rem(28px);
+    color: inherit;
+    outline: none;
+    cursor: pointer;
 
     // Adjust for right-to-left languages
     [dir="rtl"] & {
@@ -78,7 +81,7 @@
     position: absolute;
     top: px2rem(3px);
     z-index: 1;
-    max-height: px2rem(36px);
+    max-height: 0;
     margin: px2rem(4px) px2rem(16px);
     padding: 0;
     overflow: auto;
@@ -95,14 +98,14 @@
       opacity  250ms 250ms;
     scroll-snap-type: y mandatory;
 
-    // List on focus/hover
+    // Version selection list on parent focus/hover
-    &:focus-within,
+    .md-version:focus-within &,
-    &:hover {
+    .md-version:hover & {
       max-height: px2rem(200px);
       opacity: 1;
       transition:
-        max-height 250ms,
+        max-height 0ms,
-        opacity    250ms;
+        opacity  250ms;
     }
   }
 
@@ -118,6 +121,7 @@
     padding-right: px2rem(24px);
     padding-left: px2rem(12px);
     white-space: nowrap;
+    outline: none;
     cursor: pointer;
     transition:
       color            250ms,
@@ -133,6 +137,11 @@
     // Link on focus/hover
     &:focus,
     &:hover {
+      color: var(--md-accent-fg-color);
+    }
+
+    // Link on focus
+    &:focus {
       background-color: var(--md-default-fg-color--lightest);
     }
   }

src/partials/header.html

@@ -64,9 +64,10 @@
     </div>
 
     <!-- Color palette -->
-    {% if not config.theme.palette is mapping %}
+    {% set palette = config.theme.palette %}
+    {% if palette and not palette is mapping %}
       <form class="md-header__option" data-md-component="palette">
-        {% for option in config.theme.palette %}
+        {% for option in palette %}
           {% set primary = option.primary | replace(" ", "-") | lower %}
           {% set accent  = option.accent  | replace(" ", "-") | lower %}
           <input
@@ -98,14 +99,18 @@
       <div class="md-header__option"></form>
         <div class="md-select">
           {% set icon = config.theme.icon.alternate or "material/translate" %}
-          <span class="md-header__button md-icon">
+          <button class="md-header__button md-icon">
             {% include ".icons/" ~ icon ~ ".svg" %}
-          </span>
+          </button>
           <div class="md-select__inner">
             <ul class="md-select__list">
               {% for alt in config.extra.alternate %}
                 <li class="md-select__item">
-                  <a href="{{ alt.link | url }}" class="md-select__link">
+                  <a
+                    href="{{ alt.link | url }}"
+                    hreflang="{{ alt.lang }}"
+                    class="md-select__link"
+                  >
                     {{ alt.name }}
                   </a>
                 </li>