Skip to content

Aria attribute issue #54

@mturnbu

Description

@mturnbu

I'm getting an 'invalid aria attribute' when I use an accessibility checker.

The tab ids, and corresponding aria attributes have spaces when my title has a space, eg. 'Second tab'. Ideally spaces should be stripped. Alternatively the user could be allowed to send in a prop to use for aria if this would be simpler to implement.

Input code:
<vue-tabs> <v-tab title="First tab"> <p>Lorem ipsum dolor </p> </v-tab> <v-tab title="Second tab"> <p>Quamquam te quidem video min</p> </v-tab> <v-tab title="Third tab"> <p>Quicquid porro animo cernimus, id omne oritur a sensibus; Quis ist</p> </v-tab> </vue-tabs>

Example in output code:

id="t-Second tab" aria-controls="p-Second tab" 

id="p-First tab" aria-labelledby="t-First tab"

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions