Accessibility improvements and clean code for back-to-top

nasa-jpl · Aug 8, 2023 · 74c1bc0 · 74c1bc0
1 parent e9be249
commit 74c1bc0
Show file tree

Hide file tree

Showing 5 changed files with 12 additions and 8 deletions.
diff --git a/dist/css/explorer-1.min.css b/dist/css/explorer-1.min.css
diff --git a/dist/js/explorer-1.min.js b/dist/js/explorer-1.min.js
diff --git a/src/js/components/_BackToTop.js b/src/js/components/_BackToTop.js
@@ -8,7 +8,7 @@ const initBackToTop = (backToTop) => {
   const backToTopBtn = backToTop.querySelector('button')
   const threshold = parseFloat(backToTop.dataset.threshold) || 300
   const scrollTo = parseFloat(backToTop.dataset.scrollto) || 0
-  const alwaysVisible = backToTop.dataset.alwaysvisible === 'true'
+  const alwaysVisible = backToTop.dataset.alwaysvisible
 
   const debounce = (func, wait = 0) => {
     let timeoutId

diff --git a/src/scss/components/_BackToTop.scss b/src/scss/components/_BackToTop.scss
@@ -5,8 +5,10 @@
     @media print {
       @apply hidden;
     }
+  }
 
-    &.always-visible {
+  &[data-alwaysvisible] {
+    > button {
       @apply block;
     }
   }
@@ -20,10 +22,10 @@
   }
 
   .label-text {
-    @apply hidden;
+    @apply sr-only;
 
     @screen sm {
-      @apply block;
+      @apply not-sr-only;
     }
   }
 }
diff --git a/storybook/stories/components/BackToTop/BackToTop.js b/storybook/stories/components/BackToTop/BackToTop.js
@@ -6,10 +6,12 @@ export const BackToTopTemplate = ({
   scrollTo = '',
   buttonClass = '',
 }) => {
-  return `<div class="BackToTop" data-alwaysvisible=${alwaysVisible} data-threshold="${threshold}" data-scrollto="${scrollTo}">
+  return `<div class="BackToTop" ${
+    alwaysVisible ? 'data-alwaysvisible' : ''
+  } data-threshold="${threshold}" data-scrollto="${scrollTo}">
   ${BaseButtonTemplate({
     variant: 'primary',
-    cssClass: `z-60 ${alwaysVisible ? 'always-visible' : ''} 
+    cssClass: `z-60 
     ${buttonClass ? buttonClass : ''}`,
     compact: true,
     icon: 'dropdown',