Merged in fix/LOY-382-password-validation-audit (pull request #3034)

Fix/LOY-382: Refactoring + accessibility of PasswordInput

* fix(LOY-382): fix password accessibility issues

* chore(LOY-382): refactor & add accessibility

* refactor(LOY-382)


Approved-by: Erik Tiekstra

packages/design-system/lib/components/Icons/MaterialIcon/MaterialIcon.tsx

@@ -3,9 +3,11 @@ import { MaterialSymbol, type MaterialSymbolProps } from './MaterialSymbol'
 import { iconVariants } from '../variants'
 
 import type { VariantProps } from 'class-variance-authority'
+import { HTMLAttributes } from 'react'
 
 export interface MaterialIconProps
   extends Pick<MaterialSymbolProps, 'size' | 'icon' | 'className' | 'style'>,
+    Omit<HTMLAttributes<HTMLSpanElement>, 'color' | 'id'>,
     VariantProps<typeof iconVariants> {
   isFilled?: boolean
 }
@@ -18,6 +20,12 @@ export function MaterialIcon({
   ...props
 }: MaterialIconProps) {
   const classNames = iconVariants({ className, color })
+  const { role, 'aria-label': ariaLabel, 'aria-hidden': ariaHidden } = props
+
+  // Automatically decide whether to hide from assistive tech
+  const computedAriaHidden =
+    ariaHidden !== undefined ? ariaHidden : ariaLabel || role ? false : true
+
   return (
     // The span is used to prevent the MaterialSymbol from being underlined when used inside a link or button
     <span>
@@ -25,8 +33,9 @@ export function MaterialIcon({
         className={classNames}
         data-testid="MaterialIcon"
         size={size}
-        {...props}
         fill={isFilled}
+        aria-hidden={computedAriaHidden}
+        {...props}
       />
     </span>
   )