[Button Skeleton]: Accessibility Label Issue

Environment

Automated testing tool and ruleset IBM Automated Accessibility Testing - 2019-02 policy

Detailed description

What version of the Carbon Design System are you using? 9.77

What WCAG 2.1 checkpoint does the issue violate? H44 - “Each form control must have associated label.” https://www.w3.org/TR/WCAG20-TECHS/H44.html

Steps to reproduce the issue

Use the <ButtonSkeleton> https://codesandbox.io/s/j9gk3.

Additional information

Disclaimer I’m not an a11y expert, this was just caught by an automated scan. Normally the text inside the button serves as its label (https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/button), but for skeleton that is empty. This poses a problem, as an assistive device does not know what that button does.

https://github.com/carbon-design-system/carbon/blob/master/packages/react/src/components/Button/Button.Skeleton.js#L26

I’m wondering if we should even use the <button> tag for the skeleton? Since at that point it doesn’t do anything, would a <div> make more sense?

fyi: @beareye

[snidersd]

@dakahn Tested with DAP and confirmed that this is also an issue in v10,

[joshblack]

@keithkade just to clarify, skeletons should not contain any text content inside of them (this should be something we update in the underlying component). I believe the current requirements from IBMa derive from: https://www.ibm.com/able/guidelines/ci162/status_messages_71.html

1. Whenever one or more skeletons are used on a page the user is notified that the page is loading.
2. If the user tabs to the skeleton component they are notified of the percentage the skeleton is loaded.
3. Users are notified when the page load is complete.
4. The role=“status” and aria-live=“assertive” is on loading content.

The one thing I’d distinguish is that you won’t necessarily want a single skeleton to have a label, but instead regions/groups of skeletons should be called out. Otherwise, you end up with messages flashing for every skeleton component when instead the preferred experience is to announce the region that is loading.

Going to close this for now, feel free to comment if you feel like this guidance isn’t relevant for this use-case!