[A11Y] [Medium] Missing ARIA live regions for dynamic content announcements

[continue]

Accessibility Issue: Missing ARIA Live Regions for Dynamic Content

WCAG Level: A
Severity: Medium
Category: Dynamic Content

Issue Description

The application lacks aria-live regions to announce dynamic content changes to screen reader users. When content updates (form validation errors, loading states, success messages, data tables updating), these changes are not communicated to assistive technology users.

User Impact

• Affected Users: Screen reader users
• Severity: Users miss important feedback about application state changes, form validation errors, and data updates

Violations Found

Missing aria-live on form validation errors

While Angular Material's <mat-error> components are used throughout the application, the error messages may not be announced when they appear.

Files with validation errors that need announcement:

• src/app/shared/components/data-modal/is-authorized/is-authorized.component.html
• src/app/shared/components/settings/auth-settings/auth-settings.component.html
• src/app/shared/components/login/login.component.html

Missing aria-live on loading/status messages

File: src/app/app.component.html
Line: 33

<div *ngIf="!selNode.settings.themeColor" class="rtl-spinner">
  <mat-spinner color="accent" />
  <h4>Loading RTL...</h4>
</div>

Issue: Loading state not announced to screen readers

Missing aria-live on data table updates

Many data tables throughout the application update dynamically but don't announce changes.

---

Recommended Fix

For loading states:

<div *ngIf="!selNode.settings.themeColor" class="rtl-spinner" role="status" aria-live="polite">
  <mat-spinner color="accent" aria-label="Loading" />
  <h4>Loading RTL...</h4>
</div>

For form validation errors, add a live region:

<div aria-live="polite" aria-atomic="true" class="sr-only" id="form-errors">
  <ng-container *ngIf="formErrors">
    {{formErrors}}
  </ng-container>
</div>

For data table updates:

<div aria-live="polite" class="sr-only">
  {{dataSource.data.length}} items loaded
</div>

Changes Made:

1. Add aria-live="polite" to status messages
2. Add role="status" to loading indicators
3. Add live regions for form validation announcements
4. Add announcements for data table row counts

---

Additional Instances

Files that would benefit from aria-live regions:

• All modal dialogs with success/error messages
• Swap status components (src/app/shared/components/ln-services/boltz/swap-status/)
• All data tables with filtering capability
• Spinner dialog component (src/app/shared/components/data-modal/spinner-dialog/)

Testing Instructions

1. Use a screen reader (NVDA/VoiceOver)
2. Submit a form with errors - verify errors are announced
3. Navigate to a page with data loading - verify loading state is announced
4. Filter data tables - verify result count is announced
5. Complete actions (send payment, create invoice) - verify success/error announced

Resources

• WCAG 4.1.3 Status Messages
• MDN aria-live
• WebAIM ARIA Live Regions

Acceptance Criteria

• Loading states announced to screen readers
• Form validation errors announced when they appear
• Success/error messages announced
• Data table updates announced (row count, filter results)
• Tested with screen reader (NVDA/VoiceOver)

---