Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Browse files
Browse the repository at this point in the history
AX: Add support for ARIA 1.1 attribute 'aria-modal' for dialog and al…
…ertdialog https://bugs.webkit.org/show_bug.cgi?id=138566 Reviewed by Chris Fleizach. Source/WebCore: Added support for aria-modal attribute on dialog/alertdialog roles. When modal dialog is displayed, all other contents will be unaccessible. Tests: accessibility/aria-modal-multiple-dialogs.html accessibility/aria-modal.html * accessibility/AXObjectCache.cpp: (WebCore::AXObjectCache::AXObjectCache): (WebCore::AXObjectCache::~AXObjectCache): (WebCore::AXObjectCache::findAriaModalNodes): (WebCore::AXObjectCache::updateCurrentAriaModalNode): (WebCore::AXObjectCache::isNodeVisible): (WebCore::AXObjectCache::ariaModalNode): (WebCore::AXObjectCache::focusedImageMapUIElement): (WebCore::AXObjectCache::remove): (WebCore::AXObjectCache::handleAttributeChanged): (WebCore::AXObjectCache::handleAriaModalChange): (WebCore::AXObjectCache::labelChanged): * accessibility/AXObjectCache.h: (WebCore::AXObjectCache::handleActiveDescendantChanged): (WebCore::AXObjectCache::handleAriaExpandedChange): (WebCore::AXObjectCache::handleAriaRoleChanged): (WebCore::AXObjectCache::handleAriaModalChange): (WebCore::AXObjectCache::handleFocusedUIElementChanged): (WebCore::AXObjectCache::handleScrollbarUpdate): (WebCore::AXObjectCache::handleAttributeChanged): * accessibility/AccessibilityObject.cpp: (WebCore::AccessibilityObject::ariaCurrentState): (WebCore::AccessibilityObject::isAriaModalDescendant): (WebCore::AccessibilityObject::ignoredFromARIAModalPresence): (WebCore::AccessibilityObject::hasTagName): (WebCore::AccessibilityObject::defaultObjectInclusion): * accessibility/AccessibilityObject.h: * html/HTMLAttributeNames.in: LayoutTests: * accessibility/aria-modal-expected.txt: Added. * accessibility/aria-modal-multiple-dialogs-expected.txt: Added. * accessibility/aria-modal-multiple-dialogs.html: Added. * accessibility/aria-modal.html: Added. Canonical link: https://commits.webkit.org/169020@main git-svn-id: https://svn.webkit.org/repository/webkit/trunk@191931 268f45cc-cd09-0410-ab3c-d52691b4dbfc
- Loading branch information
Nan Wang
committed
Nov 3, 2015
1 parent
fe34914
commit 7280502
Showing
11 changed files
with
449 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,19 @@ | ||
| This tests that aria-modal on dialog makes other elements inert. | ||
|
|
||
| On success, you will see a series of "PASS" messages, followed by "TEST COMPLETE". | ||
|
|
||
|
|
||
| PASS backgroundAccessible() is false | ||
| PASS backgroundAccessible() is true | ||
| PASS backgroundAccessible() is false | ||
| PASS okBtn.isIgnored is false | ||
| PASS backgroundAccessible() is true | ||
| PASS backgroundAccessible() is true | ||
| PASS backgroundAccessible() is false | ||
| PASS backgroundAccessible() is true | ||
| PASS successfullyParsed is true | ||
|
|
||
| TEST COMPLETE | ||
| Other page content with a dummy focusable element | ||
|
|
||
| Display a dialog |
20 changes: 20 additions & 0 deletions
20
LayoutTests/accessibility/aria-modal-multiple-dialogs-expected.txt
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,20 @@ | ||
| This tests that aria-modal works correctly on multiple dialogs | ||
|
|
||
| On success, you will see a series of "PASS" messages, followed by "TEST COMPLETE". | ||
|
|
||
|
|
||
| PASS backgroundAccessible() is true | ||
| PASS backgroundAccessible() is false | ||
| PASS dialog1Accessible() is true | ||
| PASS backgroundAccessible() is false | ||
| PASS dialog1Accessible() is false | ||
| PASS closeBtn.isIgnored is false | ||
| PASS backgroundAccessible() is false | ||
| PASS dialog1Accessible() is true | ||
| PASS backgroundAccessible() is true | ||
| PASS successfullyParsed is true | ||
|
|
||
| TEST COMPLETE | ||
| Other page content with a dummy focusable element | ||
|
|
||
| Display a dialog |
94 changes: 94 additions & 0 deletions
94
LayoutTests/accessibility/aria-modal-multiple-dialogs.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,94 @@ | ||
| <!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML//EN"> | ||
| <html> | ||
| <head> | ||
| <script src="../resources/js-test-pre.js"></script> | ||
| </head> | ||
|
|
||
| <style> | ||
| .box-hidden { | ||
| display: none; | ||
| } | ||
| </style> | ||
|
|
||
| <body id="body"> | ||
|
|
||
| <div id="bg"> | ||
| <p id="bgContent">Other page content with <a href="#">a dummy focusable element</a></p> | ||
| <p><a onclick="toggleDialog(document.getElementById('box'),'show'); return false;" href="#" role="button" id="displayBtn">Display a dialog</a></p> | ||
| </div> | ||
|
|
||
| <div role="dialog" aria-labelledby="myDialog" id="box" class="box-hidden" tabindex="-1"> | ||
| <h3 id="myDialog">Just an example.</h3> | ||
| <button id="ok" onclick="toggleDialog(document.getElementById('box'),'hide');" class="close-button">OK</button> | ||
| <button onclick="toggleDialog(document.getElementById('box2'),'show');" id="new">New</button> | ||
| </div> | ||
|
|
||
| <div role="dialog" aria-labelledby="myDialog2" id="box2" class="box-hidden" tabindex="-1"> | ||
| <h3 id="myDialog2">Another dialog.</h3> | ||
| <button id="close" onclick="toggleDialog(document.getElementById('box2'),'hide');" class="close-button">Close</button> | ||
| </div> | ||
|
|
||
|
|
||
| <script> | ||
|
|
||
| description("This tests that aria-modal works correctly on multiple dialogs"); | ||
|
|
||
| if (window.accessibilityController) { | ||
| // Background should be accessible after loading. | ||
| shouldBeTrue("backgroundAccessible()"); | ||
|
|
||
| // Click the display button, dialog1 shows and background becomes unaccessible. | ||
| document.getElementById("displayBtn").click(); | ||
| shouldBeFalse("backgroundAccessible()"); | ||
| shouldBeTrue("dialog1Accessible()"); | ||
|
|
||
| // Click the new button, dialog2 shows and background/dialog1 should both be unaccessible. | ||
| document.getElementById("new").click(); | ||
| shouldBeFalse("backgroundAccessible()"); | ||
| shouldBeFalse("dialog1Accessible()"); | ||
| var closeBtn = accessibilityController.accessibleElementById("close"); | ||
| shouldBeFalse("closeBtn.isIgnored"); | ||
|
|
||
| // Close dialog2, dialog1 should become accessible but not the background | ||
| document.getElementById("close").click(); | ||
| shouldBeFalse("backgroundAccessible()"); | ||
| shouldBeTrue("dialog1Accessible()"); | ||
|
|
||
| // Close dialog1, background should be accessible. | ||
| document.getElementById("ok").click(); | ||
| shouldBeTrue("backgroundAccessible()"); | ||
| } | ||
|
|
||
| function backgroundAccessible() { | ||
| var displayBtn = accessibilityController.accessibleElementById("displayBtn"); | ||
| var bgContent = accessibilityController.accessibleElementById("bgContent"); | ||
| if (!displayBtn || !bgContent) | ||
| return false; | ||
| return !displayBtn.isIgnored && !bgContent.isIgnored; | ||
| } | ||
|
|
||
| function dialog1Accessible() { | ||
| var okBtn = accessibilityController.accessibleElementById("ok"); | ||
| var newBtn = accessibilityController.accessibleElementById("new"); | ||
| if (!okBtn || !newBtn) | ||
| return false; | ||
| return !okBtn.isIgnored && !newBtn.isIgnored; | ||
| } | ||
|
|
||
| function toggleDialog(dialog, sh) { | ||
| if (sh == "show") { | ||
| // show the dialog | ||
| dialog.style.display = 'block'; | ||
| dialog.setAttribute("aria-modal", "true"); | ||
| } else { | ||
| dialog.style.display = 'none'; | ||
| dialog.setAttribute("aria-modal", "false"); | ||
| } | ||
| } | ||
|
|
||
| </script> | ||
|
|
||
|
|
||
| <script src="../resources/js-test-post.js"></script> | ||
| </body> | ||
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,85 @@ | ||
| <!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML//EN"> | ||
| <html> | ||
| <head> | ||
| <script src="../resources/js-test-pre.js"></script> | ||
| </head> | ||
|
|
||
| <body id="body"> | ||
|
|
||
| <div id="bg"> | ||
| <p id="bgContent">Other page content with <a href="#">a dummy focusable element</a></p> | ||
| <p><a onclick="toggleDialog('show'); return false;" href="#" role="button" id="displayBtn">Display a dialog</a></p> | ||
| </div> | ||
|
|
||
| <div role="dialog" aria-modal="true" aria-labelledby="myDialog" id="box" class="box-hidden" tabindex="-1"> | ||
| <h3 id="myDialog">Just an example.</h3> | ||
| <button id="ok" onclick="toggleDialog('hide');" class="close-button">OK</button> | ||
| <button onclick="toggleDialog('hide');" class="close-button">Cancel</button> | ||
| </div> | ||
|
|
||
|
|
||
| <script> | ||
|
|
||
| description("This tests that aria-modal on dialog makes other elements inert."); | ||
|
|
||
| if (window.accessibilityController) { | ||
| // Background should be unaccessible after loading, since the | ||
| // dialog is displayed and aria-modal=true. | ||
| shouldBeFalse("backgroundAccessible()"); | ||
|
|
||
| // Close the dialog, background should be accessible. | ||
| document.getElementById("ok").click(); | ||
| shouldBeTrue("backgroundAccessible()"); | ||
|
|
||
| // Click the display button, dialog shows and background becomes unaccessible. | ||
| document.getElementById("displayBtn").click(); | ||
| shouldBeFalse("backgroundAccessible()"); | ||
| var okBtn = accessibilityController.accessibleElementById("ok"); | ||
| shouldBeFalse("okBtn.isIgnored"); | ||
|
|
||
| // Test the case that aria-modal=true when dialog is hidden won't affect other objects. | ||
| // 1. Dialog not rendered | ||
| document.getElementById("ok").click(); | ||
| document.getElementById("box").setAttribute("aria-modal", "true"); | ||
| shouldBeTrue("backgroundAccessible()"); | ||
| // 2. Dialog is aria hidden | ||
| document.getElementById("displayBtn").click(); | ||
| document.getElementById("box").setAttribute("aria-hidden", "true"); | ||
| shouldBeTrue("backgroundAccessible()"); | ||
| document.getElementById("box").setAttribute("aria-hidden", "false"); | ||
| shouldBeFalse("backgroundAccessible()"); | ||
|
|
||
| // Test modal dialog is removed from DOM tree. | ||
| var dialog = document.getElementById("box"); | ||
| dialog.parentNode.removeChild(dialog); | ||
| shouldBeTrue("backgroundAccessible()"); | ||
| } | ||
|
|
||
| function backgroundAccessible() { | ||
| var displayBtn = accessibilityController.accessibleElementById("displayBtn"); | ||
| var bgContent = accessibilityController.accessibleElementById("bgContent"); | ||
|
|
||
| if (!displayBtn || !bgContent) | ||
| return false; | ||
|
|
||
| return !displayBtn.isIgnored && !bgContent.isIgnored; | ||
| } | ||
|
|
||
| function toggleDialog(sh) { | ||
| dialog = document.getElementById("box"); | ||
| if (sh == "show") { | ||
| // show the dialog | ||
| dialog.style.display = 'block'; | ||
| dialog.setAttribute("aria-modal", "true"); | ||
| } else { | ||
| dialog.style.display = 'none'; | ||
| dialog.setAttribute("aria-modal", "false"); | ||
| } | ||
| } | ||
|
|
||
| </script> | ||
|
|
||
|
|
||
| <script src="../resources/js-test-post.js"></script> | ||
| </body> | ||
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.