fix(select,slider,textarea,passwordtoggle): auto generate id [WD-8217]

[aaryanporwal]

Done

• This PR modifies the Select, Slider, Textarea, PasswordToggle form input components to automatically generate and assign a unique id when one is not provided. This ensures correct label-input association as per accessibility standards.

• Replace instances of soon-to-be-deprecated .toHaveErrorMessage with .toHaveAccessibleErrorMessage

• Replace duplicated id in PasswordToggle component's storybook.

QA

Storybook

To see rendered examples of all react-components, run:

yarn start

QA in your project

from react-components run:

yarn build
npm pack

Install the resulting tarball in your project with:

yarn add <path-to-tarball>

QA steps

• Import the select,slider,textarea,passwordtoggle components from @canonical/react-components.
• Render the components without specifying an id.
• Click on the label.
• Make sure that the correct form input is in focus.

Fixes

Fixes: #1011

Extends fixes applied in commit a88e811 (PR #1012)

[webteam-app]

Demo starting at https://react-components-1020.demos.haus

[edlerd]

LGTM, thanks for fixing the ids.