wave-ui 4.2.0 → 4.2.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "wave-ui",
-  "version": "4.2.0",
+  "version": "4.2.2",
   "description": "A UI framework for Vue.js 3 (and 2) with only the bright side. :sunny:",
   "author": "Antoni Andre <antoniandre.web@gmail.com>",
   "homepage": "https://antoniandre.github.io/wave-ui",

package/src/wave-ui/components/w-alert.vue

@@ -1,5 +1,5 @@
 <template lang="pug">
-.w-alert(v-if="show" :class="classes")
+.w-alert(v-if="show" :role="ariaRole" aria-atomic="true" :class="classes")
   //- Add a wrapper around the content when needed.
   template(v-if="type || icon || dismiss")
     w-icon.w-alert__icon(v-if="type || icon") {{ type ? typeIcon : icon }}
@@ -8,6 +8,7 @@
     w-button.w-alert__dismiss(
       v-if="dismiss"
       @click="$emit('update:modelValue', show = false);$emit('input', false);$emit('close', false)"
+      aria-label="Dismiss"
       icon="wi-cross"
       color="inherit"
       sm
@@ -80,6 +81,11 @@ export default {
       )
     },
 
+    // error/warning demand immediate attention; success/info/plain are polite.
+    ariaRole () {
+      return (this.error || this.warning) ? 'alert' : 'status'
+    },
+
     presetSize () {
       return (
         (this.xs && 'xs') ||

package/src/wave-ui/components/w-badge.vue

@@ -6,10 +6,11 @@
       v-if="modelValue"
       :class="classes"
       :style="styles"
-      aria-atomic="true"
-      aria-label="Badge"
-      aria-live="polite"
-      role="status")
+      :aria-hidden="dot ? 'true' : undefined"
+      :aria-atomic="dot ? undefined : 'true'"
+      :aria-label="dot ? undefined : (ariaLabel || (modelValue === true ? 'Badge' : String(modelValue)))"
+      :aria-live="dot ? undefined : 'polite'"
+      :role="dot ? undefined : 'status'")
       slot(v-if="!dot" name="badge") {{ modelValue === true ? '' : (modelValue || '') }}
 </template>
 
