#2326 Accessibility Violations in Common Properties Controls without Label

[srikant-ch5]

Fixes: #2326

Developer's Certificate of Origin 1.1

   By making a contribution to this project, I certify that:

   (a) The contribution was created in whole or in part by me and I
       have the right to submit it under the Apache License 2.0; or

   (b) The contribution is based upon previous work that, to the best
       of my knowledge, is covered under an appropriate open source
       license and I have the right under that license to submit that
       work with modifications, whether created in whole or in part
       by me, under the same open source license (unless I am
       permitted to submit under a different license), as indicated
       in the file; or

   (c) The contribution was provided directly to me by some other
       person who certified (a), (b) or (c) and I have not modified
       it.

   (d) I understand and agree that this project and the contribution
       are public and that a record of the contribution (including all
       personal information I submit with it, including my sign-off) is
       maintained indefinitely and may be redistributed consistent with
       this project or the open source license(s) involved.

[srikant-ch5]

Hi @matthoward366

I have removed below condition from control-item.
this.props.control.labelVisible !== false

This is will allow Control Item to have a label so that screen reader is able to read even in case of label_visible: false.
Allowed Carbon to take control of hiding the label using hideLabel prop, after implementing this solution there is no violation for control with no label. Please let me know whether this solution would work or I need to look into other alternatives ?

Below is the control element with above condition.

Below is the control element without above condition.

[matthoward366]

This seems fine as long as all controls are covered by this.

[srikant-ch5]

This seems fine as long as all controls are covered by this.

Changed the approach by including display: none for label_visible: false control and include aria-label in the controls to resolve violations.

[srikant-ch5]

@matthoward366 could you please have a look at this PR ?

Reason for not including aria-label=this.props.control?.label?.text for visible label is it control.label.text should be appended with required or optional indicators. This flagged another violation of label mismatch with aria-label, so assigned null instead.