Skip to content

focus-returns-trigger-9au0ou.md

Latest commit

 

History

History
245 lines (207 loc) · 8.52 KB

focus-returns-trigger-9au0ou.md

File metadata and controls

245 lines (207 loc) · 8.52 KB
id 9au0ou
name Focus returns to trigger
rule_type atomic
description This rule checks that when a modal closes the focus returns to the trigger that opened the modal.
accessibility_requirements
wcag20:2.4.3 wcag-technique:G59
forConformance failed passed inapplicable
true
not satisfied
further testing needed
further testing needed
forConformance failed passed inapplicable
false
not satisfied
further testing needed
further testing needed
input_aspects
Accessibility Tree
DOM Tree
acknowledgments
authors
Dan Tripp
Helen Burge

Applicability

This rule applies to any element with a semantic role of dialog or alertdialog that is not visible.

Expectation

The element that has the focus when the target element becomes visible is the same element that receives focus when the target element stops being visible.

Background

Assumptions

There are no assumptions.

Accessibility Support

There are no accessibility support issues known.

Bibliography

Test Cases

Passed

Passed Example 1

The button that is activated to display the modal gets the focus returned to it when the modal is dismissed using the escape key or activating close, OK or cancel button in the modal.

<!DOCTYPE html>
<html lang="en">
	<head>
		<title>Passed Example 1</title>
		<script src="/test-assets/9au0ou/aria-apg-dialog.js"></script>
		<script src="/test-assets/9au0ou/aria-apg-utils.js"></script>
		<link href="/test-assets/9au0ou/aria-apg-dialog.css" rel="stylesheet" />
		<link href="/test-assets/9au0ou/9au0ou.css" rel="stylesheet" />
	</head>
	<body>
		<button type="button">Do nothing</button>
		<button type="button" onclick="openDialog('dialog1', this)">Open modal dialog</button>
		<button type="button">Do nothing</button>
		<div id="dialog_layer" class="dialogs">
			<div role="dialog" id="dialog1" aria-labelledby="dialog1_label" aria-modal="true"
					 class="hidden">
				<h2 id="dialog1_label" class="dialog_label">Dialog title</h2>
				<div class="dialog_form">Dialog content.</div>
				<button type="button" class="close-button topright" aria-label="Close" title="Close" 
						onclick="closeDialog(this)">
					&times;
				</button>
				<div style="text-align: right;">
					<button type="button" onclick="closeDialog(this)"></button>
					<button type="button" onclick="closeDialog(this)">Cancel</button>
				</div>
			</div>
		</div>
	</body>
</html>

Passed Example 2

The link that is activated to display the modal gets the focus returned to it when the modal is dismissed using the escape key or activating close, OK or cancel button in the modal.

<!DOCTYPE html>
<html lang="en">
	<head>
		<title>Passed Example 2</title>
		<script src="/test-assets/9au0ou/aria-apg-dialog.js"></script>
		<script src="/test-assets/9au0ou/aria-apg-utils.js"></script>
		<link href="/test-assets/9au0ou/aria-apg-dialog.css" rel="stylesheet" />
		<link href="/test-assets/9au0ou/9au0ou.css" rel="stylesheet" />
	</head>
	<body>
		<a href="#">Do nothing</a>
		<a href="javascript:openDialog('dialog1', this)">Open modal dialog</a>
		<a href="#">Do nothing</a>
		<div id="dialog_layer" class="dialogs">
			<div role="dialog" id="dialog1" aria-labelledby="dialog1_label" aria-modal="true"
					 class="hidden">
				<h2 id="dialog1_label" class="dialog_label">Dialog title</h2>
				<div class="dialog_form">Dialog content.</div>
				<button type="button" class="close-button topright" aria-label="Close" title="Close" 
						onclick="closeDialog(this)">
					&times;
				</button>
				<div style="text-align: right;">
					<button type="button" onclick="closeDialog(this)">OK</button>
					<button type="button" onclick="closeDialog(this)">Cancel</button>
				</div>
			</div>
		</div>
	</body>
</html>

Failed

Failed Example 1

