test: fix tests

oruga-ui · Dec 9, 2024 · 39c25c2 · 39c25c2
1 parent 0cbe16f
commit 39c25c2
Show file tree

Hide file tree

Showing 11 changed files with 277 additions and 130 deletions.
diff --git a/packages/oruga/src/components/autocomplete/tests/__snapshots__/autocomplete.test.ts.snap b/packages/oruga/src/components/autocomplete/tests/__snapshots__/autocomplete.test.ts.snap
@@ -2,28 +2,36 @@
 
 exports[`OAutocomplete tests > render correctly 1`] = `
 "<div data-oruga="autocomplete" class="o-drop o-drop--position-auto o-acp">
-  <div tabindex="-1" class="o-drop__trigger" aria-haspopup="listbox">
+  <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
+                @binding {T | T[]} value - the selected value
                 @binding {() => void} toggle - toggle dropdown active state
             -->
     <div data-oruga="input" class="o-input__wrapper">
-      <!--v-if--><input role="combobox" aria-autocomplete="list" aria-controls="v-0" aria-expanded="false" id="v-1" data-oruga-input="text" type="text" class="o-input" autocomplete="off">
+      <!--v-if--><input aria-autocomplete="list" aria-controls="v-0" id="v-1" data-oruga-input="text" type="text" class="o-input" autocomplete="off">
       <!--v-if-->
       <!--v-if-->
     </div>
   </div>
   <!--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--auto" style="max-height: 200px; overflow: auto; display: none;" role="listbox" aria-hidden="true" aria-modal="false">
+    <div id="v-0" tabindex="-1" class="o-drop__menu o-drop__menu--auto" style="max-height: 200px; overflow: auto; display: none;" role="listbox" aria-hidden="true" aria-multiselectable="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
                     -->
+      <!--
+                            @slot Place extra \`o-dropdown-item\` components here, even if you have some options defined by prop
+                        -->
       <!--v-if-->
+      <!--
+                            @slot Place extra \`o-dropdown-item\` components here, even if you have some options defined by prop
+                        -->
     </div>
   </transition-stub>
   <!--teleport end-->

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
@@ -2,29 +2,31 @@
 
 exports[`ODatepicker > render correctly 1`] = `
 "<div data-oruga="datepicker" class="o-dpck">
-  <div data-oruga="dropdown" class="o-drop o-tpck__dropdown o-drop--position-bottom-left" aria-modal="true">
-    <div tabindex="-1" class="o-drop__trigger" aria-haspopup="dialog">
+  <div data-oruga="dropdown" class="o-drop o-tpck__dropdown o-drop--position-bottom-left">
+    <div class="o-drop__trigger" aria-haspopup="listbox" aria-disabled="false" aria-controls="v-0">
       <!--
                 @slot Override the trigger element, default is label prop
                 @binding {boolean} active - dropdown active state
+                @binding {T | T[]} value - the selected value
                 @binding {() => void} toggle - toggle dropdown active state
             -->
       <div data-oruga="input" class="o-input__wrapper">
-        <!--v-if--><input id="v-0" data-oruga-input="text" type="text" class="o-input" autocomplete="off">
+        <!--v-if--><input id="v-1" data-oruga-input="text" type="text" class="o-input" autocomplete="off">
         <!--v-if-->
         <!--v-if-->
       </div>
     </div>
     <!--teleport start-->
     <!--v-if-->
     <transition-stub name="fade" appear="false" persisted="true" css="true">
-      <div class="o-drop__menu o-drop__menu--bottom-left" role="dialog" aria-hidden="true" aria-modal="true" style="display: none;">
+      <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;">
         <!--
                         @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 class="o-dpck__box" data-oruga="dropdown-item" data-id="dropdown-1" role="listitem" tabindex="0" aria-selected="false" aria-disabled="false">
+        <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">
           <!--
             @slot Override the label, default is label prop 
         -->
@@ -41,7 +43,7 @@ exports[`ODatepicker > render correctly 1`] = `
               </button>
               <div class="o-dpck__header__list">
                 <div class="o-ctrl-sel" data-oruga="select">
-                  <!--v-if--><select id="v-2" data-oruga-input="select" class="o-sel o-sel-arrow" autocomplete="off">
+                  <!--v-if--><select id="v-3" data-oruga-input="select" class="o-sel o-sel-arrow" autocomplete="off">
                     <!--v-if-->
                     <!--
                 @slot Override the options, default is options prop
@@ -62,7 +64,7 @@ exports[`ODatepicker > render correctly 1`] = `
                   <!--v-if-->
                 </div>
                 <div class="o-ctrl-sel" data-oruga="select">
