Components accessibility updates & dom optimization checks (#1863)

packages/ui/src/components/va-checkbox/VaCheckbox.vue

@@ -24,6 +24,7 @@
           ref="input"
           type="checkbox"
           class="va-checkbox__input"
+          :aria-label="$props.ariaLabel"
           :id="computedId"
           :name="computedName"
           :tabindex="computedTabIndex"
@@ -90,6 +91,7 @@ export default defineComponent({
     indeterminateIcon: { type: String as PropType<string>, default: 'remove' },
     id: { type: String as PropType<string>, default: '' },
     name: { type: String as PropType<string>, default: '' },
+    ariaLabel: { type: String, default: '' },
   },
   setup (props, { emit }) {
     const elements = {
@@ -168,7 +170,7 @@ export default defineComponent({
       toggleSelection,
       onBlur,
       onFocus,
-      computedTabIndex: computed(() => props.disabled || props.readonly ? -1 : 0),
+      computedTabIndex: computed(() => props.disabled ? -1 : 0),
       computedId: computed(() => props.id || uniqueId.value),
       computedName: computed(() => props.name || uniqueId.value),
     }

packages/ui/src/components/va-chip/VaChip.vue

@@ -19,11 +19,11 @@
       @focus="$emit('focus')"
       @mouseenter="onMouseEnter"
       @mouseleave="onMouseLeave"
-      :tabindex="indexComputed"
     >
       <va-icon
         v-if="icon"
         class="va-chip__icon"
+        aria-hidden="true"
         :name="icon"
         :size="iconSize"
       />
@@ -34,6 +34,10 @@
         v-if="closeable"
         class="va-chip__close-icon"
         name="close"
+        role="button"
+        aria-label="close"
+        aria-hidden="false"
+        :tabindex="tabIndexComputed"
         :size="iconSize"
         @click.stop="close"
       />
@@ -47,7 +51,6 @@ import {
   getBoxShadowColor,
   getHoverColor,
   getFocusColor,
-  getTextColor,
 } from '../../services/color-config/color-functions'
 import { useRouterLink, useRouterLinkProps } from '../../composables/useRouterLink'
 import useKeyboardOnlyFocus from '../../composables/useKeyboardOnlyFocus'
@@ -126,7 +129,7 @@ export default defineComponent({
 
       iconSize: computed(() => size[props.size]),
 
-      indexComputed: computed(() => props.disabled ? -1 : 0),
+      tabIndexComputed: computed(() => props.disabled ? -1 : 0),
 
       computedClass: computed(() => ({
         'va-chip--small': props.size === 'small',
@@ -203,6 +206,10 @@ export default defineComponent({
   &__close-icon {
     cursor: pointer;
 
+    &:focus {
+      @include focus-outline;
+    }
+
     @at-root {
       .va-chip--disabled {
         .va-chip__close-icon {

packages/ui/src/components/va-color-indicator/VaColorIndicator.vue

@@ -1,9 +1,11 @@
 <template>
   <div
     class="va-color-indicator"
-    @click="toggleModelValue"
     :class="computedClass"
     :style="computedStyle"
+    @click="toggleModelValue"
+    @keydown.enter="toggleModelValue"
+    @keydown.space="toggleModelValue"
   >
     <div
       class="va-color-indicator__core"
@@ -73,7 +75,8 @@ export default defineComponent({
     border-color: $vue-darkest-blue;
   }
 
-  &--hoverable &__core:hover {
+  &--hoverable &__core:hover,
+  &:focus {
     transform: scale(1.1);
     transition: transform 0.1s linear;
   }

packages/ui/src/components/va-color-input/VaColorInput.vue

@@ -2,26 +2,35 @@
   <div class="va-color-input">
     <va-color-indicator
       class="va-color-input__dot"
+      role="button"
+      aria-label="open color picker"
+      :aria-disabled="$props.disabled"
+      :tabindex="tabIndexComputed"
       :color="valueComputed"
       :indicator="indicator"
       @click="callPickerDialog"
+      @keydown.space="callPickerDialog"
+      @keydown.enter="callPickerDialog"
     />
     <va-input
       class="va-color-input__input"
-      v-model="valueComputed"
-      :disabled="disabled"
       placeholder="input color"
+      v-model="valueComputed"
+      :tabindex="tabIndexComputed"
+      :disabled="$props.disabled"
     />
     <input
       ref="colorPicker"
       type="color"
       class="visually-hidden"
+      aria-hidden="true"
+      tabindex="-1"
       v-model="valueComputed" />
   </div>
 </template>
 
 <script lang="ts">
-import { defineComponent, PropType, ref } from 'vue'
+import { defineComponent, PropType, ref, computed } from 'vue'
 
 import { useStateful, useStatefulProps, useStatefulEmits } from '../../composables/useStateful'
 import VaColorIndicator from '../va-color-indicator'
@@ -36,8 +45,8 @@ export default defineComponent({
   emits: useStatefulEmits,
   props: {
     ...useStatefulProps,
-    modelValue: { type: String as PropType<string>, default: null },
-    disabled: { type: Boolean as PropType<boolean>, default: false },
+    modelValue: { type: String, default: null },
+    disabled: { type: Boolean, default: false },
     indicator: {
       type: String as PropType<'dot' | 'square'>,
       default: 'dot',
@@ -49,8 +58,9 @@ export default defineComponent({
 
     const colorPicker = ref<HTMLInputElement>()
     const callPickerDialog = () => !props.disabled && colorPicker.value?.click()
+    const tabIndexComputed = computed(() => props.disabled ? -1 : 0)
 
-    return { valueComputed, callPickerDialog, colorPicker }
+    return { valueComputed, callPickerDialog, colorPicker, tabIndexComputed }
   },
 })
 </script>
@@ -66,6 +76,7 @@ export default defineComponent({
 
   &__input {
     margin-bottom: 0;
+    margin-left: 0.25rem;
     min-width: 5.6rem;
 
     &__pointer {

packages/ui/src/components/va-color-palette/VaColorPalette.vue

@@ -1,10 +1,18 @@
 <template>
   <div class="va-color-palette">
-    <ul class="va-color-palette__colors">
+    <ul
+      class="va-color-palette__colors"
+      role="listbox"
+      aria-label="color selection"
+    >
       <va-color-indicator
         v-for="(color, index) in palette"
-        :modelValue="valueComputed === color"
         :key="index"
+        role="option"
+        :aria-label="`color ${color}`"
+        :aria-selected="isSelected(color)"
+        tabindex="0"
+        :modelValue="isSelected(color)"
         :color="color"
         :square="indicator === 'square'"
         @update:modelValue="valueComputed = color"

packages/ui/src/components/va-counter/VaCounter.vue

@@ -1,11 +1,11 @@
 <template>
   <VaInputWrapper
     class="va-counter"
+    aria-live="polite"
     v-bind="{ ...fieldListeners, ...inputWrapperPropsComputed }"
     :class="classComputed"
     :style="styleComputed"
     :focused="isFocused"
-    @click="focus()"
     @keydown.up.prevent="increaseCount()"
     @keydown.down.prevent="decreaseCount()"
   >
@@ -17,6 +17,7 @@
         <slot name="decreaseAction" v-bind="{ ...slotScope, decreaseCount }">
           <va-button
             class="va-counter__button-decrease"
+            aria-label="decrease"
             v-bind="decreaseButtonProps"
             @click="decreaseCount()"
           />
@@ -43,6 +44,7 @@
         <slot name="increaseAction" v-bind="{ ...slotScope, increaseCount }">
           <va-button
             class="va-counter__button-increase"
+            aria-label="increase"
             v-bind="increaseButtonProps"
             @click="increaseCount()"
           />
@@ -69,10 +71,12 @@
 
     <input
       v-if="!$slots.content"
-      class="va-input__content__input"
       ref="input"
+      class="va-input__content__input"
       type="number"
       inputmode="decimal"
+      :tabindex="tabIndexComputed"
+      aria-label="counter value"
       v-bind="{ ...inputAttributesComputed, ...inputListeners }"
       :value="valueComputed"
       @input="setCountInput"
@@ -153,7 +157,6 @@ export default defineComponent({
 
     const {
       isFocused,
-      // will be useful when we resolve problem with 'withConfigTransport'
       focus,
       blur,
     } = useFocus(input, emit)
@@ -205,6 +208,8 @@ export default defineComponent({
         : Number(valueComputed.value) >= props.max
     })
 
+    const tabIndexComputed = computed(() => props.disabled ? -1 : 0)
+
     const isDecreaseActionDisabled = computed(() => (
       isMinReached.value || props.readonly || props.disabled
     ))
@@ -304,22 +309,17 @@ export default defineComponent({
       decreaseButtonProps,
       increaseButtonProps,
 
+      tabIndexComputed,
+
       colorComputed,
       classComputed,
       styleComputed,
       marginComputed,
 
-      // while we have problem with 'withConfigTransport'
-      // focus,
-      // blur,
+      focus,
+      blur,
     }
   },
-
-  // we will use this while we have problem with 'withConfigTransport'
-  methods: {
-    focus () { this.input?.focus() },
-    blur () { this.input?.blur() },
-  },
 })
 </script>
 

packages/ui/src/components/va-data-table/VaDataTable.vue

@@ -1,6 +1,7 @@
 <template>
   <va-inner-loading
     class="va-data-table"
+    aria-live="polite"
     :class="[
       { 'va-data-table--sticky': $props.stickyHeader },
       { 'va-data-table--scroll': !!$props.height },
@@ -31,27 +32,31 @@
         >
           <th
             v-if="selectable"
+            scope="col"
             :class="['va-data-table__table-th', 'va-data-table__table-cell-select']"
           >
             <va-checkbox
               v-if="selectMode === 'multiple'"
+              aria-label="select all rows"
               :model-value="severalRowsSelected ? 'idl' : allRowsSelected"
               :true-value="true"
               :false-value="false"
+              :color="selectedColor"
               indeterminate-value="idl"
               indeterminate
               @update:model-value="toggleBulkSelection"
-              :color="selectedColor"
             />
           </th>
 
           <th
             v-for="column in columnsComputed"
             :key="column.key"
+            scope="col"
+            :aria-sort="getColumnAriaSortOrder(column.key)"
             :title="column.headerTitle"
-            @click.exact="column.sortable && toggleSorting(column)"
             :style="{ ...getHeaderCSSVariables(column), ...getStyles(column.headerStyle) }"
             :class="['va-data-table__table-th', ...getClasses(column.headerClasses)]"
+            @click.exact="column.sortable && toggleSorting(column)"
           >
             <div class="va-data-table__table-th-wrapper">
               <span v-if="`header(${column.key})` in $slots">
@@ -65,6 +70,7 @@
               <div
                 v-if="column.sortable"
                 class="va-data-table__table-th-sorting"
+                aria-hidden="true"
                 @selectstart.prevent
               >
                 <va-icon
@@ -131,10 +137,11 @@
             >
               <va-checkbox
                 :model-value="isRowSelected(row)"
+                :color="selectedColor"
+                :aria-label="`select row ${row.initialIndex}`"
                 @click.shift.exact="shiftSelectRows(row)"
                 @click.ctrl.exact="ctrlSelectRow(row)"
                 @click.exact="ctrlSelectRow(row)"
-                :color="selectedColor"
               />
             </td>
 
@@ -167,13 +174,14 @@
           <th v-if="selectable" class="va-data-table__table-th">
             <va-checkbox
               v-if="selectMode === 'multiple'"
+              aria-label="select all rows"
               :model-value="severalRowsSelected ? 'idl' : allRowsSelected"
               :true-value="true"
               :false-value="false"
+              :color="selectedColor"
               indeterminate-value="idl"
               indeterminate
               @update:model-value="toggleBulkSelection"
-              :color="selectedColor"
             />
           </th>
 
@@ -370,6 +378,14 @@ export default defineComponent({
       ...omit(attrs, ['class', 'style']),
     }) as TableHTMLAttributes)
 
+    const getColumnAriaSortOrder = (columnKey: string) => {
+      if (sortingOrderSync.value && sortBySync.value === columnKey) {
+        return sortingOrderSync.value === 'asc' ? 'ascending' : 'descending'
+      }
+
+      return 'none'
+    }
+
     return {
       columnsComputed,
       rows: paginatedRows,
@@ -395,6 +411,7 @@ export default defineComponent({
       componentAttributes,
       tableAttributes,
       animationName,
+      getColumnAriaSortOrder,
     }
   },
 })