search

fumeapp / tailvue

Vue components built for Nuxt3|Vue3 powered by Windi CSS|tailwindcss
157 stars 14 forks source link

`aria-live` with value `assertive` reported as invalid aria attribute by lighthouse #25

Closed favna closed 1 year ago

favna commented 1 year ago

This line causes an error during a Lighthouse analysis: https://github.com/fumeapp/tailvue/blob/567266536a0e7e4771637c1d6c1a68f8cfeb011a/src/toast.ts#L21

image

Not sure what purpose it serves, but if it's some form of reference maybe consider changing it to data-live?

acidjazz commented 1 year ago

Thanks for reporting this, can you submit a PR or show an example of change here?

favna commented 1 year ago

I'll see what I can do. I'll have to dive in more to analyse the exact use case and this particular aria attribute. It will probably be somewhere over the weekend.

favna commented 1 year ago

Looking at the HTML as rendered on https://webhooks.sapphirejs.dev the current attribute is added to the outer container, but that's not how aria-live should be used according to the description on MDN: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Live_Regions. Specifically:

ARIA live regions fill this gap and provide a way to programmatically expose dynamic content changes in a way that can be announced by assistive technologies

So keeping it on the outer container that's always visible breaks the use of aria-live. Instead, it should be on the toast itself, which actually has to draw the user's attention.

PR incoming