Skip to content

a11y: add aria-hidden to decorative SVGs throughout index.html #78

@comnam90

Description

@comnam90

Summary

The map UI contains ~15+ inline SVG icons that are decorative (convey no information beyond their adjacent text or context) but are missing aria-hidden=\"true\". This means screen readers may announce them, producing noise for assistive technology users.

Affected locations

All in layouts/index.html:

Line Element Fix
597 Search input magnifier icon aria-hidden="true"
620 Multiselect chevron aria-hidden="true"
644 Region count pin icon aria-hidden="true"
652 Reset filters X icon aria-hidden="true"
659, 662, 665 Theme toggle icons (iconSystem, iconLight, iconDark) aria-hidden="true"
671 Info button question-mark icon aria-hidden="true"
684 Loading spinner SVG aria-hidden="true"
695 Error state warning icon aria-hidden="true"
718 Close info panel X icon aria-hidden="true"
726, 763, 772, 781, 790 Info panel section icons and external link arrows aria-hidden="true"

Acceptance criteria

  • All decorative SVGs in layouts/index.html have aria-hidden="true"
  • No SVG that is the sole label for a control is hidden (e.g. icon-only buttons must keep their aria-label)
  • npm run test:ui passes

Notes

This is a pure HTML attribute addition — no logic changes required. Good scope for a first contribution.

Metadata

Metadata

Assignees

No one assigned

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions