remove role from mobile tabs to fix pagespeed

jetthoughts · Nov 13, 2024 · c66a21a · c66a21a
1 parent 8631844
commit c66a21a
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 14 deletions.
diff --git a/themes/beaver/assets/js/tabs.js b/themes/beaver/assets/js/tabs.js
@@ -2,7 +2,7 @@ document.querySelectorAll('.js-tab').forEach(el => {
     const container = el.closest('.js-tabs-container');
     el.onclick = function (e) {
         const targetTab = e.target;
-        const panel = document.getElementById(targetTab.getAttribute('aria-controls'));
+        const panel = document.getElementById(targetTab.getAttribute('data-controls'));
         container.querySelectorAll(".tab-panel").forEach(panel => panel.hidden = true);
         panel.hidden = false;
         container.querySelectorAll(".js-tab").forEach(tabTitle => tabTitle.setAttribute('aria-selected', 'false'));

diff --git a/themes/beaver/layouts/partials/page/use-cases.html b/themes/beaver/layouts/partials/page/use-cases.html
@@ -10,29 +10,29 @@ <h2 class="subheading">Delivering positive technology outcomes</h2>
 <div class="tabs-container js-tabs-container">
     <div class="tabs" role="tablist" aria-label="Use cases">
         <h2 class="tab-title js-tab" id="use-cases-tab-1"
-            role="tab" tabindex="0" aria-selected="true" aria-controls="use-cases-panel-1"
+            role="tab" tabindex="0" aria-selected="true" aria-controls="use-cases-panel-1" data-controls="use-cases-panel-1"
         >Startup MVP Prototyping & Development</h2>
         <h2 class="tab-title js-tab" id="use-cases-tab-2"
-            role="tab" tabindex="-1" aria-selected="false" aria-controls="use-cases-panel-2"
+            role="tab" tabindex="-1" aria-selected="false" aria-controls="use-cases-panel-2" data-controls="use-cases-panel-2"
         >Salvage an Existing Project</h2>
         <h2 class="tab-title js-tab" id="use-cases-tab-3"
-            role="tab" tabindex="-1" aria-selected="false" aria-controls="use-cases-panel-3"
+            role="tab" tabindex="-1" aria-selected="false" aria-controls="use-cases-panel-3" data-controls="use-cases-panel-3"
         >Emergency CTO Leadership</h2>
         <h2 class="tab-title js-tab" id="use-cases-tab-4"
-            role="tab" tabindex="-1" aria-selected="false" aria-controls="use-cases-panel-4"
+            role="tab" tabindex="-1" aria-selected="false" aria-controls="use-cases-panel-4" data-controls="use-cases-panel-4"
         >Empower an Existing Engineering Team</h2>
         <h2 class="tab-title js-tab" id="use-cases-tab-5"
-            role="tab" tabindex="-1" aria-selected="false" aria-controls="use-cases-panel-5"
+            role="tab" tabindex="-1" aria-selected="false" aria-controls="use-cases-panel-5" data-controls="use-cases-panel-5"
         >Accelerate Development & Maximize Capacity</h2>
         <h2 class="tab-title js-tab" id="use-cases-tab-6"
-            role="tab" tabindex="-1" aria-selected="false" aria-controls="use-cases-panel-6"
+            role="tab" tabindex="-1" aria-selected="false" aria-controls="use-cases-panel-6" data-controls="use-cases-panel-6"
         >Automate Product QA & Testing</h2>
     </div>
 
     <div class="tab-panels">
 
-        <h2 class="tab-title js-tab tab-title-mobile" id="use-cases-tab-1-mobile"
-            role="tab" tabindex="0" aria-selected="true" aria-controls="use-cases-panel-1"
+        <h2 class="js-tab tab-title-mobile" id="use-cases-tab-1-mobile"
+            data-controls="use-cases-panel-1"  tabindex="0"
         >Startup MVP Prototyping & Development</h2>
 
 
@@ -50,7 +50,7 @@ <h3 class="heading">Startup MVP Prototyping &amp; Development</h3>
         </div>
 
         <h2 class="tab-title-mobile js-tab" id="use-cases-tab-2-mobile"
-            role="tab" tabindex="-1" aria-selected="false" aria-controls="use-cases-panel-2"
+           data-controls="use-cases-panel-2" tabindex="-1"
         >Salvage an Existing Project</h2>
 
         <div class="tab-panel" role="tabpanel" tabindex="0" aria-labelledby="use-cases-tab-2" id="use-cases-panel-2" hidden>
@@ -67,7 +67,7 @@ <h3 class="heading">Salvage an Existing Project</h3>
         </div>
 
         <h2 class="tab-title-mobile js-tab" id="use-cases-tab-3-mobile"
-            role="tab" tabindex="-1" aria-selected="false" aria-controls="use-cases-panel-3"
+            data-controls="use-cases-panel-3" tabindex="-1"
         >Emergency CTO Leadership</h2>
 
         <div class="tab-panel" role="tabpanel" tabindex="0" aria-labelledby="use-cases-tab-3" id="use-cases-panel-3" hidden>
@@ -84,7 +84,7 @@ <h3 class="heading">Emergency CTO Leadership</h3>
         </div>
 
         <h2 class="tab-title-mobile js-tab" id="use-cases-tab-4-mobile"
-            role="tab" tabindex="-1" aria-selected="false" aria-controls="use-cases-panel-4"
+            data-controls="use-cases-panel-4" tabindex="-1"
         >Empower an Existing Engineering Team</h2>
 
         <div class="tab-panel" role="tabpanel" tabindex="0" aria-labelledby="use-cases-tab-4" id="use-cases-panel-4" hidden>
@@ -101,7 +101,7 @@ <h3 class="heading">Empower an Existing Engineering Team</h3>
         </div>
 
         <h2 class="tab-title-mobile js-tab" id="use-cases-tab-5-mobile"
-            role="tab" tabindex="-1" aria-selected="false" aria-controls="use-cases-panel-5"
+            data-controls="use-cases-panel-5" tabindex="-1"
         >Accelerate Development & Maximize Capacity</h2>
 
         <div class="tab-panel" role="tabpanel" tabindex="0" aria-labelledby="use-cases-tab-5" id="use-cases-panel-5" hidden>
@@ -118,7 +118,7 @@ <h3 class="heading">Accelerate Development &amp; Maximize Capacity</h3>
         </div>
 
         <h2 class="tab-title-mobile js-tab" id="use-cases-tab-6-mobile"
-            role="tab" tabindex="-1" aria-selected="false" aria-controls="use-cases-panel-6"
+            data-controls="use-cases-panel-6" tabindex="-1"
         >Automate Product QA & Testing</h2>
 
         <div class="tab-panel" role="tabpanel" tabindex="0" aria-labelledby="use-cases-tab-6" id="use-cases-panel-6" hidden>