cristijora / vue-tabs

Simplified bootstrap tabs
https://cristijora.github.io/vue-tabs/#/
MIT License
251 stars 72 forks source link

Aria attribute issue #54

Open mturnbu opened 5 years ago

mturnbu commented 5 years ago

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: `

Lorem ipsum dolor

<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>

`

Example in output code:

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

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