Accessibility for TriStateCheckbox

src/components/config/PrimeVue.d.ts

@@ -6,6 +6,12 @@ interface PrimeVueConfiguration {
     locale?: PrimeVueLocaleOptions;
 }
 
+interface PrimeVueLocaleAriaOptions {
+    trueLabel?: string;
+    falseLabel?: string;
+    nullLabel?: string;
+}
+
 interface PrimeVueLocaleOptions {
     startsWith?: string;
     contains?: string;
@@ -48,6 +54,7 @@ interface PrimeVueLocaleOptions {
     passwordPrompt?: string;
     emptyFilterMessage?: string;
     emptyMessage?: string;
+    aria?: PrimeVueLocaleAriaOptions;
 }
 
 export declare function usePrimeVue(): { config: PrimeVueConfiguration };

src/components/config/PrimeVue.js

@@ -45,7 +45,12 @@ const defaultOptions = {
         strong: 'Strong',
         passwordPrompt: 'Enter a password',
         emptyFilterMessage: 'No results found',
-        emptyMessage: 'No available options'
+        emptyMessage: 'No available options',
+        aria: {
+            trueLabel: 'True',
+            falseLabel: 'False',
+            nullLabel: 'Not Selected'
+        }
     },
     filterMatchModeOptions: {
         text: [

src/components/tristatecheckbox/TriStateCheckbox.vue

@@ -1,9 +1,11 @@
 <template>
-    <div :class="containerClass" @click="onClick($event)" :style="style">
+    <div :class="containerClass" @click="onClick($event)">
         <div class="p-hidden-accessible">
-            <input ref="input" type="checkbox" :checked="modelValue === true" v-bind="$attrs" @focus="onFocus()" @blur="onBlur()">
+            <input :id="inputId" ref="input" type="checkbox" :checked="modelValue === true" :tabindex="tabindex" :disabled="disabled" :aria-labelledby="ariaLabelledby" :aria-label="ariaLabel"
+                @keydown="onKeyDown($event)" @focus="onFocus($event)" @blur="onBlur($event)" v-bind="inputProps" >
         </div>
-        <div ref="box" :class="['p-checkbox-box', {'p-highlight': (modelValue != null), 'p-disabled': $attrs.disabled, 'p-focus': focused}]" role="checkbox" :aria-checked="modelValue === true">
+        <span class="p-sr-only" aria-live="polite">{{ariaValueLabel}}</span>
+        <div ref="box" :class="['p-checkbox-box', {'p-highlight': (modelValue != null), 'p-disabled': disabled, 'p-focus': focused}]" >
             <span :class="['p-checkbox-icon', icon]"></span>
         </div>
     </div>
@@ -12,12 +14,27 @@
 <script>
 export default {
     name: 'TriStateCheckbox',
-    inheritAttrs: false,
+    emits: ['click', 'update:modelValue', 'change', 'keydown', 'focus', 'blur'],
-    emits: ['click', 'update:modelValue', 'change'],
     props: {
         modelValue: null,
-        class: null,
+        inputId: null,
-        style: null
+        inputProps: null,
+        disabled: {
+			type: Boolean,
+			default: false
+        },
+        tabindex: {
+            type: Number,
+            default: 0
+        },
+        'aria-labelledby': {
+            type: String,
+            default: null
+        },
+        'aria-label': {
+            type: String,
+            default: null
+        }
     },
     data() {
         return {
@@ -25,8 +42,8 @@ export default {
         };
     },
     methods: {
-        onClick(event) {
+        updateModel() {
-            if (!this.$attrs.disabled) {
+            if (!this.disabled) {
                 let newValue;
 
                 switch (this.modelValue) {
@@ -43,17 +60,29 @@ export default {
                     break;
                 }
 
-                this.$emit('click', event);
                 this.$emit('update:modelValue', newValue);
-                this.$emit('change', event);
-                this.$refs.input.focus();
             }
         },
-        onFocus() {
+        onClick(event) {
-            this.focused = true;
+            this.updateModel();
+            this.$emit('click', event);
+            this.$emit('change', event);
+            this.$refs.input.focus();
         },
-        onBlur() {
+        onKeyDown(event) {
+            if (event.code === 'Enter') {
+                this.updateModel();
+                this.$emit('keydown', event);
+                event.preventDefault();
+            }
+        },
+        onFocus(event) {
+            this.focused = true;
+            this.$emit('focus', event);
+        },
+        onBlur(event) {
             this.focused = false;
+            this.$emit('blur', event);
         }
     },
     computed: {
@@ -76,7 +105,15 @@ export default {
             return icon;
         },
         containerClass() {
-            return ['p-checkbox p-component', this.class, {'p-checkbox-checked': this.modelValue === true, 'p-checkbox-disabled': this.$attrs.disabled, 'p-checkbox-focused': this.focused}];
+            return [
+                'p-checkbox p-component', {
+                    'p-checkbox-checked': this.modelValue === true,
+                    'p-checkbox-disabled': this.disabled,
+                    'p-checkbox-focused': this.focused
+            }];
+        },
+        ariaValueLabel() {
+            return this.modelValue ? this.$primevue.config.locale.aria.trueLabel : (this.modelValue === false ? this.$primevue.config.locale.aria.falseLabel : this.$primevue.config.locale.aria.nullLabel);
         }
     }
 }

src/views/tristatecheckbox/TriStateCheckboxDoc.vue

@@ -89,6 +89,48 @@ import TriStateCheckbox from 'primevue/tristatecheckbox';
 			</table>
 		</div>
 
+        <h5>Accessibility</h5>
+        <DevelopmentSection>
+            <h6>Screen Reader</h6>
+            <p>TriStateCheckbox component uses an element with <i>checkbox</i> role. Value to describe the component can either be provided with <i>aria-labelledby</i> or <i>aria-label</i> props. Component adds an element with
+            <i>aria-live</i> attribute that is only visible to screen readers to read the value displayed. Values to read are defined with the <i>trueLabel</i>, <i>falseLabel</i> and <i>nullLabel</i> keys of the <i>aria</i>
+                property from the <router-link to="/locale">locale</router-link> API. This is an example of a custom accessibility implementation as there is no one to one mapping between the component design and the WCAG specification.</p>
+
+<pre v-code><code>
+&lt;span id="chkbox1"&gt;Remember Me&lt;/span&gt;
+&lt;TriStateCheckbox aria-labelledby="chkbox1" /&gt;
+
+&lt;TriStateCheckbox aria-label="Remember Me" /&gt;
+
+</code></pre>
+
+            <h6>Keyboard Support</h6>
+            <div class="doc-tablewrapper">
+                <table class="doc-table">
+                    <thead>
+                        <tr>
+                            <th>Key</th>
+                            <th>Function</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <tr>
+                            <td><i>tab</i></td>
+                            <td>Moves focus to the checkbox.</td>
+                        </tr>
+                        <tr>
+                            <td><i>space</i></td>
+                            <td>Toggles between the values.</td>
+                        </tr>
+                        <tr>
+                            <td><i>enter</i></td>
+                            <td>Toggles between the values.</td>
+                        </tr>
+                    </tbody>
+                </table>
+            </div>
+        </DevelopmentSection>
+
 		<h5>Dependencies</h5>
 		<p>None.</p>
 	</AppDoc>