Open code, practice, and notes →
Download source with English comments · for reading
SVG · 14 DOM Interaction
Series contents · Technology map
Stage: Styles, Effects, and DOM Input · Editable example · Storage ID: svg-02
Goals and learning outcomes
- Select the same item with keyboard and pointer.
- Distinguish focus indicators from selection indicators.
Prerequisites
Prerequisite concepts: Inverse matrix, Composing transforms. Prepare the result files and observation records from Unit 13.
Key concepts and explanations
Shared selection state
SVG elements are event targets, but you must define what selection means. Pointer input and HTML buttons produce consistent results when they share the same id state.
Keyboard path
A visual path alone does not provide button behavior. A list of native buttons reliably connects keyboard interaction with accessible names.
Practice setup
The existing built-in example provides only a starting point. It does not implement all the extended requirements. Implement this yourself in an HTML and ES module project on a separate local HTTP development server. Record the browser version, viewport, and DPR.
The linked example is a starting point. It does not implement every task below. Complete work beyond its supported scope in a separate project.
Practice tasks
- Prepare day-14.js and index.html in an external practice project. Read the existing svg-02 example and build a node map with a corresponding list of HTML button elements.
- Connect click and button activation to selectNode(id), and update the selection border, description, and aria-pressed.
- Save the output under the input condition Click a node, then run again with Tab and Enter. Compare the hypothesis, "The same node id and description are selected," against the display and logs, and record the actual result and the causes of any differences in day-14-notes.md.
Variables to observe
| Variable | Baseline | Change | Expected change / hypothesis |
|---|---|---|---|
| Input path | Click a node | Tab and Enter | The same node id and description are selected |
Predictions in this table are not measured results. Change one condition at a time and record why the actual result differs.
Completion criteria
- Select the same item with keyboard and pointer.
- Distinguish focus indicators from selection indicators.
Self-check
- Why can selection state and focus state differ?
- Where should focus move when a node is deleted?
Official references
Linked example and execution scope
Example source · Runtime environments and limits
Source code and records are not overwritten automatically. Resetting an existing example also preserves your notes.
Next learning
Previous: Screen Coordinates to SVG · Next: Accessible Names and Descriptions