diff --git a/src/components/PasswordToggle/PasswordToggle.stories.mdx b/src/components/PasswordToggle/PasswordToggle.stories.mdx index cbcb5361a..8cb309e6e 100644 --- a/src/components/PasswordToggle/PasswordToggle.stories.mdx +++ b/src/components/PasswordToggle/PasswordToggle.stories.mdx @@ -54,7 +54,7 @@ It can be used when an input needs to obscure its value, whilst giving the user @@ -67,7 +67,7 @@ It can be used when an input needs to obscure its value, whilst giving the user @@ -80,7 +80,7 @@ It can be used when an input needs to obscure its value, whilst giving the user @@ -92,7 +92,7 @@ It can be used when an input needs to obscure its value, whilst giving the user diff --git a/src/components/PasswordToggle/PasswordToggle.test.tsx b/src/components/PasswordToggle/PasswordToggle.test.tsx index 6ebebd600..88fda3560 100644 --- a/src/components/PasswordToggle/PasswordToggle.test.tsx +++ b/src/components/PasswordToggle/PasswordToggle.test.tsx @@ -49,7 +49,7 @@ describe("PasswordToggle", () => { it("can display an error", async () => { render(); - expect(screen.getByLabelText("password")).toHaveErrorMessage( + expect(screen.getByLabelText("password")).toHaveAccessibleErrorMessage( "Error: Uh oh!" ); }); diff --git a/src/components/PasswordToggle/PasswordToggle.tsx b/src/components/PasswordToggle/PasswordToggle.tsx index 0de58497b..dc1350f8c 100644 --- a/src/components/PasswordToggle/PasswordToggle.tsx +++ b/src/components/PasswordToggle/PasswordToggle.tsx @@ -89,6 +89,8 @@ const PasswordToggle = React.forwardRef( const validationId = useId(); const helpId = useId(); const hasError = !!error; + const defaultPasswordToggleId = useId(); + const passwordToggleId = id || defaultPasswordToggleId; const togglePassword = () => { if (isPassword) { @@ -110,7 +112,7 @@ const PasswordToggle = React.forwardRef( validationId={validationId} >
- + {label}