Problem
Several icon-only interactive controls in ABHA components of Common-UI are missing accessible labels and proper button semantics.
Examples include:
close dialog controls
password visibility toggle controls
Some interactive mat-icon elements are currently handling click actions directly without accessible button wrappers, which impacts keyboard navigation and screen reader usability.
Proposed Fix
Improve accessibility across ABHA-related components by:
adding meaningful aria-label attributes to icon-only controls
replacing directly clickable mat-icon interactions with accessible button mat-icon-button patterns where applicable
improving keyboard and assistive technology support for dialog and visibility controls
Examples:
aria-label="Close dialog"
aria-label="Toggle password visibility"
Expected Outcome
Improved screen reader accessibility
Better keyboard navigation support
Improved Angular Material accessibility practices
Better WCAG compliance across Common-UI components
Problem
Several icon-only interactive controls in ABHA components of Common-UI are missing accessible labels and proper button semantics.
Examples include:
close dialog controls
password visibility toggle controls
Some interactive mat-icon elements are currently handling click actions directly without accessible button wrappers, which impacts keyboard navigation and screen reader usability.
Proposed Fix
Improve accessibility across ABHA-related components by:
adding meaningful aria-label attributes to icon-only controls
replacing directly clickable mat-icon interactions with accessible button mat-icon-button patterns where applicable
improving keyboard and assistive technology support for dialog and visibility controls
Examples:
aria-label="Close dialog"
aria-label="Toggle password visibility"
Expected Outcome
Improved screen reader accessibility
Better keyboard navigation support
Improved Angular Material accessibility practices
Better WCAG compliance across Common-UI components