search

canonical / react-components

A set of components based on Vanilla Framework
https://canonical.github.io/react-components
93 stars 51 forks source link

Input does not receive focus on label click without specified ID #1011

Closed petermakowski closed 7 months ago

petermakowski commented 7 months ago

Description:

When using the Input component, clicking on the associated label does not trigger focus on the input element if no id attribute is specified for the input. The current implementation requires an id to associate the label with the input correctly.

Expected Behavior:

The Input component should automatically assign a unique id if one is not provided by the user. This ensures that the label and input elements are correctly associated, allowing for focus to be moved to the input when the label is clicked.

Actual Behavior:

Clicking on the label does not move focus to the associated input when an id is not explicitly provided. This leads to accessibility violation.

Steps to Reproduce:

  1. Import the Input component from @canonical/react-components.
  2. Render the Input component without specifying an id.
  3. Try clicking on the label.
  4. Observe that focus does not move to the input field.

Suggested Solution:

Modify the Input component to automatically generate and assign a unique id when one is not provided. This will ensure proper label-input association as per accessibility standards.

bartaz commented 7 months ago

@petermakowski It seems it was fixed for Input - would that be needed also for other input types? like select, textarea, etc?

petermakowski commented 7 months ago

Quite possibly, I haven't checked. Depends how label is implemented there (from what I've seen it's usually not a wrapper around input which means it needs an id to be associated with this input).