Accessibility Issue: Elements must only use supported ARIA attributes

[kathirr007]

Hi,

I'm getting the following accessibility issue Elements must only use supported ARIA attributes

Following is the issue, when add searchable attribute to true getting this issue:

<input type="text" class="w-full absolute inset-0 outline-none focus:ring-0 appearance-none box-border border-0 text-base font-sans bg-white rounded pl-3.5 rtl:pl-0 rtl:pr-3.5" autocomplete="off" id="selectGroups" aria-controls="selectGroups-multiselect-options" aria-placeholder="Search for Groups" aria-expanded="false" aria-multiselectable="true" role="combobox" aria-labelledby="selectGroups-assist">

@vueform/multiselect adds the following aria- attributes aria-placeholder="Search for Groups", aria-multiselectable="true". But those are not valid now. If we remove those attributes the issue will be resolved.

I've gone through the actual component code as well and found where the issue is

The following is the place when the searchable attribute is enabled set as true

<!-- Search -->
<template v-if="mode !== 'tags' && searchable && !disabled">
  <input
    :type="inputType"
    :modelValue="search"
    :value="search"
    :class="classList.search"
    :autocomplete="autocomplete"
    :id="searchable ? id : undefined"
    @input="handleSearchInput"
    @keypress="handleKeypress"
    @paste.stop="handlePaste"
    ref="input"

    :aria-controls="ariaControls"
    :aria-placeholder="ariaPlaceholder"
    :aria-expanded="isOpen"
    :aria-activedescendant="ariaActiveDescendant"
    :aria-multiselectable="ariaMultiselectable"
    role="combobox"

    v-bind="{
      ...attrs,
      ...arias,
    }"
  />
</template>

And the following code for Tags with search option enabled

<!-- Actual search input -->
<input    
  v-if="searchable && !disabled"
  :type="inputType"
  :modelValue="search"
  :value="search"
  :class="classList.tagsSearch"
  :id="searchable ? id : undefined"
  :autocomplete="autocomplete"
  @input="handleSearchInput"
  @keypress="handleKeypress"
  @paste.stop="handlePaste"
  ref="input"
  
  :aria-controls="ariaControls"
  :aria-placeholder="ariaPlaceholder"
  :aria-expanded="isOpen"
  :aria-activedescendant="ariaActiveDescendant"
  :aria-multiselectable="ariaMultiselectable"
  role="combobox"

  v-bind="{
    ...attrs,
    ...arias,
  }"
/>

If we remove :aria-placeholder="ariaPlaceholder" and :aria-multiselectable="ariaMultiselectable" the issue will be resolved.

[tomsdob]

Facing the same issue, Lighthouse reports this:

[aria-*] attributes do not match their roles
Each ARIA role supports a specific subset of aria-* attributes. Mismatching these invalidates the aria-* attributes. Learn how to match ARIA attributes to their roles.

[kathirr007]

We've resolved this issue by passing aria prop with value set to null eg: :aria="{ 'aria-placeholder': null, 'aria-multiselectable': null }". This works only for the aria attributes which we want to remove. However as per the standard accessibility guidelines the aria-multiselectable should be added to the element which has the role grid, listbox, tablist, or tree. Reference: aria-multiselectable

<Multiselect class="h-9 rounded" placeholder="Page Author" id="selectAuthor" name="selectAuthor"
  v-model="selectedAuthor" :options="authorsOptions" :hideSelected="false" :searchable="true"
  :attrs="{ autocomplete: 'off' }" :aria="{ 'aria-placeholder': null, 'aria-multiselectable': null }"
  :canClear="true" :mode="'multiple'" :loading="loaders['authorsList'].showLoader"
  :classes="multiselectFiltersClasses" @change="handleFilterPages">
  <template #clear>
    <button @click="selectedAuthor = []" @keyup.enter="selectedAuthor = []"
      aria-label="Clear Selection"
      aria-roledescription="❎"
      class="multiselect-clear flex items-center justify-center px-2"><span
        class="multiselect-clear-icon"></span></button>
  </template>
  <template #option="{ option }">
    {{ option.label }}
  </template>
</Multiselect>