Move styling to sr-only

yext · Oct 27, 2021 · 2c9384b · 2c9384b
1 parent 74b62d3
commit 2c9384b
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 12 deletions.
diff --git a/sample-app/src/components/InputDropdown.tsx b/sample-app/src/components/InputDropdown.tsx
@@ -167,7 +167,7 @@ export default function InputDropdown({
       }
       {cssClasses.resultsCount &&
         <span
-          className={cssClasses.resultsCount}
+          className={`${cssClasses.resultsCount} sr-only`}
           aria-live='assertive'
           ref={resultsCountRef}>
         </span>

diff --git a/sample-app/src/sass/App.scss b/sample-app/src/sass/App.scss
@@ -22,3 +22,14 @@
 .result-description {
   padding-left: 2em;
 }
+
+.sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0,0,0,0);
+  border: 0;
+}
diff --git a/sample-app/src/sass/Autocomplete.scss b/sample-app/src/sass/Autocomplete.scss
@@ -19,15 +19,4 @@
   &__instructions {
     display: none;
   }
-
-  &__resultsCount {
-    position: absolute;
-    width: 1px;
-    height: 1px;
-    padding: 0;
-    margin: -1px;
-    overflow: hidden;
-    clip: rect(0,0,0,0);
-    border: 0;
-  }
 }