-                  <!--v-if--><select id="v-3" data-oruga-input="select" class="o-sel o-sel-arrow" autocomplete="off">
+                  <!--v-if--><select id="v-4" data-oruga-input="select" class="o-sel o-sel-arrow" autocomplete="off">
                     <!--v-if-->
                     <!--
                 @slot Override the options, default is options 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
@@ -2,29 +2,31 @@
 
 exports[`ODatetimepicker tests > render correctly 1`] = `
 "<div data-oruga="datetimepicker" class="o-dpck o-dtpck__date">
-  <div data-oruga="dropdown" class="o-drop o-tpck__dropdown o-drop--position-bottom-left" aria-modal="true">
-    <div tabindex="-1" class="o-drop__trigger" aria-haspopup="dialog">
+  <div data-oruga="dropdown" class="o-drop o-tpck__dropdown o-drop--position-bottom-left">
+    <div class="o-drop__trigger" aria-haspopup="listbox" aria-disabled="false" aria-controls="v-0">
       <!--
                 @slot Override the trigger element, default is label prop
                 @binding {boolean} active - dropdown active state
+                @binding {T | T[]} value - the selected value
                 @binding {() => void} toggle - toggle dropdown active state
             -->
       <div data-oruga="input" class="o-input__wrapper">
-        <!--v-if--><input class="o-dtpck__date o-input" id="v-0" data-oruga-input="text" type="text" autocomplete="off">
+        <!--v-if--><input class="o-dtpck__date o-input" id="v-1" data-oruga-input="text" type="text" autocomplete="off">
         <!--v-if-->
         <!--v-if-->
       </div>
     </div>
     <!--teleport start-->
     <!--v-if-->
     <transition-stub name="fade" appear="false" persisted="true" css="true">
-      <div class="o-drop__menu o-drop__menu--bottom-left" role="dialog" aria-hidden="true" aria-modal="true" style="display: none;">
+      <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;">
         <!--
                         @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 class="o-dpck__box" data-oruga="dropdown-item" data-id="dropdown-1" role="listitem" tabindex="0" aria-selected="false" aria-disabled="false">
+        <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">
           <!--
             @slot Override the label, default is label prop 
         -->
@@ -41,7 +43,7 @@ exports[`ODatetimepicker tests > render correctly 1`] = `
               </button>
               <div class="o-dpck__header__list">
                 <div class="o-ctrl-sel" data-oruga="select">
-                  <!--v-if--><select id="v-2" data-oruga-input="select" class="o-sel o-sel-arrow" autocomplete="off">
+                  <!--v-if--><select id="v-3" data-oruga-input="select" class="o-sel o-sel-arrow" autocomplete="off">
                     <!--v-if-->
                     <!--
                 @slot Override the options, default is options prop
@@ -62,7 +64,7 @@ exports[`ODatetimepicker tests > render correctly 1`] = `
                   <!--v-if-->
                 </div>
                 <div class="o-ctrl-sel" data-oruga="select">
-                  <!--v-if--><select id="v-3" data-oruga-input="select" class="o-sel o-sel-arrow" autocomplete="off">
+                  <!--v-if--><select id="v-4" data-oruga-input="select" class="o-sel o-sel-arrow" autocomplete="off">
                     <!--v-if-->
                     <!--
                 @slot Override the options, default is options prop
@@ -325,23 +327,24 @@ exports[`ODatetimepicker tests > render correctly 1`] = `
             -->
             <div class="o-dtpck__time">
               <div data-oruga="timepicker" class="o-tpck">
-                <div data-oruga="dropdown" class="o-drop o-tpck__dropdown o-drop--inline o-drop--position-bottom-left o-drop--active" aria-modal="false">
+                <div data-oruga="dropdown" class="o-drop o-tpck__dropdown o-drop--inline o-drop--position-bottom-left o-drop--active">
                   <!--v-if-->
                   <!--teleport start-->
                   <!--v-if-->
                   <transition-stub name="fade" appear="false" persisted="true" css="true">
-                    <div class="o-drop__menu o-drop__menu--bottom-left o-drop__menu--active" role="list" aria-hidden="false" aria-modal="false">
+                    <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">
                       <!--
                         @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 class="o-tpck__box" data-oruga="dropdown-item" data-id="dropdown-1" role="listitem" tabindex="0" aria-selected="false" aria-disabled="false">
+                      <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">
                         <!--
             @slot Override the label, default is label prop 
         -->
                         <div class="" data-oruga="select">
-                          <!--v-if--><select id="v-5" data-oruga-input="select" class="o-tpck__select" autocomplete="off">
+                          <!--v-if--><select id="v-7" data-oruga-input="select" class="o-tpck__select" autocomplete="off">
                             <!--v-if-->
                             <!--
                 @slot Override the options, default is options prop
