feat(table): support w3c WAI-ARIA (a11y) pattern

packages/docs/components/Loading.md

@@ -45,7 +45,8 @@
 | iconSpin   | Enable spin effect on icon                                                                                                                                                          | boolean          | -                          | <div><small>From <b>config</b>:</small></div><code style='white-space: nowrap; padding: 0;'>loading: {<br>&nbsp;&nbsp;iconSpin: true<br>}</code>     |
 | label      | Notification label, unnecessary when default slot is used.                                                                                                                          | string           | -                          |                                                                                                                                                      |
 | override   | Override existing theme classes completely                                                                                                                                          | boolean          | -                          |                                                                                                                                                      |
-| scroll     | Use `clip` to remove the body scrollbar, `keep` to have a non scrollable scrollbar to avoid shifting background,<br/>but will set body to position fixed, might break some layouts. | "clip" \| "keep" | `keep`, `clip`             | <div><small>From <b>config</b>:</small></div><code style='white-space: nowrap; padding: 0;'>modal: {<br>&nbsp;&nbsp;scroll: "keep"<br>}</code>       |
+| role       | Role attribute to be passed to the div wrapper for better accessibility                                                                                                             | string           | -                          | <div><small>From <b>config</b>:</small></div><code style='white-space: nowrap; padding: 0;'>loading: {<br>&nbsp;&nbsp;role: "dialog"<br>}</code>     |
+| scroll     | Use `clip` to remove the body scrollbar, `keep` to have a non scrollable scrollbar to avoid shifting background,<br/>but will set body to position fixed, might break some layouts. | "clip" \| "keep" | `keep`, `clip`             | <div><small>From <b>config</b>:</small></div><code style='white-space: nowrap; padding: 0;'>loading: {<br>&nbsp;&nbsp;scroll: "keep"<br>}</code>     |
 
 ### Events
 

packages/oruga/src/components/autocomplete/Autocomplete.vue

@@ -10,7 +10,9 @@ import {
     triggerRef,
     watchEffect,
     useTemplateRef,
+    toValue,
     type Component,
+    type MaybeRefOrGetter,
 } from "vue";
 
 import OInput from "../input/Input.vue";
@@ -27,11 +29,11 @@ import {
     toOptionsList,
     findOption,
     checkOptionsEmpty,
-    firstValidOption,
+    firstViableOption,
     filterOptionsItems,
     useInputHandler,
     useEventListener,
-    isOptionValid,
+    isOptionViable,
     useSequentialId,
 } from "@/composables";
 
@@ -224,11 +226,23 @@ const groupedOptions = computed<OptionsGroupItem<T>[]>(() => {
  */
 watchEffect(() => {
     // filter options by input value
-    filterOptionsItems(groupedOptions, inputValue, props.filter);
+    filterOptionsItems(groupedOptions, (o) => filterItems(o, inputValue));
     // trigger reactive update of groupedOptions
     triggerRef(groupedOptions);
 });
 
+function filterItems(
+    option: OptionsItem<T>,
+    value: MaybeRefOrGetter<string>,
+): boolean {
+    if (typeof props.filter === "function")
+        return props.filter(option.value, toValue(value));
+    else
+        return !String(option.label)
+            .toLowerCase()
+            .includes(toValue(value)?.toLowerCase());
+}
+
 // set initial inputValue if selected is given
 if (selectedValue.value) {
     const selectedOption = findOption(groupedOptions, selectedValue);
@@ -361,7 +375,7 @@ function setHovered(option: OptionsItem<T> | SpecialOption | undefined): void {
 
 /** set first option as hovered */
 function hoverFirstOption(): void {
-    const option = firstValidOption(groupedOptions);
+    const option = firstViableOption(groupedOptions);
     // set found option or undefined hovered
     setHovered(option);
 }
@@ -372,7 +386,7 @@ function hoverFirstOption(): void {
  * Arrows keys listener.
  * If dropdown is active, set hovered option, or else just open.
  */
-function navigateItem(direction: 1 | -1): void {
+function navigateItem(delta: 1 | -1): void {
     if (!dropdownRef.value?.$content) return;
     if (!isActive.value) {
         isActive.value = true;
@@ -383,7 +397,7 @@ function navigateItem(direction: 1 | -1): void {
     const options: OptionsItem<T>[] = toOptionsList(groupedOptions);
     // filter only avaibale options
     const availableOptions: (SpecialOption | OptionsItem<T>)[] = options.filter(
-        (o) => isOptionValid(o),
+        (o) => isOptionViable(o),
     );
 
     // item elements
@@ -401,15 +415,14 @@ function navigateItem(direction: 1 | -1): void {
 
     // define current available options index
     let index: number;
-    if (headerHovered.value) index = 0 + direction;
-    else if (footerHovered.value)
-        index = availableOptions.length - 1 + direction;
+    if (headerHovered.value) index = 0 + delta;
+    else if (footerHovered.value) index = availableOptions.length - 1 + delta;
     else {
         index =
             availableOptions.findIndex(
                 (o) =>
                     !isSpecialOption(o) && o.key === hoveredOption.value?.key,
-            ) + direction;
+            ) + delta;
     }
 
     // check if index overflow

packages/oruga/src/components/loading/Loading.vue

@@ -35,7 +35,8 @@ const props = withDefaults(defineProps<LoadingProps>(), {
     icon: () => getDefault("loading.icon", "loading"),
     iconSpin: () => getDefault("loading.iconSpin", true),
     iconSize: () => getDefault("loading.iconSize", "medium"),
-    scroll: () => getDefault("modal.scroll", "keep"),
+    scroll: () => getDefault("loading.scroll", "keep"),
+    role: () => getDefault("loading.role", "dialog"),
 });
 
 const emits = defineEmits<{
@@ -127,7 +128,7 @@ defineExpose({ close });
             v-if="isActive"
             ref="rootElement"
             data-oruga="loading"
-            role="dialog"
+            :role="role"
             :class="rootClasses">
             <div
                 :class="overlayClasses"

packages/oruga/src/components/loading/props.ts

@@ -28,6 +28,8 @@ export type LoadingProps = {
      * @values keep, clip
      */
     scroll?: "keep" | "clip";
+    /** Role attribute to be passed to the div wrapper for better accessibility */
+    role?: string;
 } & LoadingClasses;
 
 // class props (will not be displayed in the docs)