fix(number-input): update value of errorId for aria-labelledby on input

[jendowns]

Closes #4198

In the originating issue, aria-labelledby (which was referring the id of the error message) was always present even when there wasn't an error, causing a DAP violation.

So this PR proposes tying the errorId to the error message, since their values are connected. So if the error exists, so does the errorId -- otherwise both are null.

NOTE: in the process of looking into this, I noticed that the aria-invalid and data-invalid attributes are tied to the invalid prop & won't be updated if an invalid entry is added. I opened an issue here: #4294

Changelog

Changed

• move errorId into error message conditional logic & make it null by default

Testing / Reviewing

1. Open the NumberInput story here: https://deploy-preview-4295--carbon-components-react.netlify.com/
2. Inspect the input and confirm that there is no aria-labelledby attribute
3. Enter an invalid entry and then check the input again to confirm that this is now an aria-labelledby attribute & it correctly matches the id of the error message container.

[netlify]

Deploy preview for the-carbon-components ready!

Built with commit c0ea57c

https://deploy-preview-4295--the-carbon-components.netlify.com

[netlify]

Deploy preview for carbon-components-react failed.

Built with commit c0ea57c

https://app.netlify.com/sites/carbon-components-react/deploys/5d9fad3026a9260007fd7e07

[netlify]

Deploy preview for carbon-elements ready!

Built with commit c0ea57c

https://deploy-preview-4295--carbon-elements.netlify.com

[dakahn]

Looks like this has a DAP error -- aria-describedby still referencing an invalid error ID. But if you cause an error the violation goes away.

The id tj-input-error-id specified for WAI-ARIA property aria-describedby on element input is not valid

I'm also not seeing aria-labelledby being set on the input element when there is an error if that was the intention.

[jendowns]

@dakahn do you mind taking another look using this deployment URL? https://deploy-preview-4295--carbon-components-react.netlify.com/

In my testing instructions, I put the link to the published storybook, not the one for my PR deployment 😅 I fixed that link now

[dakahn]

Tested on Chrome latest using current DAP ruleset and looks 👍

[asudoh]

LGTM 👍 - Thanks @jendowns!

[snidersd]

@dakahn After running DAP on the deployment URL (https://deploy-preview-4295--carbon-components-react.netlify.com/), I'm seeing a new DAP error. "the accessible name must match or contain the visible label text.". Can you check? (see screenshot)

[dakahn]

Just checked again @snidersd using the September 2019 ruleset on Chrome
https://deploy-preview-4295--carbon-components-react.netlify.com/

Using that deploy preview link I don't have that error 😕

[snidersd]

@dakahn Are you using the IBM Accessibility WCAG 2.1 September 2019 ruleset or IBM Accessibility September 2019? I'm seeing the issue using WCAG 2.1.

[emyarod]

I have the same error ("Accessible name must match or contain the visible label text") when testing with the same ruleset