Make marquee visible for screen reader (#196)

ryuuart · Aug 26, 2023 · ff4c7f5 · ff4c7f5
1 parent 5e947ba
commit ff4c7f5
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 1 deletion.
diff --git a/.changeset/kind-carrots-glow.md b/.changeset/kind-carrots-glow.md
@@ -0,0 +1,5 @@
+---
+"manawave": patch
+---
+
+Make marquee visible for accessibility customizability
diff --git a/package/src/dom/components/ticker.ts b/package/src/dom/components/ticker.ts
@@ -7,7 +7,6 @@ import styles from "../styles/ticker.module.css";
 export default class TickerComponent extends Component {
     constructor() {
         const element = document.createElement("div");
-        element.ariaHidden = "true";
         element.classList.add(styles.container);
 
         super(element);

diff --git a/package/src/ticker/context.ts b/package/src/ticker/context.ts
@@ -54,6 +54,15 @@ export default class Context {
             if (!(selected instanceof WebComponent))
                 selected.classList.add(styles.manawaveRoot);
 
+            // add a11y labeling
+            selected.role = "marquee";
+            if (
+                !selected.ariaLabel &&
+                !selected.hasAttribute("aria-labelledby")
+            ) {
+                selected.ariaLabel = "marquee";
+            }
+
             // WARNING IT HAS TO BE IN THIS SPECIFIC ORDER DO NOT CHANGE
             // basically, it first boxes the repeating items to be measured over time
             // then it removes them from the dom and places it inside a template to clone from