feat: add dropdown default role menu

oruga-ui · Dec 10, 2024 · f0a5e89 · f0a5e89
1 parent e8cb2e4
commit f0a5e89
Show file tree

Hide file tree

Showing 9 changed files with 24 additions and 20 deletions.
diff --git a/packages/oruga/src/components/datepicker/tests/__snapshots__/datepicker.test.ts.snap b/packages/oruga/src/components/datepicker/tests/__snapshots__/datepicker.test.ts.snap
@@ -19,14 +19,14 @@ exports[`ODatepicker > render correctly 1`] = `
     <!--teleport start-->
     <!--v-if-->
     <transition-stub name="fade" appear="false" persisted="true" css="true">
-      <div id="v-0" tabindex="-1" class="o-drop__menu o-drop__menu--bottom-left" role="listbox" aria-hidden="true" aria-multiselectable="false" style="display: none;">
+      <div id="v-0" tabindex="-1" class="o-drop__menu o-drop__menu--bottom-left" role="menu" aria-hidden="true" style="display: none;">
         <!--
                         @slot Place dropdown items here
                         @binding {boolean} active - dropdown active state
                         @binding {number} focusedIndex - index of the focused element
                         @binding {() => void} toggle - toggle dropdown active state
                     -->
-        <div id="v-0-1" class="o-dpck__box" data-oruga="dropdown-item" data-id="dropdown-1" role="option" aria-selected="false" aria-disabled="false">
+        <div id="v-0-1" class="o-dpck__box" data-oruga="dropdown-item" data-id="dropdown-1" role="menuitem" aria-disabled="false">
           <!--
             @slot Override the label, default is label prop 
         -->

diff --git a/packages/oruga/src/components/datetimepicker/tests/__snapshots__/datetimepicker.test.ts.snap b/packages/oruga/src/components/datetimepicker/tests/__snapshots__/datetimepicker.test.ts.snap
@@ -19,14 +19,14 @@ exports[`ODatetimepicker tests > render correctly 1`] = `
     <!--teleport start-->
     <!--v-if-->
     <transition-stub name="fade" appear="false" persisted="true" css="true">
-      <div id="v-0" tabindex="-1" class="o-drop__menu o-drop__menu--bottom-left" role="listbox" aria-hidden="true" aria-multiselectable="false" style="display: none;">
+      <div id="v-0" tabindex="-1" class="o-drop__menu o-drop__menu--bottom-left" role="menu" aria-hidden="true" style="display: none;">
         <!--
                         @slot Place dropdown items here
                         @binding {boolean} active - dropdown active state
                         @binding {number} focusedIndex - index of the focused element
                         @binding {() => void} toggle - toggle dropdown active state
                     -->
-        <div id="v-0-1" class="o-dpck__box" data-oruga="dropdown-item" data-id="dropdown-1" role="option" aria-selected="false" aria-disabled="false">
+        <div id="v-0-1" class="o-dpck__box" data-oruga="dropdown-item" data-id="dropdown-1" role="menuitem" aria-disabled="false">
           <!--
             @slot Override the label, default is label prop 
         -->
