mirror of
https://github.com/priyanshujain/sanderling.git
synced 2026-10-02 19:17:10 +00:00
pj
a460eba3db
only role=button was in the tappable set, so link, checkbox, radio, switch, tab, option, the menuitems and treeitem were invisible to the enumeration however plain the control looked. the replay ui builds its step rows as <li role="option">, and the spec dogfooding it had to hand-write an action to reach them because no default verb could see a single row. both producers build the set from the same role list, since the parity test compares them element by element.
89 lines
2.8 KiB
HTML
89 lines
2.8 KiB
HTML
<!doctype html>
|
|
<html id="page">
|
|
<head id="page-head">
|
|
<meta id="page-charset" charset="utf-8" />
|
|
<title id="page-title">fact parity</title>
|
|
<style id="page-style">
|
|
:root {
|
|
--frame-w: 420px;
|
|
--frame-h: 640px;
|
|
}
|
|
body {
|
|
margin: 0;
|
|
}
|
|
#scroller {
|
|
width: 320px;
|
|
height: 120px;
|
|
overflow: auto;
|
|
}
|
|
#scroller-content {
|
|
height: 600px;
|
|
}
|
|
#sideways {
|
|
width: 320px;
|
|
height: 40px;
|
|
overflow: auto;
|
|
}
|
|
#sideways-content {
|
|
width: 900px;
|
|
height: 20px;
|
|
}
|
|
#fits {
|
|
width: 320px;
|
|
height: 120px;
|
|
overflow: auto;
|
|
}
|
|
#fits-content {
|
|
height: 40px;
|
|
}
|
|
#collapsed {
|
|
display: none;
|
|
}
|
|
#filler {
|
|
height: 900px;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body id="page-body">
|
|
<button id="save">save</button>
|
|
<button id="cancel" disabled>cancel</button>
|
|
<a id="link" href="#detail">detail</a>
|
|
<select id="choice">
|
|
<option id="choice-first">first</option>
|
|
</select>
|
|
<input id="amount" type="text" value="10" />
|
|
<input id="agree" type="checkbox" />
|
|
<textarea id="notes"></textarea>
|
|
<div id="bio" contenteditable="true">bio</div>
|
|
<div id="menu" role="button">menu</div>
|
|
<!-- One element per ARIA role both producers resolve as clickable. A role
|
|
covered on one side only makes that control reachable for one host,
|
|
which is how the whole set is kept honest: role="option" is the shape
|
|
the replay UI gives its step rows. -->
|
|
<div id="role-link" role="link">link</div>
|
|
<div id="role-checkbox" role="checkbox">checkbox</div>
|
|
<div id="role-radio" role="radio">radio</div>
|
|
<div id="role-switch" role="switch">switch</div>
|
|
<div id="role-tab" role="tab">tab</div>
|
|
<div id="role-menuitem" role="menuitem">menu item</div>
|
|
<div id="role-menuitemcheckbox" role="menuitemcheckbox">menu item checkbox</div>
|
|
<div id="role-menuitemradio" role="menuitemradio">menu item radio</div>
|
|
<div id="role-treeitem" role="treeitem">tree item</div>
|
|
<ul id="role-listbox" role="listbox">
|
|
<li id="role-option" role="option">option</li>
|
|
</ul>
|
|
<div id="attribute-click" onclick="void 0">attribute click</div>
|
|
<div id="delegating-root">delegating root</div>
|
|
<div id="plain">plain</div>
|
|
<div id="edit-text-field" class="EditTextField">styled</div>
|
|
<span id="collapsed">collapsed</span>
|
|
<div id="scroller"><div id="scroller-content"></div></div>
|
|
<div id="sideways"><div id="sideways-content"></div></div>
|
|
<div id="fits"><div id="fits-content"></div></div>
|
|
<div id="filler"></div>
|
|
<script id="page-script">
|
|
document.getElementById("delegating-root").onclick = function () {};
|
|
</script>
|
|
</body>
|
|
</html>
|