@@ -19,6 +20,7 @@ export default {
 
   props: {
     modelValue: { default: true },
+    ariaLabel: { type: String }, // Override the default aria-label (defaults to the badge value).
     xs: { type: Boolean },
     sm: { type: Boolean },
     md: { type: Boolean },

package/src/wave-ui/components/w-breadcrumbs.vue

@@ -1,5 +1,5 @@
 <template lang="pug">
-.w-breadcrumbs(:class="classes")
+nav.w-breadcrumbs(:class="classes" aria-label="Breadcrumb")
   template(v-for="(item, i) in items")
     //- Separator.
     span.w-breadcrumbs__separator(
@@ -41,7 +41,7 @@
       :item="item"
       :index="i + 1"
       :is-last="i === items.length - 1")
-    span(v-else :key="`${i}f`" v-html="item[itemLabelKey]")
+    span(v-else :key="`${i}f`" aria-current="page" v-html="item[itemLabelKey]")
 </template>
 
 <script>

package/src/wave-ui/components/w-card.vue

@@ -2,11 +2,13 @@
 .w-card(:class="classes")
   .w-card__title(
     v-if="$slots.title"
+    :id="titleId || undefined"
     :class="{ 'w-card__title--has-toolbar': $slots.title && titleHasToolbar, ...titleClasses }")
     slot(name="title")
   .w-card__title(
     v-else-if="title"
     v-html="title"
+    :id="titleId || undefined"
     :class="{ 'w-card__title--has-toolbar': $slots.title && titleHasToolbar, ...titleClasses }")
   w-image.w-card__image(v-if="image" :src="image" v-bind="imgProps")
     slot(name="image-content")
@@ -35,6 +37,7 @@ export default {
     imageProps: { type: Object },
     titleClass: { type: [String, Object, Array] },
     contentClass: { type: [String, Object, Array] },
+    titleId: { type: String },
     dark: { type: Boolean },
     light: { type: Boolean }
   },

package/src/wave-ui/components/w-checkbox.vue

@@ -20,6 +20,7 @@ component(
     @change="onInput() /* Edge doesn't emit an `input` event on checkbox/radio/select change */"
     @keypress.enter="onInput"
     :aria-checked="isChecked || 'false'"
+    :aria-invalid="valid === false ? 'true' : undefined"
     role="checkbox")
   template(v-if="hasLabel && labelOnLeft")
     label.w-checkbox__label.w-form-el-shakable.pr2(

package/src/wave-ui/components/w-dialog.vue

@@ -20,6 +20,10 @@ w-overlay.w-dialog(
       :title-class="titleClass"
       :content-class="contentClass"
       :title="title || undefined"
+      :title-id="(title || $slots.title) ? titleId : undefined"
+      role="dialog"
+      aria-modal="true"
+      :aria-labelledby="(title || $slots.title) ? titleId : undefined"
       :style="contentStyles")
       template(#title v-if="$slots.title")
         slot(name="title")
@@ -67,6 +71,7 @@ export default {
 
   data () {
     return {
+      titleId: `w-dialog-title-${Math.random().toString(36).slice(2, 9)}`,
       showWrapper: this.modelValue,
       showContent: this.modelValue
     }

package/src/wave-ui/components/w-drawer.vue

@@ -21,6 +21,9 @@
         v-if="showDrawer"
         ref="drawer"
         :is="tag || 'aside'"
+        role="dialog"
+        :aria-modal="!noOverlay ? 'true' : undefined"
+        :aria-label="ariaLabel || undefined"
         :class="drawerClasses"
         :style="styles"
         :tabindex="noOverlay ? 0 : null"
@@ -46,6 +49,9 @@
         v-if="showDrawer"
         ref="drawer"
         :is="tag || 'aside'"
+        role="dialog"
+        :aria-modal="!noOverlay ? 'true' : undefined"
+        :aria-label="ariaLabel || undefined"
         :class="drawerClasses"
         :style="styles"
         :tabindex="noOverlay ? 0 : null"
@@ -85,6 +91,7 @@ export default {
     overlayColor: { type: String },
     overlayOpacity: { type: [Number, String, Boolean] },
     drawerClass: { type: String },
+    ariaLabel: { type: String }, // Accessible label for the drawer dialog (recommended).
     tag: { type: String, default: 'aside' },
     dark: { type: Boolean },
     light: { type: Boolean }

package/src/wave-ui/components/w-icon.vue

@@ -2,8 +2,9 @@
 component.w-icon(
   :is="tag || 'i'"
   :class="classes"
-  role="icon"
-  aria-hidden="true"
+  :role="ariaLabel ? 'img' : undefined"
+  :aria-label="ariaLabel || undefined"
+  :aria-hidden="ariaLabel ? undefined : 'true'"
   :style="readIcon() /* Always reacting to slot change when called from template. */ && styles")
   template(v-if="hasLigature") {{ icon }}
 </template>
@@ -14,6 +15,7 @@ export default {
 
   props: {
     tag: { type: String, default: 'i' },
+    ariaLabel: { type: String }, // When set, exposes the icon as role="img" with this accessible label.
     color: { type: String },
     bgColor: { type: String },
     xs: { type: Boolean },

package/src/wave-ui/components/w-input.vue

@@ -46,6 +46,7 @@ component(
         :maxlength="maxlength || null"
         :readonly="isReadonly || null"
         :aria-readonly="isReadonly ? 'true' : 'false'"
+        :aria-invalid="valid === false ? 'true' : undefined"
         :disabled="isDisabled || null"
         :required="required || null"
         :tabindex="tabindex || null"

package/src/wave-ui/components/w-menu.vue

@@ -1,5 +1,5 @@
 <template lang="pug">
-slot(name="activator")
+slot(name="activator" :is-open="detachableVisible")
 slot(v-if="!$slots.activator")
 teleport(v-if="detachableDomReady" :to="teleportTarget" :disabled="!teleportTarget")
   transition(:name="transitionName" appear @after-enter="onDetachableAfterEnter" @after-leave="onAfterLeave")
@@ -52,7 +52,7 @@ import { focusElement } from '../utils/focus'
 
 export default {
   name: 'w-menu',
-  expose: ['focus'],
+  expose: ['focus', 'computeDetachableCoords'],
   mixins: [DetachableMixin],
   inheritAttrs: false, // The attrs are only bound to the button-partial, not the root.
 

package/src/wave-ui/components/w-progress.vue

@@ -1,5 +1,13 @@
 <template lang="pug">
-.w-progress(:class="classes" :style="styles")
+.w-progress(
+  role="progressbar"
+  :aria-valuenow="progressValue > -1 ? progressValue : undefined"
+  :aria-valuemin="progressValue > -1 ? 0 : undefined"
+  :aria-valuemax="progressValue > -1 ? 100 : undefined"
+  :aria-valuetext="progressValue === -1 ? 'Loading' : undefined"
+  :aria-label="ariaLabel || undefined"
+  :class="classes"
+  :style="styles")
   //- Linear progress.
   .w-progress__progress(
     v-if="!circle"
@@ -43,6 +51,7 @@ export default {
 
   props: {
     modelValue: { type: [Number, String, Boolean], default: -1 },
+    ariaLabel: { type: String }, // Accessible name for the progress bar (e.g. 'Upload progress').
     label: { type: Boolean },
     roundCap: { type: Boolean },
     color: { type: String, default: 'primary' },

package/src/wave-ui/components/w-radio.vue

@@ -18,6 +18,7 @@ component(
     @focus="$emit('focus', $event)"
     @change="onInput($event) /* Edge doesn't emit an `input` event on checkbox/radio/select change */"
     :aria-checked="inputValue || 'false'"
+    :aria-invalid="valid === false ? 'true' : undefined"
     role="radio")
   template(v-if="hasLabel && labelOnLeft")
     label.w-radio__label.w-form-el-shakable.pr2(

package/src/wave-ui/components/w-rating.vue

@@ -7,25 +7,27 @@ component(
   @reset="$emit('update:modelValue', rating = null);$emit('input', null)"
   :class="classes")
   input(:id="inputId" :name="inputName" type="hidden" :value="rating")
-  template(v-for="i in max" :key="i")
-    slot(v-if="$slots.item" name="item" :index="i + 1")
-    button.w-rating__button(
-      :disabled="isDisabled || isReadonly"
-      @mouseenter="hover = i"
-      @mouseleave="hover = 0"
-      @click="onButtonClick(i)"
-      @focus="onFocus"
-      @blur="onBlur"
-      @keydown="onKeydown"
-      :class="buttonClasses(i)"
-      type="button"
-      :tabindex="i === 1 ? 0 : -1")
-      i.w-icon(
-        v-if="i - 1 === ~~rating && rating - ~~rating"
-        role="icon"
-        :class="`${icon} ${color}`"
-        aria-hidden="true"
-        :style="halfStarStyle")
+  div(role="group" :aria-label="ariaLabel || 'Rating'")
+    template(v-for="i in max" :key="i")
+      slot(v-if="$slots.item" name="item" :index="i + 1")
+      button.w-rating__button(
+        :disabled="isDisabled || isReadonly"
+        @mouseenter="hover = i"
+        @mouseleave="hover = 0"
+        @click="onButtonClick(i)"
+        @focus="onFocus"
+        @blur="onBlur"
+        @keydown="onKeydown"
+        :aria-label="`${i} of ${max}`"
+        :aria-pressed="(rating >= i).toString()"
+        :class="buttonClasses(i)"
+        type="button"
+        :tabindex="i === 1 ? 0 : -1")
+        i.w-icon(
+          v-if="i - 1 === ~~rating && rating - ~~rating"
+          :class="`${icon} ${color}`"
+          aria-hidden="true"
+          :style="halfStarStyle")
 </template>
 
 <script>
@@ -44,6 +46,7 @@ export default {
 
   props: {
     modelValue: {},
+    ariaLabel: { type: String }, // Accessible group label (default: 'Rating').
     max: { type: [Number, String], default: 5 },
     color: { type: String, default: 'primary' },
     bgColor: { type: String },

package/src/wave-ui/components/w-select.vue

@@ -31,7 +31,7 @@ component(
       aria-haspopup="listbox"
       :aria-expanded="showMenu ? 'true' : 'false'"
       :aria-owns="selectListId"
-      :aria-activedescendant="`${selectListId}_item-1`"
+      :aria-activedescendant="activeDescendantId"
       :class="inputWrapClasses")
       slot(name="icon-left")
         w-icon.w-select__icon.w-select__icon--inner-left(
@@ -208,7 +208,7 @@ export default {
         class: { 'w-select__selection--placeholder': !this.$slots.selection && !this.selectionString && this.placeholder },
         disabled: this.isDisabled || null,
         readonly: true,
-        ariareadonly: 'true',
+        'aria-readonly': 'true',
         tabindex: this.tabindex ?? null,
         contenteditable: this.isDisabled || this.isReadonly ? 'false' : 'true'
       }
@@ -218,6 +218,15 @@ export default {
         item => item[this.itemValueKey] !== undefined ? item[this.itemLabelKey] : (item[this.itemLabelKey] ?? item)
       ).join(', ')
     },
+
+    // Points to the focused/selected list item when the menu is open.
+    activeDescendantId () {
+      if (!this.showMenu || !this.selectListId) return undefined
+      const first = this.inputValue[0]
+      if (!first) return `${this.selectListId}_item-1`
+      const idx = this.selectItems.findIndex(item => item.value === first[this.itemValueKey] || item.value === first._value)
+      return `${this.selectListId}_item-${idx >= 0 ? idx + 1 : 1}`
+    },
     selectionHtml () {
       if (!this.inputValue.length) return this.placeholder || ''
       if (this.$slots.selection) return ''

package/src/wave-ui/components/w-spinner.vue

@@ -1,5 +1,5 @@
 <template lang="pug">
-.w-spinner(v-if="modelValue || modelValue === undefined" :class="classes" :style="styles")
+.w-spinner(v-if="modelValue || modelValue === undefined" role="status" :aria-label="ariaLabel || 'Loading'" :class="classes" :style="styles")
   span(v-if="isThreeDots")
 </template>
 
@@ -8,6 +8,7 @@ export default {
   name: 'w-spinner',
   props: {
     modelValue: {},
+    ariaLabel: { type: String }, // Accessible label announced by screen readers (default: 'Loading').
     color: { type: String, default: 'primary' },
     xs: { type: Boolean },
     sm: { type: Boolean },

package/src/wave-ui/components/w-tag.vue

@@ -9,11 +9,11 @@ span.w-tag(
   :tabindex="modelValue !== -1 && 0"
   :style="styles")
   slot
-  i(
+  button(
     v-if="closable && modelValue"
     @click.stop="$emit('update:modelValue', false);$emit('input', false)"
-    role="icon"
-    aria-hidden="true"
+    type="button"
+    aria-label="Remove"
     class="w-icon w-tag__closable wi-cross")
 </template>
 

package/src/wave-ui/components/w-textarea.vue

@@ -38,6 +38,7 @@ component(
       :cols="cols || null"
       :readonly="isReadonly || null"
       :aria-readonly="isReadonly ? 'true' : 'false'"
+      :aria-invalid="valid === false ? 'true' : undefined"
       :disabled="isDisabled || null"
       :required="required || null"
       :tabindex="tabindex || null")

package/src/wave-ui/components/w-toolbar.vue

@@ -1,5 +1,5 @@
 <template lang="pug">
-.w-toolbar(:class="classes" :style="styles")
+.w-toolbar(role="toolbar" :aria-label="ariaLabel || undefined" :class="classes" :style="styles")
   slot
 </template>
 
@@ -8,6 +8,7 @@ export default {
   name: 'w-toolbar',
 
   props: {
+    ariaLabel: { type: String }, // Accessible label for the toolbar (recommended when multiple toolbars are present).
     color: { type: String },
     bgColor: { type: String },
     absolute: { type: Boolean },

package/src/wave-ui/components/w-tooltip.vue

@@ -1,11 +1,13 @@
 <template lang="pug">
-slot(name="activator")
+slot(name="activator" :tooltip-id="tooltipInstanceId")
 slot(v-if="!$slots.activator")
 teleport(v-if="detachableDomReady" :to="teleportTarget" :disabled="!teleportTarget")
   transition(:name="transitionName" appear @after-enter="onDetachableAfterEnter" @after-leave="onAfterLeave")
     .w-tooltip(
       v-if="detachableVisible"
       ref="detachable"
+      :id="tooltipInstanceId"
+      role="tooltip"
       :key="tooltipInstanceId"
       :class="classes"
       :style="styles")