Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Help Making ADA Compatible #1799

Closed
ikkysleepy opened this issue Sep 15, 2024 · 6 comments · Fixed by #1820
Closed

Help Making ADA Compatible #1799

ikkysleepy opened this issue Sep 15, 2024 · 6 comments · Fixed by #1820
Assignees
Milestone

Comments

@ikkysleepy
Copy link

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
Copy link
Author

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
Copy link
Collaborator

akki-jat commented Jan 5, 2025

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

@akki-jat akki-jat self-assigned this Jan 5, 2025
@mattelen mattelen added this to the 3.2 milestone Jan 6, 2025
@ikkysleepy
Copy link
Author

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.

Image

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
Copy link
Collaborator

@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
Copy link
Author

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.

Image

@akki-jat
Copy link
Collaborator

akki-jat commented Feb 4, 2025

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.

Image

Please provide example for this

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging a pull request may close this issue.

3 participants