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)
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
inPasswordToggle
component's storybook.QA
Storybook
To see rendered examples of all react-components, run:
QA in your project
from
react-components
run:Install the resulting tarball in your project with:
QA steps
Fixes
Fixes: #1011
Extends fixes applied in commit a88e811 (PR #1012)