Baseweb: [Accessibility] Duplicate IDs are present in Input and Textarea components

[austingreendev]

• [x] I have searched the issues of this repository and believe that this is not a duplicate.

Expected Behavior

An expected behavior for a standard Input (with an associated Label) is to have a unique ID for each pairing.

Current Behavior

The current Input and Textarea components are providing a defaultProp for ID using the getBuiId utility. Since defaultProps is a static method and it isn't called on instances of the class, the ID is being duplicated across all usages.

Example of htmlFor duplication in Label:

Storybook a11y failures:

Context

I'm not too familiar with the layout of this repo, but I have a simple commit (https://github.com/austin94/baseui/commit/c39199a8745065d796eb8643de3333a8d071abcf) that includes some fixes for this issue.

It includes:

• Remove ID defaultProp from all components
• Generate a unique ID for each instance, similar to the Popover implementation
  
  
  
  • Not applied to BaseInput and TextArea since there are no associated Labels that require it
  
  
• Update snapshots and add htmlFor assertion

If any of this seems reasonable I can open a PR if wanted. Thanks 👋!

Your Environment

| Tech | Version |
| ------- | ------- |
| Base UI | master |
| React | ^16.4.0 |
| browser | Chrome |
| node.js | v9.11.1 |

Steps to Reproduce

https://baseui.netlify.com/?selectedKind=Input&selectedStory=Controlled%20and%20uncontrolled%20input&full=0&addons=1&stories=1&panelRight=0&addonPanel=REACT_STORYBOOK%2Freadme%2Fpanel

[gergelyke]

thanks a lot for reporting it @austin94 - can you open a pull request with your changes?

[austingreendev]

can you open a pull request with your changes

Will do.