@@ -332,14 +332,14 @@ exports[`ODatetimepicker tests > render correctly 1`] = `
                   <!--teleport start-->
                   <!--v-if-->
                   <transition-stub name="fade" appear="false" persisted="true" css="true">
-                    <div id="v-5" tabindex="0" class="o-drop__menu o-drop__menu--bottom-left o-drop__menu--active" role="listbox" aria-hidden="false" aria-multiselectable="false">
+                    <div id="v-5" tabindex="0" class="o-drop__menu o-drop__menu--bottom-left o-drop__menu--active" role="menu" aria-hidden="false">
                       <!--
                         @slot Place dropdown items here
                         @binding {boolean} active - dropdown active state
                         @binding {number} focusedIndex - index of the focused element
                         @binding {() => void} toggle - toggle dropdown active state
                     -->
-                      <div id="v-5-1" class="o-tpck__box" data-oruga="dropdown-item" data-id="dropdown-1" role="option" aria-selected="false" aria-disabled="false">
+                      <div id="v-5-1" class="o-tpck__box" data-oruga="dropdown-item" data-id="dropdown-1" role="menuitem" aria-disabled="false">
                         <!--
             @slot Override the label, default is label prop 
         -->

diff --git a/packages/oruga/src/components/dropdown/Dropdown.vue b/packages/oruga/src/components/dropdown/Dropdown.vue
@@ -122,6 +122,7 @@ const menuRef = ref<HTMLElement | Component>();
 const provideData = computed<DropdownComponent<T>>(() => ({
     disabled: props.disabled,
     multiple: isTrueish(props.multiple),
+    selectable: props.selectable,
     menuId: props.menuId,
     selected: vmodel.value,
     focsuedIdentifier: focusedItem.value?.identifier,
@@ -582,11 +583,13 @@ defineExpose({ $trigger: triggerRef, $content: menuRef, value: vmodel });
                     :tabindex="inline ? 0 : -1"
                     :class="menuClasses"
                     :style="menuStyle"
-                    role="listbox"
+                    :role="selectable ? 'listbox' : 'menu'"
                     :aria-labelledby="labelId"
                     :aria-label="ariaLabel"
                     :aria-hidden="!inline && (disabled || !isActive)"
-                    :aria-multiselectable="selectable && isTrueish(multiple)"
+                    :aria-multiselectable="
+                        selectable ? isTrueish(multiple) : undefined
+                    "
                     @keydown.enter.prevent="inline && onEnter($event)"
                     @keydown.space.prevent="inline && onEnter($event)"
                     @keydown.up.prevent="inline && onUpPressed($event)"

diff --git a/packages/oruga/src/components/dropdown/DropdownItem.vue b/packages/oruga/src/components/dropdown/DropdownItem.vue
@@ -102,8 +102,8 @@ const rootClasses = defineClasses(
         :class="rootClasses"
         data-oruga="dropdown-item"
         :data-id="`dropdown-${item.identifier}`"
-        role="option"
-        :aria-selected="isActive"
+        :role="parent.selectable ? 'option' : 'menuitem'"
+        :aria-selected="parent.selectable ? isActive : undefined"
         :aria-disabled="disabled"
         @click="selectItem"
         @keypress.enter="selectItem">

diff --git a/packages/oruga/src/components/dropdown/tests/__snapshots__/dropdown.test.ts.snap b/packages/oruga/src/components/dropdown/tests/__snapshots__/dropdown.test.ts.snap
@@ -2,7 +2,7 @@
 
 exports[`Dropdown tests > render correctly with items 1`] = `
 "<div data-oruga="dropdown" class="o-drop o-drop--position-bottom-left">
-  <div class="o-drop__trigger" aria-haspopup="listbox" aria-disabled="false" aria-controls="v-0">
+  <div class="o-drop__trigger" role="combobox" aria-haspopup="listbox" aria-expanded="false" aria-disabled="false" aria-controls="v-0">
     <!--
                 @slot Override the trigger element, default is label prop
                 @binding {boolean} active - dropdown active state
