fix: ensure aria attributes based on state

adobe · May 4, 2020 · 6ee43de · 6ee43de
1 parent 6761148
commit 6ee43de
Show file tree

Hide file tree

Showing 4 changed files with 46 additions and 4 deletions.
diff --git a/__snapshots__/Switch.md b/__snapshots__/Switch.md
@@ -3,7 +3,13 @@
 #### `loads`
 
 ```html
-<input id="input" tabindex="0" type="checkbox" />
+<input
+    aria-checked="false"
+    id="input"
+    role="switch"
+    tabindex="0"
+    type="checkbox"
+/>
 <span id="switch"></span>
 <label for="input" id="label">
     <slot></slot>

diff --git a/packages/checkbox/src/checkbox-base.ts b/packages/checkbox/src/checkbox-base.ts
@@ -31,7 +31,7 @@ export class CheckboxBase extends Focusable {
     public quiet = false;
 
     @query('#input')
-    private inputElement!: HTMLInputElement;
+    protected inputElement!: HTMLInputElement;
 
     public get focusElement(): HTMLElement {
         return this.inputElement;
@@ -52,11 +52,16 @@ 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
@@ -10,7 +10,13 @@ OF ANY KIND, either express or implied. See the License for the specific languag
 governing permissions and limitations under the License.
 */
 
-import { CSSResultArray, TemplateResult, html, property } from 'lit-element';
+import {
+    CSSResultArray,
+    TemplateResult,
+    html,
+    property,
+    PropertyValues,
+} from 'lit-element';
 import { CheckboxBase } from './checkbox-base.js';
 import '@spectrum-web-components/icon';
 import {
@@ -37,6 +43,10 @@ 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">
@@ -53,4 +63,15 @@ export class Checkbox extends CheckboxBase {
             </label>
         `;
     }
+
+    protected firstUpdated(changes: PropertyValues): void {
+        super.firstUpdated(changes);
+        if (changes.has('invalid')) {
+            if (this.invalid) {
+                this.inputElement.setAttribute('aria-invalid', 'true');
+            } else {
+                this.inputElement.removeAttribute('aria-invalid');
+            }
+        }
+    }
 }
diff --git a/packages/switch/src/switch.ts b/packages/switch/src/switch.ts
@@ -10,7 +10,12 @@ OF ANY KIND, either express or implied. See the License for the specific languag
 governing permissions and limitations under the License.
 */
 
-import { CSSResultArray, TemplateResult, html } from 'lit-element';
+import {
+    CSSResultArray,
+    TemplateResult,
+    html,
+    PropertyValues,
+} from 'lit-element';
 import { CheckboxBase } from '@spectrum-web-components/checkbox/lib/checkbox-base.js';
 import switchStyles from './switch.css.js';
 import legacyStyles from './switch-legacy.css.js';
@@ -32,4 +37,9 @@ export class Switch extends CheckboxBase {
             <label id="label" for="input"><slot></slot></label>
         `;
     }
+
+    protected firstUpdated(changes: PropertyValues): void {
+        super.firstUpdated(changes);
+        this.inputElement.setAttribute('role', 'switch');
+    }
 }