Skip to content

feat(ui): implement GAR 2027 (WCAG 2.2 AA) accessibility improvements - #1672

Merged
sofyakurilova merged 1 commit into
devfrom
a11y/2027
Oct 27, 2026
Merged

sofyakurilova merged 1 commit into
devfrom
a11y/2027

Conversation

@sofyakurilova

Copy link
Copy Markdown
Collaborator

Update components, templates, and styles across modules/ui to satisfy GAR 2027 accessibility requirements:

  • Accessibility Labels & Relationships (P0):
    • Fix broken aria-labelledby reference and associate description text via aria-describedby in settings-dropdown.
    • Fix uninterpolated aria-label expression on delete-report button.
    • Add role="button" and contextual aria-label host bindings to app-download-report-zip.
    • Associate multi-select checkbox groups and test module groups with their headings/descriptions using role="group", aria-labelledby, and aria-describedby in dynamic-form, device-qualification-from, and device-tests; remove overriding aria-label on required field errors.
    • Fix copy-pasted mat-sort-header sortActionDescription values and add accessible labels to icon-only table header columns in certificates-table and testrun-table.
    • Add aria-label attributes to start/end date range inputs in filter-dialog.
    • Add semantic list roles (role="list", role="listitem"), region labels, and contextual action menu labels ("Actions for ") in list-layout and list-item.
  • Screen Reader Updates, Focus & Keyboard Navigation (P0):
    • Change testrun-status-card live region from assertive alert to polite status and deduplicate countdown timer live announcements.
    • Add visible :focus-within outline and >= 3:1 border contrast to the custom report search input.
    • Add Escape key dismissal and aria-haspopup/aria-expanded attributes to download-options and help-tip popups, and Space key activation to role="button" links in consent-dialog.
  • Clear Purpose, Instructions, Text Alternatives & Headings (P1):
    • Replace vague "here" link text with descriptive "Google Terms of Service" and underline inline links so they do not rely on color alone.
    • Add persistent mat-hint format instructions for device form fields and date range inputs.
    • Hide decorative icons/illustrations from assistive tech (alt="", aria-hidden="true") in empty-message, side-button-menu, and profile-item.
    • Add role="heading" aria-level="2" to modal dialog titles.
  • Target Size, Contrast, Text Spacing & Responsive Reflow (P2):
    • Expand stepper indicator hit area to >= 24x24px, increase inactive border contrast, and expose aria-current="step".
    • Add tooltips for truncated report metadata values and replace fixed heights and hidden overflow with min-height and responsive reflow rules.

Update components, templates, and styles across modules/ui to satisfy
GAR 2027 accessibility requirements:
- Accessibility Labels & Relationships (P0):
  - Fix broken aria-labelledby reference and associate description text via
    aria-describedby in settings-dropdown.
  - Fix uninterpolated aria-label expression on delete-report button.
  - Add role="button" and contextual aria-label host bindings to
    app-download-report-zip.
  - Associate multi-select checkbox groups and test module groups with their
    headings/descriptions using role="group", aria-labelledby, and
    aria-describedby in dynamic-form, device-qualification-from, and
    device-tests; remove overriding aria-label on required field errors.
  - Fix copy-pasted mat-sort-header sortActionDescription values and add
    accessible labels to icon-only table header columns in certificates-table
    and testrun-table.
  - Add aria-label attributes to start/end date range inputs in filter-dialog.
  - Add semantic list roles (role="list", role="listitem"), region labels, and
    contextual action menu labels ("Actions for <name>") in list-layout and
    list-item.
- Screen Reader Updates, Focus & Keyboard Navigation (P0):
  - Change testrun-status-card live region from assertive alert to polite
    status and deduplicate countdown timer live announcements.
  - Add visible :focus-within outline and >= 3:1 border contrast to the
    custom report search input.
  - Add Escape key dismissal and aria-haspopup/aria-expanded attributes to
    download-options and help-tip popups, and Space key activation to
    role="button" links in consent-dialog.
- Clear Purpose, Instructions, Text Alternatives & Headings (P1):
  - Replace vague "here" link text with descriptive "Google Terms of Service"
    and underline inline links so they do not rely on color alone.
  - Add persistent mat-hint format instructions for device form fields and
    date range inputs.
  - Hide decorative icons/illustrations from assistive tech (alt="",
    aria-hidden="true") in empty-message, side-button-menu, and profile-item.
  - Add role="heading" aria-level="2" to modal dialog titles.
- Target Size, Contrast, Text Spacing & Responsive Reflow (P2):
  - Expand stepper indicator hit area to >= 24x24px, increase inactive border
    contrast, and expose aria-current="step".
  - Add tooltips for truncated report metadata values and replace fixed heights
    and hidden overflow with min-height and responsive reflow rules.
@sofyakurilova
sofyakurilova requested a review from hitnik October 27, 2026 12:29
@sofyakurilova sofyakurilova self-assigned this Oct 27, 2026
@sofyakurilova sofyakurilova added the a11y Fix related to accessibility label Oct 27, 2026
@sofyakurilova
sofyakurilova merged commit 10a0ffe into dev Oct 27, 2026
25 checks passed
@sofyakurilova
sofyakurilova deleted the a11y/2027 branch October 27, 2026 13:20
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

a11y Fix related to accessibility

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants