fix(select,slider,textarea,passwordtoggle): auto generate id

canonical · Jan 19, 2024 · 0d44c0f · 0d44c0f
1 parent ffd122e
commit 0d44c0f
Show file tree

Hide file tree

Showing 9 changed files with 30 additions and 15 deletions.
diff --git 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
   <Story name="Success">
     <PasswordToggle
       success="Strong password"
-      id="examplePassword3"
+      id="examplePassword4"
       label="Password"
       defaultValue="password"
     />
@@ -67,7 +67,7 @@ It can be used when an input needs to obscure its value, whilst giving the user
   <Story name="Caution">
     <PasswordToggle
       caution="Weak password"
-      id="examplePassword4"
+      id="examplePassword5"
       label="Password"
       defaultValue="password"
     />
@@ -80,7 +80,7 @@ It can be used when an input needs to obscure its value, whilst giving the user
   <Story name="Help">
     <PasswordToggle
       help="Enter a secure password"
-      id="examplePassword5"
+      id="examplePassword6"
       label="Password"
     />
   </Story>
@@ -92,7 +92,7 @@ It can be used when an input needs to obscure its value, whilst giving the user
   <Story name="Disabled">
     <PasswordToggle
       disabled
-      id="examplePassword6"
+      id="examplePassword7"
       label="Password"
       defaultValue="password"
     />

diff --git 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(<PasswordToggle error="Uh oh!" id="test-id" label="password" />);
-    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
@@ -89,6 +89,8 @@ const PasswordToggle = React.forwardRef<HTMLInputElement, Props>(
     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<HTMLInputElement, Props>(
         validationId={validationId}
       >
         <div className="p-form-password-toggle">
-          <VanillaLabel forId={id} required={required}>
+          <VanillaLabel forId={passwordToggleId} required={required}>
             {label}
           </VanillaLabel>
           <Button
@@ -138,7 +140,7 @@ const PasswordToggle = React.forwardRef<HTMLInputElement, Props>(
           aria-errormessage={hasError ? validationId : null}
           aria-invalid={hasError}
           className={classNames("p-form-validation__input", className)}
-          id={id}
+          id={passwordToggleId}
           readOnly={readOnly}
           ref={ref}
           type={isPassword ? "password" : "text"}

diff --git a/src/components/Select/Select.test.tsx b/src/components/Select/Select.test.tsx
@@ -55,7 +55,9 @@ describe("Select", () => {
 
   it("can display an error", async () => {
     render(<Select error="Uh oh!" />);
-    expect(screen.getByRole("combobox")).toHaveErrorMessage("Error: Uh oh!");
+    expect(screen.getByRole("combobox")).toHaveAccessibleErrorMessage(
+      "Error: Uh oh!"
+    );
   });
 
   it("can display help", async () => {

diff --git a/src/components/Select/Select.tsx b/src/components/Select/Select.tsx
@@ -105,6 +105,8 @@ const Select = ({
 }: Props): JSX.Element => {
   const selectRef = useRef(null);
   const validationId = useId();
+  const defaultSelectId = useId();
+  const selectId = id || defaultSelectId;
   const helpId = useId();
   const hasError = !!error;
 
@@ -119,7 +121,7 @@ const Select = ({
       caution={caution}
       className={wrapperClassName}
       error={error}
-      forId={id}
+      forId={selectId}
       help={help}
       helpId={helpId}
       isSelect={true}
@@ -137,7 +139,7 @@ const Select = ({
         aria-errormessage={hasError ? validationId : null}
         aria-invalid={hasError}
         className={classNames("p-form-validation__input", className)}
-        id={id}
+        id={selectId}
         onChange={(evt) => onChange && onChange(evt)}
         ref={selectRef}
         {...selectProps}

diff --git a/src/components/Slider/Slider.test.tsx b/src/components/Slider/Slider.test.tsx
@@ -35,7 +35,9 @@ describe("Slider", () => {
         error="Uh oh!"
       />
     );
-    expect(screen.getByRole("slider")).toHaveErrorMessage("Error: Uh oh!");
+    expect(screen.getByRole("slider")).toHaveAccessibleErrorMessage(
+      "Error: Uh oh!"
+    );
   });
 
   it("can display help", async () => {

diff --git a/src/components/Slider/Slider.tsx b/src/components/Slider/Slider.tsx
@@ -80,6 +80,8 @@ export const Slider = ({
 }: Props): JSX.Element => {
   const validationId = useId();
   const helpId = useId();
+  const defaultSliderId = useId();
+  const sliderId = id || defaultSliderId;
   const hasError = !!error;
   let style = {};
   if (navigator?.userAgent?.includes("AppleWebKit")) {
@@ -102,6 +104,7 @@ export const Slider = ({
       caution={caution}
       error={error}
       help={help}
+      forId={sliderId}
       helpId={helpId}
       label={label}
       required={required}
@@ -113,7 +116,7 @@ export const Slider = ({
           aria-errormessage={hasError ? validationId : null}
           aria-invalid={hasError}
           disabled={disabled}
-          id={id}
+          id={sliderId}
           max={max}
           min={min}
           onChange={onChange}

diff --git a/src/components/Textarea/Textarea.test.tsx b/src/components/Textarea/Textarea.test.tsx
@@ -32,7 +32,9 @@ describe("Textarea ", () => {
 
   it("can display an error for a text input", async () => {
     render(<Textarea error="Uh oh!" />);
-    expect(screen.getByRole("textbox")).toHaveErrorMessage("Error: Uh oh!");
+    expect(screen.getByRole("textbox")).toHaveAccessibleErrorMessage(
+      "Error: Uh oh!"
+    );
   });
 
   it("can display help for a text input", async () => {

diff --git a/src/components/Textarea/Textarea.tsx b/src/components/Textarea/Textarea.tsx
@@ -91,6 +91,8 @@ const Textarea = ({
   const helpId = useId();
   const hasError = !!error;
   const [innerValue, setInnervalue] = useState(props.defaultValue);
+  const defaultTextAreaId = useId();
+  const textAreaId = id || defaultTextAreaId;
 
   useEffect(() => {
     if (takeFocus) {
@@ -114,7 +116,7 @@ const Textarea = ({
       caution={caution}
       className={wrapperClassName}
       error={error}
-      forId={id}
+      forId={textAreaId}
       help={help}
       helpId={helpId}
       label={label}
@@ -131,7 +133,7 @@ const Textarea = ({
         aria-errormessage={hasError ? validationId : null}
         aria-invalid={hasError}
         className={classNames("p-form-validation__input", className)}
-        id={id}
+        id={textAreaId}
         onKeyUp={(evt) => {
           onKeyUp && onKeyUp(evt);
         }}