@@ -374,7 +377,7 @@ exports[`ODatetimepicker tests > render correctly 1`] = `
                           <!--v-if-->
                         </div><span class="o-tpck__separtor">:</span>
                         <div class="" data-oruga="select">
-                          <!--v-if--><select id="v-6" data-oruga-input="select" class="o-tpck__select" autocomplete="off">
+                          <!--v-if--><select id="v-8" data-oruga-input="select" class="o-tpck__select" autocomplete="off">
                             <!--v-if-->
                             <!--
                 @slot Override the options, default is options prop

diff --git a/packages/oruga/src/components/dropdown/Dropdown.vue b/packages/oruga/src/components/dropdown/Dropdown.vue
@@ -115,8 +115,8 @@ const emits = defineEmits<{
     "scroll-end": [];
 }>();
 
-const contentRef = ref<HTMLElement | Component>();
 const triggerRef = ref<HTMLElement>();
+const menuRef = ref<HTMLElement | Component>();
 
 // provided data is a computed ref to enjure reactivity
 const provideData = computed<DropdownComponent<T>>(() => ({
@@ -133,7 +133,7 @@ const { childItems } = useProviderParent<
     DropdownItemComponent<T>,
     DropdownComponent<T>
 >({
-    rootRef: contentRef,
+    rootRef: menuRef,
     data: provideData,
 });
 
@@ -195,7 +195,7 @@ const toggleScroll = usePreventScrolling(true);
 // set infinite scroll handler
 if (isClient && props.scrollable && props.checkScroll)
     useInfiniteScroll(
-        contentRef,
+        menuRef,
         () => emits("scroll-end"),
         () => emits("scroll-start"),
     );
@@ -204,7 +204,7 @@ let timer: NodeJS.Timeout | undefined;
 
 // set click outside handler
 if (isClient && props.closeOnOutside) {
-    useClickOutside(contentRef, onClickedOutside, {
+    useClickOutside(menuRef, onClickedOutside, {
         ignore: [triggerRef],
         trigger: isActive,
         passive: true,
@@ -367,7 +367,7 @@ function setFocus(item: DropdownChildItem<T>): void {
         selectItem(item.data.value, new Event("focus"));
     }
 
-    const dropdownMenu = unrefElement(contentRef);
+    const dropdownMenu = unrefElement(menuRef);
     const element = unrefElement(item.data?.$el);
     if (!dropdownMenu || !element) return;
 
@@ -504,7 +504,7 @@ const menuClasses = defineClasses(
 // #endregion --- Computed Component Classes ---
 
 /** expose functionalities for programmatic usage */
-defineExpose({ $trigger: triggerRef, $content: contentRef, value: vmodel });
+defineExpose({ $trigger: triggerRef, $content: menuRef, value: vmodel });
 </script>
 
 <template>
@@ -528,7 +528,7 @@ defineExpose({ $trigger: triggerRef, $content: contentRef, value: vmodel });
             :aria-disabled="disabled"
             :aria-controls="menuId"
             :aria-labelledby="labelId"
-            :aria-label="ariaLabel"
+            :aria-label="selectable ? ariaLabel : undefined"
             @click="onTriggerClick"
             @contextmenu="onTriggerContextMenu"
             @mouseenter="onTriggerHover"
@@ -578,15 +578,15 @@ defineExpose({ $trigger: triggerRef, $content: contentRef, value: vmodel });
                     :is="menuTag"
                     v-show="(!disabled && isActive) || inline"
                     :id="menuId"
-                    :ref="(el) => (contentRef = setContent(el))"
+                    :ref="(el) => (menuRef = setContent(el))"
                     :tabindex="inline ? 0 : -1"
                     :class="menuClasses"
                     :style="menuStyle"
                     role="listbox"
                     :aria-labelledby="labelId"
                     :aria-label="ariaLabel"
                     :aria-hidden="!inline && (disabled || !isActive)"
-                    :aria-multiselectable="isTrueish(multiple)"
+                    :aria-multiselectable="selectable && isTrueish(multiple)"
                     @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/props.ts b/packages/oruga/src/components/dropdown/props.ts
@@ -3,7 +3,7 @@ import type { OptionsPropWithGroups } from "@/composables";
 
 type ValueType<T, IsMultiple> = IsMultiple extends true ? T[] : T;
 
-export type DropdownProps<T, IsMultiple extends boolean> = {
+export type DropdownProps<T, IsMultiple extends boolean = false> = {
     /** Override existing theme classes completely */
     override?: boolean;
     /** The selected option value */