mirror of
https://github.com/priyanshujain/sanderling.git
synced 2026-10-02 19:17:10 +00:00
pj
f3096d195b
every control on the page is an <li role="option">, the shape the replay ui gives its step rows, and the spec carries no action of its own: the property firing is the evidence the default enumeration offered a tap on one.
30 lines
974 B
HTML
30 lines
974 B
HTML
<!doctype html>
|
|
<html>
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<title>aria roles</title>
|
|
</head>
|
|
<body>
|
|
<!-- Shaped like the replay UI's step list: the rows are the only controls on
|
|
the page, and they are plain <li> elements carrying role="option". A tap
|
|
target set that reads element names and role="button" alone sees nothing
|
|
here at all. -->
|
|
<ol id="steps" role="listbox" aria-label="Steps">
|
|
<li id="step-1" role="option">step 1</li>
|
|
<li id="step-2" role="option">step 2</li>
|
|
<li id="step-3" role="option">step 3</li>
|
|
</ol>
|
|
<div id="selected">0</div>
|
|
<script>
|
|
let selections = 0;
|
|
const display = document.getElementById("selected");
|
|
for (const row of document.querySelectorAll('[role="option"]')) {
|
|
row.addEventListener("click", function () {
|
|
selections += 1;
|
|
display.textContent = String(selections);
|
|
});
|
|
}
|
|
</script>
|
|
</body>
|
|
</html>
|