Prevent aria-hidden elements from receiving keyboard focus (Fixes moz…

…illa#15137)
alexgibson · Oct 8, 2024 · 3dfad83 · 3dfad83
1 parent 67cf7ce
commit 3dfad83
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 10 deletions.
diff --git a/bedrock/firefox/templates/firefox/challenge-the-default/includes/toggles.html b/bedrock/firefox/templates/firefox/challenge-the-default/includes/toggles.html
@@ -9,7 +9,7 @@
     <div class="toggle-grid small">
         {% for element in range(4) %}
           <label class="toggle" for="toggle-top-{{ loop.index }}">
-            <input type="checkbox" name="toggle" id="toggle-top-{{ loop.index }}" class="toggle-input" />
+            <input type="checkbox" name="toggle" id="toggle-top-{{ loop.index }}" class="toggle-input" tabindex="-1" />
             <span class="toggle-display"></span>
           </label>
         {% endfor %}
@@ -19,43 +19,43 @@
         </label>
         {% for element in range(4) %}
           <label class="toggle" for="toggle-bottom-{{ loop.index }}">
-            <input type="checkbox" name="toggle" id="toggle-bottom-{{ loop.index }}" class="toggle-input" />
+            <input type="checkbox" name="toggle" id="toggle-bottom-{{ loop.index }}" class="toggle-input" tabindex="-1" />
             <span class="toggle-display"></span>
           </label>
         {% endfor %}
     </div>
     <div class="toggle-grid medium">
       {% for element in range(7) %}
       <label class="toggle" for="toggle-top-{{ loop.index }}">
-        <input type="checkbox" name="toggle" id="toggle-top-{{ loop.index }}" class="toggle-input" />
+        <input type="checkbox" name="toggle" id="toggle-top-{{ loop.index }}" class="toggle-input" tabindex="-1" />
         <span class="toggle-display"></span>
       </label>
       {% endfor %}
       <label class="toggle middle" for="toggle-middle">
-        <input type="checkbox" name="toggle" id="toggle-middle" class="toggle-input" />
+        <input type="checkbox" name="toggle" id="toggle-middle" class="toggle-input" tabindex="-1" />
         <span class="toggle-display"></span>
       </label>
       {% for element in range(7) %}
       <label class="toggle" for="toggle-bottom-{{ loop.index }}">
-        <input type="checkbox" name="toggle" id="toggle-bottom-{{ loop.index }}" class="toggle-input" />
+        <input type="checkbox" name="toggle" id="toggle-bottom-{{ loop.index }}" class="toggle-input" tabindex="-1" />
         <span class="toggle-display"></span>
       </label>
       {% endfor %}
     </div>
     <div class="toggle-grid large">
       {% for element in range(10) %}
       <label class="toggle" for="toggle-top-{{ loop.index }}">
-        <input type="checkbox" name="toggle" id="toggle-top-{{ loop.index }}" class="toggle-input" />
+        <input type="checkbox" name="toggle" id="toggle-top-{{ loop.index }}" class="toggle-input" tabindex="-1" />
         <span class="toggle-display"></span>
       </label>
       {% endfor %}
       <label class="toggle middle" for="toggle-middle">
-        <input type="checkbox" name="toggle-middle" id="toggle-middle" class="toggle-input" />
+        <input type="checkbox" name="toggle-middle" id="toggle-middle" class="toggle-input" tabindex="-1" />
         <span class="toggle-display"></span>
       </label>
       {% for element in range(10) %}
       <label class="toggle" for="toggle-bottom-{{ loop.index }}">
-        <input type="checkbox" name="toggle" id="toggle-bottom-{{ loop.index }}" class="toggle-input" />
+        <input type="checkbox" name="toggle" id="toggle-bottom-{{ loop.index }}" class="toggle-input" tabindex="-1" />
         <span class="toggle-display"></span>
       </label>
       {% endfor %}

diff --git a/bedrock/firefox/templates/firefox/challenge-the-default/landing-base.html b/bedrock/firefox/templates/firefox/challenge-the-default/landing-base.html
@@ -155,7 +155,7 @@
           <div class="c-hero-top-controls" aria-hidden="true">
               <span class="hero-control-btn minimize"></span>
               <span class="hero-control-btn expand"></span>
-              <button type="button" class="hero-control-btn close">close</button>
+              <button type="button" class="hero-control-btn close" tabindex="-1">close</button>
           </div>
         </div>
         <div class="hero-content-wrapper">
@@ -318,7 +318,7 @@ <h2>{{ compare_title|safe }}</h2>
           </tbody>
         </table>
         <section aria-hidden="true">
-          <button type="button" class="kitten-button">=^._.^=</button>
+          <button type="button" class="kitten-button" tabindex="-1">=^._.^=</button>
         </section>
         <div class="comparison-cta">
           <h3>{{ compare_cta }}</h3>