refactor(a11y): move sr-only styles from CSS to inline JavaScript

Author: raffaele-filiberti

demo/styles.css

@@ -112,15 +112,3 @@ button:hover {
   position: relative;
   display: inline-block;
 }
-
-.sr-only {
-  position: absolute;
-  width: 1px;
-  height: 1px;
-  padding: 0;
-  margin: -1px;
-  overflow: hidden;
-  clip: rect(0, 0, 0, 0);
-  white-space: nowrap;
-  border: 0;
-}

src/index.js

@@ -101,6 +101,15 @@ export default class SplitText {
       if (!this.options.noAriaLabel) {
         const span = document.createElement('span');
         span.classList.add('sr-only');
+        span.style.setProperty('position', 'absolute');
+        span.style.setProperty('width', '1px');
+        span.style.setProperty('height', '1px');
+        span.style.setProperty('padding', '0');
+        span.style.setProperty('margin', '-1px');
+        span.style.setProperty('overflow', 'hidden');
+        span.style.setProperty('clip', 'rect(0, 0, 0, 0)');
+        span.style.setProperty('white-space', 'nowrap');
+        span.style.setProperty('border', '0');
         span.textContent = this.ariaLabel.join(' ');
         element.appendChild(span);
       }