fix: ensure aria attributes based on state

adobe · May 4, 2020 · 6369ff3 · 6369ff3
1 parent c8d3c60
commit 6369ff3
Show file tree

Hide file tree

Showing 3 changed files with 24 additions and 20 deletions.
diff --git a/__snapshots__/Switch.md b/__snapshots__/Switch.md
@@ -4,14 +4,20 @@
 
 ```html
 <input
-    aria-checked="false"
-    id="input"
-    role="switch"
-    tabindex="0"
-    type="checkbox"
-/>
-<span id="switch"></span>
-<label for="input" id="label">
-    <slot></slot>
+  id="input"
+  role="switch"
+  tabindex="0"
+  type="checkbox"
+>
+<span id="switch">
+</span>
+<label
+  for="input"
+  id="label"
+>
+  <slot>
+  </slot>
 </label>
+
 ```
+
diff --git a/packages/checkbox/src/checkbox-base.ts b/packages/checkbox/src/checkbox-base.ts
@@ -52,16 +52,11 @@ export class CheckboxBase extends Focusable {
         this.dispatchEvent(changeEvent);
     }
 
-    protected get ariaCheckedState(): 'true' | 'false' | 'mixed' {
-        return this.checked ? 'true' : 'false';
-    }
-
     protected render(): TemplateResult {
         return html`
             <input
                 id="input"
                 type="checkbox"
-                aria-checked=${this.ariaCheckedState}
                 .checked=${this.checked}
                 @change=${this.handleChange}
             />

diff --git a/packages/checkbox/src/checkbox.ts b/packages/checkbox/src/checkbox.ts
@@ -43,10 +43,6 @@ export class Checkbox extends CheckboxBase {
         ];
     }
 
-    protected get ariaCheckedState(): 'true' | 'false' | 'mixed' {
-        return this.indeterminate ? 'mixed' : super.ariaCheckedState;
-    }
-
     protected render(): TemplateResult {
         return html`
             <label id="root">
@@ -64,14 +60,21 @@ export class Checkbox extends CheckboxBase {
         `;
     }
 
-    protected firstUpdated(changes: PropertyValues): void {
-        super.firstUpdated(changes);
+    protected updated(changes: PropertyValues): void {
+        super.updated(changes);
         if (changes.has('invalid')) {
             if (this.invalid) {
                 this.inputElement.setAttribute('aria-invalid', 'true');
             } else {
                 this.inputElement.removeAttribute('aria-invalid');
             }
         }
+        if (changes.has('indeterminate')) {
+            if (this.indeterminate) {
+                this.inputElement.setAttribute('aria-checked', 'mixed');
+            } else {
+                this.inputElement.removeAttribute('aria-checked');
+            }
+        }
     }
 }