[Bug Report] Skeleton loaders should not have aria-busy and alert role

[phiter]

Environment

Vuetify Version: 2.2.20
Vue Version: 2.6.11
Browsers: Chrome 80.0.3987.149
OS: Windows 10

Steps to reproduce

1. Add skeleton loader on page
2. Inspect root element of the loader

Expected Behavior

It should not have aria-busy="true" and role="alert".

Actual Behavior

It does.

Reproduction Link

https://codepen.io/phiter/pen/zYGXrZY

Other comments

With the current implementation, whenever a skeleton loader is added to the page, it causes screenreaders to read "alert busy", for each loader there is.

The current usage of aria-busy for skeleton loaders is wrong.

aria-busy should not be used in the skeleton loader itself. This aria state should be used in the parent container whenever its contents are changing, which is a case where the user would use skeleton loaders.

So both these attributes should be removed from this component.

The accessibility section of skeleton docs can mention that the user should add aria-busy to a list, for example, if you start loading more items and add skeleton loaders. Then after loading ends, remove that attribute.

[aardrian]

To add more information to this bug report...

I was provided an example that not only shows the skeleton but also what happens when the content loads:
https://3708o.csb.app/

Using that and the example above I can confirm that VoiceOver with Safari 14 on macOS 11 announces alert (and each newline) when I navigate to the skeleton using the virtual cursor. JAWS does not, NVDA does not.

Part of the issue is that only JAWS (2020, but I believe back to 2018) honors aria-busy:
https://developer.paciellogroup.com/blog/2018/05/short-note-on-being-busy/

Narrator (Windows 10 Pro with Edge 87), NVDA (2020.2 with Chrome 87 and Firefox 83), TalkBack (Android 11 with Chrome 86 and Firefox 83), and VoiceOver (iOS 14, macOS 11) treat aria-busy content as any other (as in, aria-busy is completely ignored). You don't hear anything announced because there are no text nodes to announce.

This construct will not work as-is, but having an alert role (which interrupts and clears the speech buffer, pre-pending the word "alert") and aria-live="polite" (which waits until the buffer is empty) is already a very odd pairing given these two are in opposition to one another. There may have been some bug these were meant to address, but I cannot guess what it was.

Either way, given that the skeleton has no content, given that it gives screen readers no context that content is loading, and given that it announces particularly poorly in VoiceOver, I recommend replacing aria-busy with aria-hidden and possibly exposing a visually-hidden node that says content is loading (or potentially a polite live region, as offensive as that may be to some users).

[johnleider]

As far as I can tell from research, besides not having a proper aria-label, we are inline with how other frameworks implement skeleton loaders, despite mixed suggestions across the web. I'm adding aria-label to provide "Loading..." text and in lieu of using our defaults, simply overwrite the values you think would be better locally.

[KaelWD]

Testing #17073 with NVDA, it doesn't read anything at all without role=alert. aria-busy makes it say "Loading alert busy" instead of "Loading alert"