Use generic selectors to make CSS optional

dotherightthing · Dec 29, 2020 · 072ff02 · 072ff02
1 parent 68f5aeb
commit 072ff02
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 12 deletions.
diff --git a/js/_tabbed-carousel.js b/js/_tabbed-carousel.js
@@ -32,12 +32,12 @@ class TabbedCarousel {
             selected: '[aria-selected="true"]',
             unselected: '[aria-selected="false"]',
             jsEnabled: '.nojs-disabled',
-            tab: '.tabbed-carousel__tab',
-            tablist: '.tabbed-carousel__tablist',
-            tabpanel: '.tabbed-carousel__tabpanel',
-            tabpanelExpandButton: '.tabbed-carousel__tabpanels-nav-expand',
-            tabpanelsNavNext: '.tabbed-carousel__tabpanels-nav-next',
-            tabpanelsNavPrevious: '.tabbed-carousel__tabpanels-nav-previous'
+            tab: '[role="tab"]',
+            tablist: '[role="tablist"]',
+            tabpanel: '[role="tabpanel"]',
+            tabpanelExpandButton: '[data-tabbed-content-nav-expand]',
+            tabpanelsNavNext: '[data-tabbed-content-nav-next]',
+            tabpanelsNavPrevious: '[data-tabbed-content-nav-previous]'
         };
     }
 

diff --git a/tabbed-carousel.html b/tabbed-carousel.html
@@ -68,9 +68,9 @@ <h2 class="tabbed-carousel__tabpanel-title">Image 5</h2>
                          this is in contrast with the WAI-ARIA Carousel example, which doesn't have tab navigation
                     -->
                     <div class="tabbed-carousel__tabpanels-nav">
-                        <button type="button" class="tabbed-carousel__tabpanels-nav-expand nojs-disabled" aria-expanded="false" aria-controls="test-1-tab-1-img-wrap test-1-tab-2-img-wrap test-1-tab-3-img-wrap test-1-tab-4-img-wrap test-1-tab-5-img-wrap" disabled>Expand</button>
-                        <button type="button" class="tabbed-carousel__tabpanels-nav-previous nojs-disabled" data-kh-proxy="selectPrevious" disabled>Previous</button>
-                        <button type="button" class="tabbed-carousel__tabpanels-nav-next nojs-disabled" data-kh-proxy="selectNext" disabled>Next</button>
+                        <button type="button" data-tabbed-content-nav-expand class="tabbed-carousel__tabpanels-nav-expand" aria-expanded="false" aria-controls="test-1-tab-1-img-wrap test-1-tab-2-img-wrap test-1-tab-3-img-wrap test-1-tab-4-img-wrap test-1-tab-5-img-wrap" disabled>Expand</button>
+                        <button type="button" data-tabbed-content-nav-previous class="tabbed-carousel__tabpanels-nav-previous" data-kh-proxy="selectPrevious" disabled>Previous</button>
+                        <button type="button" data-tabbed-content-nav-next class="tabbed-carousel__tabpanels-nav-next" data-kh-proxy="selectNext" disabled>Next</button>
                     </div>
                 </div>
             </div>
@@ -134,9 +134,9 @@ <h2 class="tabbed-carousel__tabpanel-title">Image 5</h2>
                          this is in contrast with the WAI-ARIA Carousel example, which doesn't have tab navigation
                     -->
                     <div class="tabbed-carousel__tabpanels-nav">
-                        <button type="button" class="tabbed-carousel__tabpanels-nav-expand nojs-disabled" aria-expanded="false" aria-controls="test-2-tab-1-img-wrap test-2-tab-2-img-wrap test-2-tab-3-img-wrap test-2-tab-4-img-wrap test-2-tab-5-img-wrap" disabled>Expand</button>
-                        <button type="button" class="tabbed-carousel__tabpanels-nav-previous nojs-disabled" data-kh-proxy="selectPrevious" disabled>Previous</button>
-                        <button type="button" class="tabbed-carousel__tabpanels-nav-next nojs-disabled" data-kh-proxy="selectNext" disabled>Next</button>
+                        <button type="button" class="tabbed-carousel__tabpanels-nav-expand" aria-expanded="false" aria-controls="test-2-tab-1-img-wrap test-2-tab-2-img-wrap test-2-tab-3-img-wrap test-2-tab-4-img-wrap test-2-tab-5-img-wrap" disabled>Expand</button>
+                        <button type="button" class="tabbed-carousel__tabpanels-nav-previous" data-kh-proxy="selectPrevious" disabled>Previous</button>
+                        <button type="button" class="tabbed-carousel__tabpanels-nav-next" data-kh-proxy="selectNext" disabled>Next</button>
                     </div>
                 </div>
             </div>