fix: add aria-hidden=true to decorative SVGs for a11y#86
fix: add aria-hidden=true to decorative SVGs for a11y#86Deepak8858 wants to merge 1 commit intocomnam90:developfrom
Conversation
There was a problem hiding this comment.
Pull request overview
This PR improves screen reader accessibility in the Hugo single-page map UI by hiding decorative inline SVG icons from assistive technologies via aria-hidden="true".
Changes:
- Adds
aria-hidden="true"to multiple decorative SVGs in the header controls (search icon, multiselect chevron, region count pin, reset icon, theme icons). - Adds
aria-hidden="true"to decorative SVGs in loading/error overlays and the info panel (close icon, warning icon, external-link arrows, etc.).
| <svg aria-hidden="true" class="absolute left-2.5 top-1/2 -translate-y-1/2 w-3.5 h-3.5 text-slate-400 pointer-events-none" fill="none" stroke="currentColor" viewBox="0 0 24 24"> | ||
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/> | ||
| </svg> |
There was a problem hiding this comment.
The PR/issue goal is to hide all decorative SVGs from assistive tech, but there are still several <svg> elements in layouts/index.html without aria-hidden="true" (e.g., the header logo icon around line ~580, the “Found an Issue?” link icons around ~805/~811/~818, and the SVG strings returned by getServiceIcon() around ~906+ which are injected into the popup next to text labels). Please add aria-hidden="true" to those remaining decorative SVGs so the change fully satisfies #78 and matches the PR description (“throughout”).
Added
aria-hidden="true"to decorative SVGs throughoutlayouts/index.htmlto improve accessibility for screen reader users. Decorative icons that don't convey unique information are now hidden from assistive technologies. Fixes #78