Skip to content

Commit bd94465

Browse files
giacomo-petrigiacomo-petri
authored
[Accessibility] Nested ARIA and HTML buttons - Presentational Roles Conflict Resolution (#50045)
* Nested ARIA and HTML buttons - Presentational Roles Conflict Resolution * Apply suggestions from code review
1 parent 1c74e5b commit bd94465

1 file changed

Lines changed: 65 additions & 0 deletions

File tree

‎wai-aria/role/role_none_conflict_resolution.tentative.html‎

Lines changed: 65 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,65 @@
1+
<!doctype html>
2+
<html>
3+
<head>
4+
<title>Role None Conflict Resolution Verification Tests</title>
5+
<script src="/resources/testharness.js"></script>
6+
<script src="/resources/testharnessreport.js"></script>
7+
<script src="/resources/testdriver.js"></script>
8+
<script src="/resources/testdriver-vendor.js"></script>
9+
<script src="/resources/testdriver-actions.js"></script>
10+
<script src="/wai-aria/scripts/aria-utils.js"></script>
11+
</head>
12+
<body>
13+
<!-- ARIA specs: https://w3c.github.io/aria/#tree_exclusion -->
14+
<!-- no conflict, since not focusable; inner button should be exposed as generic - children presentational - //https://github.com/web-platform-tests/interop-accessibility/issues/161 -->
15+
<h2>Non-focusable ARIA role="button" nesting non-focusable ARIA role="button" (no presentational roles conflict resolution, since inner button is not focusable)</h2>
16+
<div role="button">
17+
<span>outer button</span>
18+
<span role="button" class="ex-role" data-expectedrole="SPEC_AMBIGUOUS_LOG_VALUE" data-testname="non-focusable ARIA[role=button] nesting non-focusable ARIA[role=button]">Inner button</span>
19+
</div>
20+
21+
<!-- no conflict, since nested button is not focusable; inner button should be exposed as generic - children presentational - //https://github.com/web-platform-tests/interop-accessibility/issues/161 -->
22+
<h2>Focusable ARIA role="button" nesting non-focusable ARIA role="button" (no presentational roles conflict resolution, since inner button is not focusable)</h2>
23+
<div role="button" tabindex="0">
24+
<span>outer button</span>
25+
<span role="button" class="ex-role" data-expectedrole="SPEC_AMBIGUOUS_LOG_VALUE" data-testname="focusable ARIA[role=button] nesting non-focusable ARIA[role=button]">Inner button</span>
26+
</div>
27+
28+
<!-- conflict arise, since inner button is focusable - //https://github.com/web-platform-tests/interop-accessibility/issues/161-->
29+
<h2>Non-focusable ARIA role="button" nesting focusable ARIA role="button" (presentational roles conflict resolution arise, since inner button is focusable)</h2>
30+
<div role="button">
31+
<span>outer button</span>
32+
<span role="button" class="ex-role" data-expectedrole="SPEC_AMBIGUOUS_LOG_VALUE" data-testname="non-focusable ARIA[role=button] nesting focusable ARIA[role=button]" tabindex="0">Inner button</span>
33+
</div>
34+
35+
<!-- conflict arise, since inner button is focusable - //https://github.com/web-platform-tests/interop-accessibility/issues/161-->
36+
<h2>Focusable ARIA role="button" nesting focusable ARIA role="button" (presentational roles conflict resolution arise, since inner button is focusable)</h2>
37+
<div role="button" tabindex="0">
38+
<span>outer button</span>
39+
<span role="button" class="ex-role" data-expectedrole="SPEC_AMBIGUOUS_LOG_VALUE" data-testname="focusable ARIA[role=button] nesting focusable ARIA[role=button]" tabindex="0">Inner button</span>
40+
</div>
41+
42+
<!-- conflict arise, since inner button is focusable - //https://github.com/web-platform-tests/interop-accessibility/issues/161-->
43+
<h2>HTML button nesting HTML button</h2>
44+
<div id="button-container">
45+
<button id="outer-button">
46+
<span>outer button</span>
47+
<span id="inner-button-container"></span>
48+
</button>
49+
</div>
50+
51+
<script>
52+
//https://github.com/web-platform-tests/interop-accessibility/issues/161 starts
53+
const innerButton = document.createElement("button");
54+
innerButton.textContent = " (inner button)";
55+
innerButton.id = "inner-button";
56+
innerButton.classList.add("ex-role");
57+
innerButton.setAttribute('data-expectedrole','SPEC_AMBIGUOUS_LOG_VALUE');
58+
innerButton.setAttribute('data-testname','JS injected HTML button within another HTML button');
59+
document.getElementById("inner-button-container").appendChild(innerButton);
60+
61+
AriaUtils.verifyRolesBySelector(".ex-role");
62+
</script>
63+
64+
</body>
65+
</html>

0 commit comments

Comments
 (0)