Skip to content

[Accessibility] Nested ARIA and HTML buttons - Presentational Roles Conflict Resolution #50045

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
giacomo-petri wants to merge 10 commits into
base: master
Choose a base branch
from
Open

[Accessibility] Nested ARIA and HTML buttons - Presentational Roles Conflict Resolution #50045

Changes from all commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
e2f7125
Nested ARIA and HTML buttons - Presentational Roles Conflict Resolution
giacomo-petri Jan 13, 2025
23c4853
Update wai-aria/role/role_none_conflict_resolution.tentative.html
giacomo-petri Jan 15, 2025
5d2a636
Update wai-aria/role/role_none_conflict_resolution.tentative.html
giacomo-petri Jan 15, 2025
99d9117
Update role_none_conflict_resolution.tentative.html
giacomo-petri Jan 15, 2025
db7d403
Update role_none_conflict_resolution.tentative.html
giacomo-petri Jan 15, 2025
767d7d1
Apply suggestions from code review
giacomo-petri Jan 17, 2025
ddab884
Update role_none_conflict_resolution.tentative.html
giacomo-petri Jan 17, 2025
cbd4f58
Update role_none_conflict_resolution.tentative.html
giacomo-petri Jan 17, 2025
d33999c
Update role_none_conflict_resolution.tentative.html
giacomo-petri Jan 21, 2025
38c80a0
Update role_none_conflict_resolution.tentative.html
giacomo-petri Mar 25, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
65 changes: 65 additions & 0 deletions wai-aria/role/role_none_conflict_resolution.tentative.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,65 @@
<!doctype html>
<html>
<head>
<title>Role None Conflict Resolution Verification Tests</title>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/resources/testdriver.js"></script>
<script src="/resources/testdriver-vendor.js"></script>
<script src="/resources/testdriver-actions.js"></script>
<script src="/wai-aria/scripts/aria-utils.js"></script>
</head>
<body>
<!-- ARIA specs: https://w3c.github.io/aria/#tree_exclusion -->
<!-- no conflict, since not focusable; inner button should be exposed as generic - children presentational - //https://github.com/web-platform-tests/interop-accessibility/issues/161 -->
<h2>Non-focusable ARIA role="button" nesting non-focusable ARIA role="button" (no presentational roles conflict resolution, since inner button is not focusable)</h2>
<div role="button">
<span>outer button</span>
<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>
</div>

<!-- 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 -->
<h2>Focusable ARIA role="button" nesting non-focusable ARIA role="button" (no presentational roles conflict resolution, since inner button is not focusable)</h2>
<div role="button" tabindex="0">
<span>outer button</span>
<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>
</div>

<!-- conflict arise, since inner button is focusable - //https://github.com/web-platform-tests/interop-accessibility/issues/161-->
<h2>Non-focusable ARIA role="button" nesting focusable ARIA role="button" (presentational roles conflict resolution arise, since inner button is focusable)</h2>
<div role="button">
<span>outer button</span>
<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>
</div>

<!-- conflict arise, since inner button is focusable - //https://github.com/web-platform-tests/interop-accessibility/issues/161-->
<h2>Focusable ARIA role="button" nesting focusable ARIA role="button" (presentational roles conflict resolution arise, since inner button is focusable)</h2>
<div role="button" tabindex="0">
<span>outer button</span>
<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>
</div>

<!-- conflict arise, since inner button is focusable - //https://github.com/web-platform-tests/interop-accessibility/issues/161-->
<h2>HTML button nesting HTML button</h2>
<div id="button-container">
<button id="outer-button">
<span>outer button</span>
<span id="inner-button-container"></span>
</button>
</div>

<script>
//https://github.com/web-platform-tests/interop-accessibility/issues/161 starts
const innerButton = document.createElement("button");
innerButton.textContent = " (inner button)";
innerButton.id = "inner-button";
innerButton.classList.add("ex-role");
innerButton.setAttribute('data-expectedrole','SPEC_AMBIGUOUS_LOG_VALUE');
innerButton.setAttribute('data-testname','JS injected HTML button within another HTML button');
document.getElementById("inner-button-container").appendChild(innerButton);

AriaUtils.verifyRolesBySelector(".ex-role");
</script>

</body>
</html>