'aria-busy' props are not let through on many components

[lukpsaxo]

Provide a general summary of the issue here

we would like to provide aria-busy on grid lists, tree's, data table's etc. during the loading state, when we show skeleton loaders. Today they are not passed through.

🤔 Expected Behavior?

be able to add a aria-busy prop and have it reflect in the dom

😯 Current Behavior

it is stripped

💁 Possible Solution

add aria-busy to labelablePropNames in filterDOMProps.

If you accept I am happy to make a PR.

🔦 Context

No response

🖥️ Steps to Reproduce

NA

Version

1.9.0

What browsers are you seeing the problem on?

Chrome

If other, please specify.

No response

What operating system are you using?

NA

🧢 Your Company/Team

Saxo Bank

🕷 Tracking Issue

No response

[devongovett]

I don't think that's what aria-busy is for. aria-busy is to temporarily pause announcements to a live region. GridList is not a live region so I don't think it applies there. It can also be used when the accessibility tree is temporarily invalid, but I don't think that will be the case here either. In the case of a loading state, you would want this information to be announced. Do you have additional context about why you think this is appropriate?

[lukeapage]

My understanding is that aria busy does not have to be on a live region.
This is the case of a skeleton loader where a grid list / table is shown as a skeleton whilst the data is fetched. We do not want a screen reader to go into the table but have it pause until loading is finished.
I will send some links tomorrow but I got my understanding from googling aria busy and reading a number of posts about best practice for skeleton loaders.

[lukpsaxo]

https://medium.com/@accessibilityjillie/day-1-skeleton-loaders-accessibility-ec750fcceba7

https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Reference/Attributes/aria-busy

[devongovett]

That article is behind a paywall so I can't really see the example. But I think you wouldn't want to put the aria-busy on the skeleton itself, because that would prevent the loading state from being announced (e.g. a visually hidden text as in this example: https://design-system.agriculture.gov.au/components/skeleton/accessibility). So if the skeleton is inside a GridList/Tree/Table/etc., you wouldn't want to add aria-busy there because it would prevent its contents (the skeleton) from being announced. In fact, few screen readers even support aria-busy and the alternative recommendation is to use aria-hidden, which is also not what you want in this case: https://www.tpgi.com/short-note-on-being-busy/.

This example (https://adrianroselli.com/2020/11/more-accessible-skeletons.html) shows an interesting pattern where the skeleton is a sibling of the actual content which has aria-busy. However, then they set display: none on the aria-busy div which removes it from the accessibility tree making the aria-busy attribute useless anyway.

So while you can use it on a non-live region, I'm not really sure why you would in this case.