feat: [select-refacto] - related #384 - improve accessiblity (ARIA ta…

…gs), add zIndex prop (group-options), styling focus on error puik-input-wrapper
PrestaShopCorp · Nov 21, 2024 · 2a9aebe · 2a9aebe
1 parent 301ab81
commit 2a9aebe
Show file tree

Hide file tree

Showing 6 changed files with 15 additions and 14 deletions.
diff --git a/packages/components/select/src/group-options.ts b/packages/components/select/src/group-options.ts
@@ -2,7 +2,7 @@ import '@prestashopcorp/puik-components/group-options/style/css';
 import type GroupOptions from './group-options.vue';
 
 export interface GroupOptionsProps {
-  open?: boolean
+  zIndex?: number
 }
 
 export type GroupOptionsInstance = InstanceType<typeof GroupOptions>;
diff --git a/packages/components/select/src/group-options.vue b/packages/components/select/src/group-options.vue
@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div :style="{ 'z-index': props.zIndex }">
     <slot />
   </div>
 </template>
@@ -11,10 +11,8 @@ defineOptions({
 });
 
 const props = withDefaults(defineProps<GroupOptionsProps>(), {
-  open: true
+  zIndex: 100
 });
-
-console.log(props);
 </script>
 
 <style lang="scss">

diff --git a/packages/components/select/src/option.vue b/packages/components/select/src/option.vue
@@ -5,6 +5,9 @@
       { 'puik-option-single--selected' : isSelectedRef && !props.multiSelect},
       { 'puik-option--disabled' : props.disabled },
     ]"
+    role="option"
+    :aria-selected="isSelectedRef"
+    :aria-disabled="props.disabled"
     @click="selectOption"
   >
     <template v-if="props.multiSelect">

diff --git a/packages/components/select/src/select.ts b/packages/components/select/src/select.ts
@@ -2,7 +2,7 @@ import '@prestashopcorp/puik-components/select/style/css';
 import type Select from './select.vue';
 import type { OptionType } from './option';
 export interface SelectProps {
-  id?: string
+  id: string
   label?: string
   required?: boolean
   optional?: boolean

diff --git a/packages/components/select/src/select.vue b/packages/components/select/src/select.vue
@@ -2,8 +2,6 @@
   <div
     v-on-click-outside="closeOptions"
     class="puik-select"
-    role="listbox"
-    :aria-multiselectable="props.multiSelect"
     @keydown.esc="closeOptions"
   >
     <div
@@ -29,9 +27,11 @@
           :id="props.id"
           :class="['puik-multi-select__options-tags']"
           tabindex="0"
+          :autocomplete="props.autocomplete"
           role="combobox"
           :aria-expanded="openRef"
           :aria-controls="`dropdown-${props.id}`"
+          aria-haspopup="listbox"
           :value="JSON.stringify(selectedMultipleOptions)"
           @click.stop="toggleOptions"
           @keydown.space.prevent.stop="toggleOptions"
@@ -71,6 +71,7 @@
             role="combobox"
             :aria-expanded="openRef"
             :aria-controls="`dropdown-${props.id}`"
+            aria-haspopup="listbox"
             @click.stop="toggleOptions"
             @keydown.space.prevent.stop="toggleOptions"
             @keydown.enter.prevent.stop="toggleOptions"
@@ -103,6 +104,7 @@
         role="combobox"
         :aria-expanded="openRef"
         :aria-controls="`dropdown-${props.id}`"
+        aria-haspopup="listbox"
         @click.stop="toggleOptions"
         @keydown.space.prevent.stop="toggleOptions"
         @keydown.enter.prevent.stop="toggleOptions"
@@ -117,6 +119,7 @@
         :id="`dropdown-${props.id}`"
         class="puik-select-dropdown"
         role="listbox"
+        :aria-multiselectable="props.multiSelect"
       >
         <puik-input
           v-if="searchable"
@@ -162,12 +165,6 @@
               :option="option"
               :disabled="option[props.optionDisabledKey]"
               :multi-select="props.multiSelect"
-              role="option"
-              :aria-selected="
-                props.multiSelect
-                  ? selectedMultipleOptions.includes(option)
-                  : selectedSingleOption === option
-              "
               @select="selectOption(option)"
               @close="closeOptions"
             />

diff --git a/packages/theme/src/puik-select.scss b/packages/theme/src/puik-select.scss
@@ -70,6 +70,9 @@
       &:hover{
         @apply border border-red;
       }
+      &--focus {
+        @apply ring-4;
+      }
     }
   }
   .puik-select__container--error {