Loading challenge...
Interactive SVG Map
Click region paths on an inline SVG map located by their title accessible name, not visible text
What you will learn
- Resolve SVG sub-elements by their <title> accessible name rather than text content
- Recognize that <use href="#sym"> renders no queryable markup of its own
- Click the path element directly instead of relying on transformed pixel coordinates
Interactive SVG Map
Click a region path to select it — each region's accessible name comes from a child <title>, and a <g transform> offsets the geometry so pixel clicks land in the wrong place
The map is a single inline <svg> with four <path> regions wrapped in a translated <g transform>. Each path carries a child <title> (its accessible name) and a data-region attribute.
The compass marker in the centre is drawn via <use href="#icon-sym">, so the visible icon has no markup of its own to query.
Select a Region
Click any province on the map
Selected region: None
Testing Tips
Automation hints
- ✓ The accessible name lives in each region's
<title>— resolve a path withpage.getByTitle("Northern Province")or by ARIA name, not by visible text (there is none) - ✓ The centre compass is a
<use href="#icon-sym">instance — it has no shapes of its own to query; only the<symbol id="icon-sym">in<defs>holds the geometry - ✓ A parent
<g transform>offsets the geometry, so a coordinate-based click can miss — click the<path>element itself, e.g.[data-region='north'] - ✓ Assert selection via
#selected-region(its text is the capitalized name) and the active path'saria-pressed="true"
