fix(auth): accessibility and safety improvements to password reset page

- Add aria-label to password visibility toggle reflecting show/hide state
- Add sr-only aria-live region for confirm field match status
- Replace dangerouslySetInnerHTML with plain React child for special
  characters text; use Js::from() in blade template to safely serialize
  the value without HTML entity encoding
- Update password_min_length default from 8 to 10 to match policy

Author: mulldug

config/auth.php

@@ -100,7 +100,7 @@
 
     // in seconds
     'password_reset_lifetime' => env('AUTH_PASSWORD_RESET_LIFETIME', 1800),
-    'password_min_length' => env('AUTH_PASSWORD_MIN_LENGTH', 8),
+    'password_min_length' => env('AUTH_PASSWORD_MIN_LENGTH', 10),
     'password_max_length' => env('AUTH_PASSWORD_MAX_LENGTH', 30),
     'password_allowed_special_characters' => env('AUTH_PASSWORD_ALLOWED_SPECIAL_CHARACTERS', '[A-Za-z0-9#?!@$%^&*+-]'),
     'password_allowed_special_characters_text' => env('AUTH_PASSWORD_ALLOWED_SPECIAL_CHARACTERS_TEXT', '#?!@$%^&*+-'),

resources/js/reset_password/reset_password.js

@@ -152,6 +152,7 @@ const ResetPasswordPage = ({
                                     onClick={() => setShowPassword(!showPassword)}
                                     edge="end"
                                     size="small"
+                                    aria-label={showPassword ? "Hide password" : "Show password"}
                                 >
                                     {showPassword ? <VisibilityOff /> : <Visibility />}
                                 </IconButton>
@@ -195,6 +196,14 @@ const ResetPasswordPage = ({
                                         ? <CheckCircle style={{ color: '#2e7d32' }} />
                                         : <Cancel style={{ color: '#c62828', opacity: 0.6 }} />
                                 }
+                                <span className={styles.sr_only} aria-live="polite">
+                                    {!formik.values.password_confirmation
+                                        ? ""
+                                        : formik.values.password_confirmation === formik.values.password && formik.values.password
+                                            ? "Passwords match"
+                                            : "Passwords do not match"
+                                    }
+                                </span>
                             </InputAdornment>
                         )
                     }}
@@ -208,7 +217,7 @@ const ResetPasswordPage = ({
                     <li key={index}>{item}</li>
                   ))}
                 </ul>
-                <p className={styles.password_characters}>Allowed: <span dangerouslySetInnerHTML={{ __html: passwordPolicy.allowed_special_characters_text}} /></p>
+                <p className={styles.password_characters}>Allowed: <span>{passwordPolicy.allowed_special_characters_text}</span></p>
               </Grid>
               <Grid item container alignItems="center" justifyContent="center">
                 <Grid container item justify='center'>

resources/js/reset_password/reset_password.module.scss

@@ -80,6 +80,18 @@
 
   }
 
+  .sr_only {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    white-space: nowrap;
+    border: 0;
+  }
+
   .help_link {
     margin: 1.5rem 0 0;
     text-align: center;

resources/views/auth/passwords/reset.blade.php

@@ -24,7 +24,7 @@
             max_length: {{ Config::get("auth.password_max_length") }},
             shape_pattern: '{{ Config::get("auth.password_shape_pattern") }}',
             allowed_special_characters: '{{ Config::get("auth.password_allowed_special_characters") }}',
-            allowed_special_characters_text: '{{ Config::get("auth.password_allowed_special_characters_text") }}',
+            allowed_special_characters_text: {{ Illuminate\Support\Js::from(Config::get("auth.password_allowed_special_characters_text")) }},
             shape_warning: '{{ Config::get("auth.password_shape_warning") }}',
             shape_list: '{{ Config::get("auth.password_shape_list") }}'
         }