fix(progress-bar): fix label accessibility violation

[janhassel]

Fixes an accessiblity violation reported by the IBM Equal Access Accessibility Checker: A progress bar requires a label. The current implementation used a <label> element which is unsupported in combination with the target element (progress bar), because it's a <div> element. Therefore, the implemenation needs to change to use aria-labelledby instead.

Changelog

Changed

• Use <span> instead <label> for label
• Update tests

Testing / Reviewing

• Ensure the label is still shown with no visual regression
• Ensure there are no violations reported by the IBM Equal Access Accessiblity Checker

[netlify]

✔️ Deploy Preview for carbon-react-next ready!

🔨 Explore the source changes: ad3ac85

🔍 Inspect the deploy log: https://app.netlify.com/sites/carbon-react-next/deploys/612d195cdd46d60007a186f4

😎 Browse the preview: https://deploy-preview-9479--carbon-react-next.netlify.app

[netlify]

✔️ Deploy Preview for carbon-elements ready!

🔨 Explore the source changes: ad3ac85

🔍 Inspect the deploy log: https://app.netlify.com/sites/carbon-elements/deploys/612d195cac0a2d00084b1976

😎 Browse the preview: https://deploy-preview-9479--carbon-elements.netlify.app

[netlify]

✔️ Deploy Preview for carbon-components-react ready!
Built without sensitive environment variables

🔨 Explore the source changes: ad3ac85

🔍 Inspect the deploy log: https://app.netlify.com/sites/carbon-components-react/deploys/612d195cf3cb6c000815efed

😎 Browse the preview: https://deploy-preview-9479--carbon-components-react.netlify.app

[dakahn]

I don't think using a non-semantic element as a label here is the way we want to go. We should be able to either a) use a for attribute on the label to associate it with the progressbar or b) explicitly label the progress bar by wrapping it in the <Label> element.

That said I think we potentially have an Accessibility Checker bug on our hands here. In my testing I wrapped the progressbar in the label element like this

<label>A Progress Bar                                                                                                                         
    <div role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100">20
    </div>                                                 
</label>

(you can check it out yourself in this Codepen)

Which, barring some little known quirk with role="progressbar" should be clearing this error. In fact if we look at the Accessibility Tree we see the progressbar labelled correctly

@tombrunet does this track with you?

[janhassel]

@dakahn Strictly speaking, wouldn't nesting a <div> element inside a <label> element violate the HTML specification since a <div> is not considered a labelable element (which would also be true for the initial implementation with for="[div-id]")?

[tombrunet]

@dakahn label elements are only defined to work with input elements - pairing native HTML elements with native HTML elements. When using ARIA, you're expected to label them the ARIA way. I'll do a little digging to make sure something hasn't changed with recent ARIA in HTML specs, but mixing labels with non-inputs isn't valid as far as I know.

[dakahn]

@tombrunet Thanks for clarifying that makes sense -- don't know why I was mentally thinking of the progressbar as an input

@janhassel you're totally right! Ignore my previous review 👍🏾