@@ -54,7 +54,7 @@ exports[`Dropdown tests > render correctly with options 1`] = `
   <!--teleport start-->
   <!--v-if-->
   <transition-stub name="fade" appear="false" persisted="true" css="true">
-    <div id="v-0" tabindex="-1" class="o-drop__menu o-drop__menu--bottom-left" role="listbox" aria-hidden="true" aria-multiselectable="false" style="display: none;">
+    <div id="v-0" tabindex="-1" class="o-drop__menu o-drop__menu--bottom-left" role="menu" aria-hidden="true" style="display: none;">
       <!--
                         @slot Place dropdown items here
                         @binding {boolean} active - dropdown active state
@@ -65,17 +65,17 @@ exports[`Dropdown tests > render correctly with options 1`] = `
                             @slot Place extra \`o-dropdown-item\` components here, even if you have some options defined by prop
                         -->
       <!--v-if-->
-      <div id="v-0-1" class="o-drop__item o-drop__item--clickable" data-oruga="dropdown-item" data-id="dropdown-1" role="option" aria-selected="false" aria-disabled="false">
+      <div id="v-0-1" class="o-drop__item o-drop__item--clickable" data-oruga="dropdown-item" data-id="dropdown-1" role="menuitem" aria-disabled="false">
         <!--
             @slot Override the label, default is label prop 
         -->Item 1
       </div>
-      <div id="v-0-2" class="o-drop__item o-drop__item--clickable" data-oruga="dropdown-item" data-id="dropdown-2" role="option" aria-selected="false" aria-disabled="false">
+      <div id="v-0-2" class="o-drop__item o-drop__item--clickable" data-oruga="dropdown-item" data-id="dropdown-2" role="menuitem" aria-disabled="false">
         <!--
             @slot Override the label, default is label prop 
         -->Item 2
       </div>
-      <div id="v-0-3" class="o-drop__item o-drop__item--clickable" data-oruga="dropdown-item" data-id="dropdown-3" role="option" aria-selected="false" aria-disabled="false">
+      <div id="v-0-3" class="o-drop__item o-drop__item--clickable" data-oruga="dropdown-item" data-id="dropdown-3" role="menuitem" aria-disabled="false">
         <!--
             @slot Override the label, default is label prop 
         -->Item 3

diff --git a/packages/oruga/src/components/dropdown/tests/dropdown.axe.test.ts b/packages/oruga/src/components/dropdown/tests/dropdown.axe.test.ts
@@ -30,7 +30,7 @@ describe("Dropdown axe tests", () => {
         },
         {
             title: "axe dropdown - active",
-            props: { options, active: true, ariaLabel: "accessiblle-name" },
+            props: { options, active: true },
         },
         {
             title: "axe dropdown - selectable",
@@ -72,7 +72,7 @@ describe("Dropdown axe tests", () => {
         },
         {
             title: "axe dropdown - inline",
-            props: { options, inline: true, ariaLabel: "accessiblle-name" },
+            props: { options, inline: true },
         },
         {
             title: "axe dropdown - position",

diff --git a/packages/oruga/src/components/dropdown/tests/dropdown.test.ts b/packages/oruga/src/components/dropdown/tests/dropdown.test.ts
@@ -59,7 +59,7 @@ describe("Dropdown tests", () => {
         };
 
         const wrapper = mount(component, {
-            props: { options: simpleOptions },
+            props: { options: simpleOptions, selectable: true },
         });
         await nextTick(); // await dropdown item rendered
 

diff --git a/packages/oruga/src/components/dropdown/types.ts b/packages/oruga/src/components/dropdown/types.ts
@@ -4,6 +4,7 @@ import type { DropdownItemProps } from "./props";
 export type DropdownComponent<T> = {
     disabled: boolean;
     multiple: boolean;
+    selectable: boolean;
     menuId: string;
     selected: T | T[] | undefined;
     focsuedIdentifier: string | undefined;

diff --git a/packages/oruga/src/components/timepicker/tests/__snapshots__/timepicker.test.ts.snap b/packages/oruga/src/components/timepicker/tests/__snapshots__/timepicker.test.ts.snap
@@ -21,14 +21,14 @@ exports[`OTimepicker tests > render correctly 1`] = `
       <div class="o-drop__overlay" tabindex="-1" style="display: none;"></div>
     </transition-stub>
     <transition-stub name="fade" appear="false" persisted="true" css="true">
-      <div id="v-0" tabindex="-1" class="o-drop__menu o-drop__menu--bottom-left" role="listbox" aria-hidden="true" aria-multiselectable="false" style="display: none;">
+      <div id="v-0" tabindex="-1" class="o-drop__menu o-drop__menu--bottom-left" role="menu" aria-hidden="true" style="display: none;">
         <!--
                         @slot Place dropdown items here
                         @binding {boolean} active - dropdown active state
                         @binding {number} focusedIndex - index of the focused element
                         @binding {() => void} toggle - toggle dropdown active state
                     -->
-        <div id="v-0-1" class="o-tpck__box" data-oruga="dropdown-item" data-id="dropdown-1" role="option" aria-selected="false" aria-disabled="false">
+        <div id="v-0-1" class="o-tpck__box" data-oruga="dropdown-item" data-id="dropdown-1" role="menuitem" aria-disabled="false">
           <!--
             @slot Override the label, default is label prop 
         -->