carbon-components-angular icon indicating copy to clipboard operation
carbon-components-angular copied to clipboard

ibm-label is added to div incorrectly

Open makandre opened this issue 2 years ago • 0 comments

Detailed description

Describe in detail the issue you're having.

I'm putting a div in ibm-label (which itself contains a textarea input). Based on what I see here, this is supported. However, when doing this the ID of input field is added to the div instead of the textarea.

This has some problems:

  • accessibility checker will flag that the ID of the label's for attribute is not on a valid input element
  • if ID is added to textarea by other means, it is duplicate with the ID on the div
  • also the label and its associated input field are not siblings, which may also be an accessibility problem

Is this a feature request (new component, new icon), a bug, or a general issue?

bug

Is this issue related to a specific component?

ibm-label

What did you expect to happen? What happened instead? What would you like to see changed?

ID is added to the correct input element, and also the label and input element should be siblings to avoid other potential accessibility problems. Otherwise div should not be supported.

What browser are you working in?

Mainly Chrome

What version of the Carbon Design System are you using?

"carbon-components-angular": "^4.58.3"

What offering/product do you work on? Any pressing ship or release dates we should be aware of?

IBM ADDI

Steps to reproduce the issue

  1. Step one
  2. Step two
  3. Step three
  4. etc.

Additional information

  • Screenshots or code
  • Notes

makandre avatar Jun 06 '22 13:06 makandre