feat: add aria label to selects

Author: alexdln

app/components/Select/Field.vue

@@ -22,9 +22,10 @@ const model = defineModel<string | undefined>({ default: undefined })
 export interface SelectFieldProps extends SelectBaseProps {
   items: { label: string; value: string; disabled?: boolean }[]
   size?: keyof typeof SELECT_FIELD_SIZES
-  inputAttrs?: HTMLSelectElement['attributes'] & Omit<SelectBaseProps, 'size' | 'id'>
+  selectAttrs?: Omit<SelectBaseProps, 'size' | 'id'> &
+    Record<string, string | number | boolean | undefined>
   label?: string
-  labelAttrs?: HTMLSelectElement['attributes'] & Omit<SelectBaseProps, 'size' | 'id'>
+  labelAttrs?: Record<string, string | number | boolean | undefined>
   /** Visually hide label */
   hiddenLabel?: boolean
   id: string
@@ -54,7 +55,7 @@ const props = withDefaults(defineProps<SelectFieldProps>(), {
         class="appearance-none group-hover/select:border-fg-muted"
         :class="[SELECT_FIELD_SIZES[size], block ? 'w-full' : 'w-fit']"
         v-model="model"
-        v-bind="inputAttrs"
+        v-bind="selectAttrs"
         :id="id"
       >
         <option

test/nuxt/a11y.spec.ts

@@ -2301,7 +2301,7 @@ describe('component accessibility audits', () => {
       const component = await mountSuspended(SelectField, {
         props: {
           id: 'a11y-select-3',
-          attrs: { 'aria-label': 'Disabled select' },
+          selectAttrs: { 'aria-label': 'Disabled select' },
           items: [{ label: 'Option 1', value: 'option1' }],
           disabled: true,
         },
@@ -2314,7 +2314,7 @@ describe('component accessibility audits', () => {
       const component = await mountSuspended(SelectField, {
         props: {
           id: 'a11y-select-4',
-          attrs: { 'aria-label': 'Small select' },
+          selectAttrs: { 'aria-label': 'Disabled select' },
           items: [{ label: 'Option 1', value: 'option1' }],
           size: 'sm',
         },