Help Making ADA Compatible

[ikkysleepy]

Reproduction Link

Steps to reproduce

<template>

<div class='col-12'>
    <label>Category</label>
   <multiselect
        v-model='form.category_id'
        :options='options'
    >
       <template #singleLabel='props'>
       <div class='mt-1'>
           <font-awesome-icon icon='tag' :color='props.option.color' />
           <span class='mx-2'>
                          <span class='option__title'>{{ props.option.name }}</span>
                        </span>
       </div>
   </template>
       <template #option='props'>
           <div class='mt-1'>
               <font-awesome-icon icon='tag' :color='props.option.color' />
               <span class='mx-2'>
                          <span class='option__title'>{{ props.option.name }}</span>
                        </span>
           </div>
       </template>
       
   </multiselect>
</div>
</template>

<script setup>
    import Multiselect from 'vue-multiselect';
    import { ref } from 'vue';
    import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
    
    const form = ref({
        category_id: {
            'name': 'Restricted',
            'id': 1,
            'value': 1,
            'color': '#FF0000',
            'is_default': false
        }
    });

    const options = [{
        'name': 'Restricted',
        'id': 1,
        'value': 1,
        'color': '#FF0000',
        'is_default': false
    }, { 'name': 'Confidential', 'id': 2, 'value': 2, 'color': '#FFA500', 'is_default': false }, {
        'name': 'Internal',
        'id': 3,
        'value': 3,
        'color': '#FFFF00',
        'is_default': true
    }, { 'name': 'Public', 'id': 4, 'value': 4, 'color': '#00FF00', 'is_default': false }];
</script>

Expected behaviour

Make ADA Compatible.

Actual behaviour

When using the WAVE Evaluation Tool Extension to test ADA compatibility I get this error:

ARIA tabindexARIAMissing form label
<input name="" type="text" autocomplete="off" spellcheck="false" placeholder="Select option" tabindex="0" class="multiselect__input" aria-controls="listbox-null" value="" style="width: 0px; position: absolute; padding: 0px;" aria-activedescendant="null-1">
<span class="multiselect__single"

[ikkysleepy]

Any update on this? I did sponsor the developer @akki-jat a few months ago but their has been no update on this.

[akki-jat]

@ikkysleepy I will look into all the accessibility issues soon.

[ikkysleepy]

Thanks for fixing the aria issues but it's still missing labels for inputs. The chrome extension WAVE still shows issues which is that some inputs have no labels.

Should I make a new issue? So the solution would be to make a label that is hidden or possible to add aria-label to the input but I have not tested without a label field.

[akki-jat]

@ikkysleepy PR is merged but we still need to release the new version. Please wait for the new version to be released.

@mattelen Please look at the new version release.

[ikkysleepy]

Great Job. Only one minor issue with the clipping. The error says Missing Form Label. Looks like it's the image upload input on clipping.

[akki-jat]

Great Job. Only one minor issue with the clipping. The error says Missing Form Label. Looks like it's the image upload input on clipping.

Please provide example for this