Accessiblity fixes

WillYallop · Apr 4, 2023 · fe1b978 · fe1b978
1 parent ad90be5
commit fe1b978
Show file tree

Hide file tree

Showing 16 changed files with 19 additions and 24 deletions.
diff --git a/apps/playground-fr/index.html b/apps/playground-fr/index.html
@@ -72,9 +72,7 @@ <h2>Web Components Example - Checkbox Toggler</h2>
           >
             <label
               tabindex="0"
-              role="button"
               for="checkbox-input"
-              aria-expanded="false"
               aria-controls="checkbox-dropdown"
               >Toggle</label
             >

diff --git a/apps/playground-fr/src/scss/main.scss b/apps/playground-fr/src/scss/main.scss
@@ -33,7 +33,8 @@ sticky-header {
   }
   &.sticky-up {
     header {
-      background-color: blue;
+      background-color: rgb(7, 7, 92);
+      color: white;
     }
   }
 }

diff --git a/packages/webcomponents/dist/components/checkbox-toggler/checkbox-toggler.d.ts.map b/packages/webcomponents/dist/components/checkbox-toggler/checkbox-toggler.d.ts.map
diff --git a/packages/webcomponents/dist/components/checkbox-toggler/checkbox-toggler.js b/packages/webcomponents/dist/components/checkbox-toggler/checkbox-toggler.js
diff --git a/packages/webcomponents/dist/components/checkbox-toggler/checkbox-toggler.js.map b/packages/webcomponents/dist/components/checkbox-toggler/checkbox-toggler.js.map
diff --git a/packages/webcomponents/dist/components/reveal-animation/reveal-animation.d.ts b/packages/webcomponents/dist/components/reveal-animation/reveal-animation.d.ts
@@ -0,0 +1 @@
+//# sourceMappingURL=reveal-animation.d.ts.map
diff --git a/packages/webcomponents/dist/components/reveal-animation/reveal-animation.d.ts.map b/packages/webcomponents/dist/components/reveal-animation/reveal-animation.d.ts.map
diff --git a/packages/webcomponents/dist/components/reveal-animation/reveal-animation.js b/packages/webcomponents/dist/components/reveal-animation/reveal-animation.js
diff --git a/packages/webcomponents/dist/components/reveal-animation/reveal-animation.js.map b/packages/webcomponents/dist/components/reveal-animation/reveal-animation.js.map
diff --git a/packages/webcomponents/dist/components/reveal-animations/reveal-animation.d.ts b/packages/webcomponents/dist/components/reveal-animations/reveal-animation.d.ts
@@ -0,0 +1 @@
+//# sourceMappingURL=reveal-animation.d.ts.map
diff --git a/packages/webcomponents/dist/components/reveal-animations/reveal-animation.d.ts.map b/packages/webcomponents/dist/components/reveal-animations/reveal-animation.d.ts.map
diff --git a/packages/webcomponents/dist/components/reveal-animations/reveal-animation.js b/packages/webcomponents/dist/components/reveal-animations/reveal-animation.js
diff --git a/packages/webcomponents/dist/components/reveal-animations/reveal-animation.js.map b/packages/webcomponents/dist/components/reveal-animations/reveal-animation.js.map
diff --git a/packages/webcomponents/src/components/checkbox-toggler/README.md b/packages/webcomponents/src/components/checkbox-toggler/README.md
@@ -89,4 +89,5 @@ If the attribute is present, the checkbox will be set to checked if the web comp
 
 If the attribute is present, the checkbox will be set to checked if the webcomponent is focused.
 
-## Future Development
+## Future Development
+- Fix bug with clicking to toggle when focus on is active. Causes it to close after clicking opens and brings focus to it.
diff --git a/packages/webcomponents/src/components/checkbox-toggler/checkbox-toggler.ts b/packages/webcomponents/src/components/checkbox-toggler/checkbox-toggler.ts
@@ -69,16 +69,11 @@ class CheckboxToggler extends HTMLElement {
     }
   }
   private setAttributes() {
-    this.label?.setAttribute("aria-expanded", "false");
     this.label?.setAttribute("tabindex", "0");
-    this.label?.setAttribute("role", "button");
     const targetID = this.getAttribute("data-target-id");
     if (targetID) {
       this.label?.setAttribute("aria-controls", targetID);
     }
-    if (this.checkbox?.checked) {
-      this.label?.setAttribute("aria-expanded", "true");
-    }
   }
   // Events
   private handleClick = (event: MouseEvent) => {
@@ -110,10 +105,8 @@ class CheckboxToggler extends HTMLElement {
       this.checkbox.dispatchEvent(new Event("change"));
       const bodyclass = this.getAttribute("body-class");
       if (this.checkbox.checked) {
-        this.label?.setAttribute("aria-expanded", "true");
         if (bodyclass) document.body.classList.add(bodyclass);
       } else {
-        this.label?.setAttribute("aria-expanded", "false");
         if (bodyclass) document.body.classList.remove(bodyclass);
       }
     }

diff --git a/packages/webcomponents/src/components/reveal-animation/reveal-animation.ts b/packages/webcomponents/src/components/reveal-animation/reveal-animation.ts