@redseed/redseed-ui-vue3 8.16.0 → 8.18.0

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@redseed/redseed-ui-vue3",
-    "version": "8.16.0",
+    "version": "8.18.0",
     "description": "RedSeed UI Vue 3 components",
     "main": "index.js",
     "repository": "https://github.com/redseedtraining/redseed-ui",

package/src/components/ButtonGroup/ButtonGroup.vue

@@ -17,7 +17,7 @@ const buttonGroupClass = computed(() => [
 
 </script>
 <template>
-<div :class="buttonGroupClass">
+<div :class="buttonGroupClass" role="group">
     <slot></slot>
 </div>
 </template>

package/src/components/ButtonGroup/ButtonGroupItem.vue

@@ -23,6 +23,8 @@ const buttonClass = computed(() => [
 <template>
 <button
     :class="buttonClass"
+    type="button"
+    :aria-pressed="selected"
     v-bind="$attrs"
     @click="$emit('click', $event)"
 >

package/src/components/Card/ButtonCard.vue

@@ -16,12 +16,22 @@ const props = defineProps({
     }
 ]"
     clickable
-    hoverable
+    :hoverable="!disabled"
     :disabled="disabled"
 >
+    <template v-if="$slots['aria-label']" #aria-label>
+        <slot name="aria-label"></slot>
+    </template>
+
     <div class="rsui-button-card__content">
         <div v-if="$slots.icon"
-            class="rsui-button-card__icon"
+            :class="[
+                'rsui-button-card__icon',
+                {
+                    'rsui-button-card__icon--disabled': disabled,
+                }
+            ]"
+            aria-hidden="true"
         >
             <slot name="icon"></slot>
         </div>

package/src/components/Card/Card.vue

@@ -115,7 +115,21 @@ function onClick() {
                 stroke-linecap="square"
             ></rect>
         </svg>
-        <div v-if="clickable" class="rsui-card__action-layer" :title="$attrs.title" @click="onClick"></div>
+        <div
+            v-if="clickable"
+            class="rsui-card__action-layer"
+            role="button"
+            :tabindex="disabled ? undefined : 0"
+            :title="$attrs.title"
+            :aria-disabled="disabled ? true : undefined"
+            @click="onClick"
+            @keydown.enter.prevent="!$event.repeat && onClick()"
+            @keydown.space.prevent="!$event.repeat && onClick()"
+        >
+            <span v-if="$slots['aria-label']" class="rsui-card__action-layer-label">
+                <slot name="aria-label"></slot>
+            </span>
+        </div>
 
         <div v-if="$slots.image"
             class="rsui-card__image"

package/src/components/Link/LinkSlot.vue

@@ -57,9 +57,13 @@ const linkLabelClass = computed(() => [
 <a
     :class="linkSlotClass"
     v-bind="$attrs"
-    @click="$emit('click', $event)"
+    :aria-disabled="props.disabled || undefined"
+    :tabindex="props.disabled ? -1 : undefined"
+    @click="props.disabled ? $event.preventDefault() : $emit('click', $event)"
 >
-    <slot name="icon"></slot>
+    <span v-if="$slots.icon" class="rsui-link-slot__icon" aria-hidden="true">
+        <slot name="icon"></slot>
+    </span>
 
     <span :class="linkLabelClass">
         <slot></slot>

package/src/components/LinkedList/LinkedListItem.vue

@@ -44,7 +44,7 @@ const statusClass = computed(() => [
 
 <template>
 <li :class="componentClass">
-    <div :class="statusClass">
+    <div :class="statusClass" aria-hidden="true">
 
         <slot name="active-icon"
             v-if="$slots['active-icon'] && isActive"

package/src/components/Table/Table.vue

@@ -1,9 +1,12 @@
 <script setup>
+import { useId } from 'vue'
 import { Card, CardHeader } from '../Card'
 import Tr from './Tr.vue'
 import Th from './Th.vue'
 import Td from './Td.vue'
 
+const titleId = useId()
+
 const props = defineProps({
     columns: {
         type: Array,
@@ -51,7 +54,7 @@ const props = defineProps({
                 <slot name="avatar"></slot>
             </template>
 
-            <slot name="title"></slot>
+            <span :id="titleId"><slot name="title"></slot></span>
 
             <template #badge v-if="$slots.badge">
                 <slot name="badge"></slot>
@@ -82,7 +85,10 @@ const props = defineProps({
         ]"
     >
         <div class="rsui-table__container">
-            <table>
+            <table
+                :aria-labelledby="showHeader && $slots.title ? titleId : undefined"
+            >
+                <caption v-if="!showHeader && $slots.title"><slot name="title"></slot></caption>
                 <thead v-if="columns">
                     <Tr>
                         <Th v-for="column in columns"

package/src/components/Table/Th.vue

@@ -4,6 +4,11 @@ import Icon from '../Icon/Icon.vue'
 import { ArrowUpIcon, ChevronUpDownIcon } from '@heroicons/vue/24/outline'
 
 const props = defineProps({
+    scope: {
+        type: String,
+        default: 'col',
+        validator: value => ['col', 'row', 'colgroup', 'rowgroup'].includes(value),
+    },
     alignment: {
         type: String,
         default: 'left',
@@ -35,6 +40,13 @@ watch(() => props.sort, () => {
     isDesc.value = props.sort === 'desc'
 })
 
+const ariaSort = computed(() => {
+    if (!sortable.value) return undefined
+    if (isAsc.value) return 'ascending'
+    if (isDesc.value) return 'descending'
+    return 'none'
+})
+
 const emit = defineEmits(['sort'])
 
 function handleSort() {
@@ -68,13 +80,19 @@ function handleSort() {
             'rsui-th--sortable': sortable,
         },
     ]"
+    :scope="scope"
+    :aria-sort="ariaSort"
+    :tabindex="sortable ? 0 : undefined"
     @click="handleSort"
+    @keydown.enter.prevent="handleSort"
+    @keydown.space.prevent="handleSort"
 >
     <div class="rsui-th__content">
         <slot></slot>
 
         <div v-if="sortable"
             class="rsui-th__sort"
+            aria-hidden="true"
         >
             <Icon v-if="!isAsc && !isDesc"
                 class="rsui-th__sort-icon"

package/src/components/Table/Tr.vue

@@ -21,7 +21,11 @@ function handleClick() {
         'rsui-tr',
         { 'rsui-tr--clickable': clickable },
     ]"
+    :role="clickable ? 'button' : undefined"
+    :tabindex="clickable ? 0 : undefined"
     @click="handleClick"
+    @keydown.enter.prevent="handleClick"
+    @keydown.space.prevent="handleClick"
 >
     <slot></slot>
 </tr>