The button that is activated to display the modal gets the focus returned to the item after it when the modal is dismissed.

<!DOCTYPE html>
<html lang="en">
	<head>
		<title>Failed Example 1</title>
		<script src="test-assets/9au0ou/aria-apg-dialog.js"></script>
		<script src="test-assets/9au0ou/aria-apg-utils.js"></script>
		<script>

			addEventListener('DOMContentLoaded', (event) => {
				document.getElementById('dialog1').on_close_via_escape_key = () => { 
					document.getElementById('donothingbutton2').focus();
				};
			});

		</script>
		<link href="test-assets/9au0ou/aria-apg-dialog.css" rel="stylesheet">
		<link href="test-assets/9au0ou/9au0ou.css" rel="stylesheet">
	</head>
	<body>
		<button id="donothingbutton1" class="top-level-button" type="button">Do nothing</button><br><br>
		<button class="top-level-button" type="button" onclick="openDialog('dialog1', this)">Open modal dialog</button><br><br>
		<button id="donothingbutton2" class="top-level-button" type="button">Do nothing</button><br><br>
		<div id="dialog_layer" class="dialogs">
			<div role="dialog" id="dialog1" aria-labelledby="dialog1_label" aria-modal="true" class="hidden">
				<div class="dialog_form">For this test: use any button, or the escape key, to close the dialog.</div>
				<button type="button" class="close-button topright" aria-label="Close" title="Close" onclick="closeDialog(this); document.getElementById('donothingbutton2').focus();">
					×
				</button>
				<div style="text-align: right;">
					<button type="button" onclick="closeDialog(this); document.getElementById('donothingbutton2').focus();">OK</button>
					<button type="button" onclick="closeDialog(this); document.getElementById('donothingbutton2').focus();">Cancel</button>
				</div>
			</div>
		</div>
	</body>
</html>

Failed Example 2

The button that is activated to display the modal gets the focus returned to the start of the page when the modal is dismissed.

<!DOCTYPE html>
<html lang="en">
	<head>
		<title>Failed Example 2</title>
		<script src="test-assets/9au0ou/aria-apg-dialog.js"></script>
		<script src="test-assets/9au0ou/aria-apg-utils.js"></script>
		<script>

			addEventListener('DOMContentLoaded', (event) => {
				document.getElementById('dialog1').on_close_via_escape_key = () => { 
					document.getElementById('donothingbutton1').focus();
				};
			});

		</script>
		<link href="test-assets/9au0ou/aria-apg-dialog.css" rel="stylesheet">
		<link href="test-assets/9au0ou/9au0ou.css" rel="stylesheet">
	</head>
	<body>
		<button id="donothingbutton1" class="top-level-button" type="button">Do nothing</button><br><br>
		<button class="top-level-button" type="button" onclick="openDialog('dialog1', this)">Open modal dialog</button><br><br>
		<button id="donothingbutton2" class="top-level-button" type="button">Do nothing</button><br><br>
		<div id="dialog_layer" class="dialogs">
			<div role="dialog" id="dialog1" aria-labelledby="dialog1_label" aria-modal="true" class="hidden">
				<div class="dialog_form">For this test: use any button, or the escape key, to close the dialog.</div>
				<button type="button" class="close-button topright" aria-label="Close" title="Close" onclick="closeDialog(this); document.getElementById('donothingbutton1').focus();">
					×
				</button>
				<div style="text-align: right;">
					<button type="button" onclick="closeDialog(this); document.getElementById('donothingbutton1').focus();">OK</button>
					<button type="button" onclick="closeDialog(this); document.getElementById('donothingbutton1').focus();">Cancel</button>
				</div>
			</div>
		</div>
	</body>
</html>

Failed Example 3

The link that is activated to display the modal gets the focus returned to the item after it when the modal is dismissed.

Code needed!

Failed Example 4

The link that is activated to display the modal gets the focus returned to the start of the page when the modal is dismissed.

Code needed!

Failed Example 5

The page has a list of buttons that is activated to display a modal, the focus is returned to the incorrect button on dismissing the modal.

Code needed!

Inapplicable

Inapplicable Example 1

TBC

Code needed!