Use role "alert" on form feedback messages when changing user password

This way, if the user is using a screen reader, they will be notified about the feedback messages as they appear.
danskernesdigitalebibliotek · Oct 13, 2023 · 7a50585 · 7a50585
1 parent f00b79c
commit 7a50585
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 2 deletions.
diff --git a/src/apps/patron-page/PatronPage.tsx b/src/apps/patron-page/PatronPage.tsx
@@ -124,7 +124,7 @@ const PatronPage: FC = () => {
           )}
           {patron && <PincodeSection changePincode={setPin} required={false} />}
           {successPinMessage && (
-            <p className="text-body-small-regular mb-8 mt-8">
+            <p className="text-body-small-regular mb-8 mt-8" role="alert">
               {successPinMessage}
             </p>
           )}

diff --git a/src/components/atoms/input/TextInput.tsx b/src/components/atoms/input/TextInput.tsx
@@ -57,7 +57,11 @@ const TextInput: FC<TextInputProps> = ({
         </div>
       )}
       {validation && (
-        <div id={`validation-${id}`} className="dpl-input__validation">
+        <div
+          id={`validation-${id}`}
+          className="dpl-input__validation"
+          role="alert"
+        >
           {validation}
         </div>
       )}