| 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 |
|
||||||||||||||||||||
| input_aspects |
|
||||||||||||||||||||
| acknowledgments |
|
This rule applies when focus is trapped within a region activated by a trigger control that is dismissible.
The element that triggers the target element to become visible, is still present in the screen behind the triggered content and is the same element that receives focus when the target element stops being visible.
There are no assumptions.
Some assistive technologies on known browsers still exhibit inconsistencies. Specifically, if an element is removed from the accessibility tree after being activated (e.g., a close button), and focus is moved via JavaScript to an element that is not inherently operable (e.g., a button works, but a div with tabindex="-1" may not), the assistive technology might automatically shift focus to the closest visible element, regardless of the intended JavaScript behavior.
- Understanding Success Criterion 2.4.3: Focus Order
- G59: Placing the interactive elements in an order that follows sequences and relationships within the content
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)">
×
</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>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)">
×
</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>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>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>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!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!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!TBC
Code needed!