mirror of
https://github.com/mozilla/gecko-dev.git
synced 2024-10-10 03:45:46 +00:00
Bug 526703 - Screen readers announce ARIA list items, tree items, and listbox items as 'not selected', r=marcoz
--HG-- rename : accessible/tests/mochitest/states/test_aria_tabs.html => accessible/tests/mochitest/states/test_aria_widgetitems.html
This commit is contained in:
Alexander Surkov
parent
f1c873d778
commit
43aeca2f2a
@ -1473,23 +1473,34 @@ nsAccessible::State()
|
||||
// Apply ARIA states to be sure accessible states will be overridden.
|
||||
ApplyARIAState(&state);
|
||||
|
||||
if (mRoleMapEntry && mRoleMapEntry->role == roles::PAGETAB &&
|
||||
!(state & states::SELECTED) &&
|
||||
// If this is an ARIA item of the selectable widget and if it's focused and
|
||||
// not marked unselected explicitly (i.e. aria-selected="false") then expose
|
||||
// it as selected to make ARIA widget authors life easier.
|
||||
if (mRoleMapEntry && !(state & states::SELECTED) &&
|
||||
!mContent->AttrValueIs(kNameSpaceID_None,
|
||||
nsGkAtoms::aria_selected,
|
||||
nsGkAtoms::_false, eCaseMatters)) {
|
||||
// Special case: for tabs, focused implies selected, unless explicitly
|
||||
// false, i.e. aria-selected="false".
|
||||
if (state & states::FOCUSED) {
|
||||
state |= states::SELECTED;
|
||||
} else {
|
||||
// If focus is in a child of the tab panel surely the tab is selected!
|
||||
Relation rel = RelationByType(nsIAccessibleRelation::RELATION_LABEL_FOR);
|
||||
nsAccessible* relTarget = nsnull;
|
||||
while ((relTarget = rel.Next())) {
|
||||
if (relTarget->Role() == roles::PROPERTYPAGE &&
|
||||
FocusMgr()->IsFocusWithin(relTarget))
|
||||
state |= states::SELECTED;
|
||||
// Special case for tabs: focused tab or focus inside related tab panel
|
||||
// implies selected state.
|
||||
if (mRoleMapEntry->role == roles::PAGETAB) {
|
||||
if (state & states::FOCUSED) {
|
||||
state |= states::SELECTED;
|
||||
} else {
|
||||
// If focus is in a child of the tab panel surely the tab is selected!
|
||||
Relation rel = RelationByType(nsIAccessibleRelation::RELATION_LABEL_FOR);
|
||||
nsAccessible* relTarget = nsnull;
|
||||
while ((relTarget = rel.Next())) {
|
||||
if (relTarget->Role() == roles::PROPERTYPAGE &&
|
||||
FocusMgr()->IsFocusWithin(relTarget))
|
||||
state |= states::SELECTED;
|
||||
}
|
||||
}
|
||||
} else if (state & states::FOCUSED) {
|
||||
nsAccessible* container = nsAccUtils::GetSelectableContainer(this, state);
|
||||
if (container &&
|
||||
!nsAccUtils::HasDefinedARIAToken(container->GetContent(),
|
||||
nsGkAtoms::aria_multiselectable)) {
|
||||
state |= states::SELECTED;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -48,7 +48,7 @@ include $(topsrcdir)/config/rules.mk
|
||||
_TEST_FILES =\
|
||||
test_aria.html \
|
||||
test_aria_imgmap.html \
|
||||
test_aria_tabs.html \
|
||||
test_aria_widgetitems.html \
|
||||
test_buttons.html \
|
||||
test_doc.html \
|
||||
test_docarticle.html \
|
||||
|
||||
@ -1,135 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<title>Test ARIA tab accessible selected state</title>
|
||||
|
||||
<link rel="stylesheet" type="text/css"
|
||||
href="chrome://mochikit/content/tests/SimpleTest/test.css" />
|
||||
|
||||
<script type="application/javascript"
|
||||
src="chrome://mochikit/content/tests/SimpleTest/SimpleTest.js"></script>
|
||||
|
||||
<script type="application/javascript"
|
||||
src="../common.js"></script>
|
||||
<script type="application/javascript"
|
||||
src="../states.js"></script>
|
||||
<script type="application/javascript"
|
||||
src="../events.js"></script>
|
||||
|
||||
<script type="application/javascript">
|
||||
function focusARIATab(aID, aIsSelected)
|
||||
{
|
||||
this.DOMNode = getNode(aID);
|
||||
|
||||
this.invoke = function focusARIATab_invoke()
|
||||
{
|
||||
this.DOMNode.focus();
|
||||
}
|
||||
|
||||
this.check = function focusARIATab_check(aEvent)
|
||||
{
|
||||
testStates(this.DOMNode, aIsSelected ? STATE_SELECTED : 0, 0,
|
||||
aIsSelected ? 0 : STATE_SELECTED);
|
||||
}
|
||||
|
||||
this.getID = function focusARIATab_getID()
|
||||
{
|
||||
return "Focused ARIA Tab with aria-selected=" +
|
||||
(aIsSelected ? "true, should" : "false, shouldn't") +
|
||||
" have selected state on " + prettyName(aID);
|
||||
}
|
||||
}
|
||||
|
||||
function focusActiveDescendantTab(aTabID, aTabListID, aIsSelected)
|
||||
{
|
||||
this.DOMNode = getNode(aTabID);
|
||||
this.tabListDOMNode = getNode(aTabListID);
|
||||
|
||||
this.invoke = function focusActiveDescendantTab_invoke()
|
||||
{
|
||||
this.tabListDOMNode.setAttribute("aria-activedescendant", aTabID);
|
||||
this.tabListDOMNode.focus();
|
||||
}
|
||||
|
||||
this.check = function focusActiveDescendantTab_check(aEvent)
|
||||
{
|
||||
testStates(this.DOMNode, aIsSelected ? STATE_SELECTED : 0, 0,
|
||||
aIsSelected ? 0 : STATE_SELECTED);
|
||||
}
|
||||
|
||||
this.getID = function tabActiveDescendant_getID()
|
||||
{
|
||||
return "ARIA Tab with activedescendant " +
|
||||
(aIsSelected ? "should" : "shouldn't") +
|
||||
" have the selected state on " + prettyName(aTabID);
|
||||
}
|
||||
}
|
||||
|
||||
////////////////////////////////////////////////////////////////////////////
|
||||
// Test
|
||||
|
||||
//gA11yEventDumpID = "eventdump"; // debug stuff
|
||||
//gA11yEventDumpToConsole = true;
|
||||
|
||||
var gQueue = null;
|
||||
|
||||
function doTest()
|
||||
{
|
||||
// simple tabs
|
||||
testStates("aria_tab1", 0, 0, STATE_SELECTED);
|
||||
testStates("aria_tab2", STATE_SELECTED);
|
||||
|
||||
// To make sure our focus != selected is truly under test, we need to
|
||||
// make sure our cache of what currently has focus is correct, which
|
||||
// we update asyncronously.
|
||||
gQueue = new eventQueue(EVENT_FOCUS);
|
||||
|
||||
gQueue.push(new focusARIATab("aria_tab1", true));
|
||||
gQueue.push(new focusARIATab("aria_tab3", false));
|
||||
gQueue.push(new focusARIATab("aria_tab2", true));
|
||||
|
||||
// selection through aria-activedescendant
|
||||
// Make sure initially setting it selects the tab.
|
||||
gQueue.push(new focusActiveDescendantTab("aria_tab5", "aria_tablist2", true));
|
||||
|
||||
// Now, make sure if one is selected selection gets transferred properly.
|
||||
gQueue.push(new focusActiveDescendantTab("aria_tab6", "aria_tablist2", true));
|
||||
|
||||
// Now, make sure the focused but explicitly unselected one behaves.
|
||||
gQueue.push(new focusActiveDescendantTab("aria_tab4", "aria_tablist2", false));
|
||||
|
||||
gQueue.invoke(); // SimpleTest.finish() will be called in the end
|
||||
}
|
||||
|
||||
SimpleTest.waitForExplicitFinish();
|
||||
addA11yLoadEvent(doTest);
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<a target="_blank"
|
||||
href="https://bugzilla.mozilla.org/show_bug.cgi?id=653601"
|
||||
title="aria-selected ignored for ARIA tabs">
|
||||
Mozilla Bug 653601
|
||||
</a>
|
||||
<p id="display"></p>
|
||||
<div id="content" style="display: none"></div>
|
||||
<pre id="test">
|
||||
</pre>
|
||||
|
||||
<!-- tab -->
|
||||
<div id="aria_tablist" role="tablist">
|
||||
<div id="aria_tab1" role="tab" tabindex="0">unselected tab</div>
|
||||
<div id="aria_tab2" role="tab" tabindex="0" aria-selected="true">selected tab</div>
|
||||
<div id="aria_tab3" role="tab" tabindex="0" aria-selected="false">focused explicitly unselected tab</div>
|
||||
</div>
|
||||
|
||||
<!-- test activeDescendant -->
|
||||
<div id="aria_tablist2" role="tablist" tabindex="0">
|
||||
<div id="aria_tab4" role="tab" aria-selected="false">focused explicitly unselected tab</div>
|
||||
<div id="aria_tab5" role="tab">initially selected tab</div>
|
||||
<div id="aria_tab6" role="tab">later selected tab</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
160
accessible/tests/mochitest/states/test_aria_widgetitems.html
Normal file
160
accessible/tests/mochitest/states/test_aria_widgetitems.html
Normal file
@ -0,0 +1,160 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<title>Test ARIA tab accessible selected state</title>
|
||||
|
||||
<link rel="stylesheet" type="text/css"
|
||||
href="chrome://mochikit/content/tests/SimpleTest/test.css" />
|
||||
|
||||
<script type="application/javascript"
|
||||
src="chrome://mochikit/content/tests/SimpleTest/SimpleTest.js"></script>
|
||||
|
||||
<script type="application/javascript"
|
||||
src="../common.js"></script>
|
||||
<script type="application/javascript"
|
||||
src="../states.js"></script>
|
||||
<script type="application/javascript"
|
||||
src="../events.js"></script>
|
||||
|
||||
<script type="application/javascript">
|
||||
function focusARIAItem(aID, aIsSelected)
|
||||
{
|
||||
this.DOMNode = getNode(aID);
|
||||
|
||||
this.invoke = function focusARIAItem_invoke()
|
||||
{
|
||||
this.DOMNode.focus();
|
||||
}
|
||||
|
||||
this.check = function focusARIAItem_check(aEvent)
|
||||
{
|
||||
testStates(this.DOMNode, aIsSelected ? STATE_SELECTED : 0, 0,
|
||||
aIsSelected ? 0 : STATE_SELECTED);
|
||||
}
|
||||
|
||||
this.getID = function focusARIAItem_getID()
|
||||
{
|
||||
return "Focused ARIA widget item with aria-selected='" +
|
||||
(aIsSelected ? "true', should" : "false', shouldn't") +
|
||||
" have selected state on " + prettyName(aID);
|
||||
}
|
||||
}
|
||||
|
||||
function focusActiveDescendantItem(aItemID, aWidgetID, aIsSelected)
|
||||
{
|
||||
this.DOMNode = getNode(aItemID);
|
||||
this.widgetDOMNode = getNode(aWidgetID);
|
||||
|
||||
this.invoke = function focusActiveDescendantItem_invoke()
|
||||
{
|
||||
this.widgetDOMNode.setAttribute("aria-activedescendant", aItemID);
|
||||
this.widgetDOMNode.focus();
|
||||
}
|
||||
|
||||
this.check = function focusActiveDescendantItem_check(aEvent)
|
||||
{
|
||||
testStates(this.DOMNode, aIsSelected ? STATE_SELECTED : 0, 0,
|
||||
aIsSelected ? 0 : STATE_SELECTED);
|
||||
}
|
||||
|
||||
this.getID = function tabActiveDescendant_getID()
|
||||
{
|
||||
return "ARIA widget item managed by activedescendant " +
|
||||
(aIsSelected ? "should" : "shouldn't") +
|
||||
" have the selected state on " + prettyName(aItemID);
|
||||
}
|
||||
}
|
||||
|
||||
////////////////////////////////////////////////////////////////////////////
|
||||
// Test
|
||||
|
||||
//gA11yEventDumpID = "eventdump"; // debug stuff
|
||||
//gA11yEventDumpToConsole = true;
|
||||
|
||||
var gQueue = null;
|
||||
|
||||
function doTest()
|
||||
{
|
||||
// aria-selected
|
||||
testStates("aria_tab1", 0, 0, STATE_SELECTED);
|
||||
testStates("aria_tab2", STATE_SELECTED);
|
||||
testStates("aria_tab3", 0, 0, STATE_SELECTED);
|
||||
testStates("aria_option1", 0, 0, STATE_SELECTED);
|
||||
testStates("aria_option2", STATE_SELECTED);
|
||||
testStates("aria_option3", 0, 0, STATE_SELECTED);
|
||||
testStates("aria_treeitem1", 0, 0, STATE_SELECTED);
|
||||
testStates("aria_treeitem2", STATE_SELECTED);
|
||||
testStates("aria_treeitem3", 0, 0, STATE_SELECTED);
|
||||
|
||||
// selected state when widget item is focused
|
||||
gQueue = new eventQueue(EVENT_FOCUS);
|
||||
|
||||
gQueue.push(new focusARIAItem("aria_tab1", true));
|
||||
gQueue.push(new focusARIAItem("aria_tab2", true));
|
||||
gQueue.push(new focusARIAItem("aria_tab3", false));
|
||||
gQueue.push(new focusARIAItem("aria_option1", true));
|
||||
gQueue.push(new focusARIAItem("aria_option2", true));
|
||||
gQueue.push(new focusARIAItem("aria_option3", false));
|
||||
gQueue.push(new focusARIAItem("aria_treeitem1", true));
|
||||
gQueue.push(new focusARIAItem("aria_treeitem2", true));
|
||||
gQueue.push(new focusARIAItem("aria_treeitem3", false));
|
||||
|
||||
// selected state when widget item is focused (by aria-activedescendant)
|
||||
gQueue.push(new focusActiveDescendantItem("aria_tab5", "aria_tablist2", true));
|
||||
gQueue.push(new focusActiveDescendantItem("aria_tab6", "aria_tablist2", true));
|
||||
gQueue.push(new focusActiveDescendantItem("aria_tab4", "aria_tablist2", false));
|
||||
|
||||
gQueue.invoke(); // SimpleTest.finish() will be called in the end
|
||||
}
|
||||
|
||||
SimpleTest.waitForExplicitFinish();
|
||||
addA11yLoadEvent(doTest);
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<a target="_blank"
|
||||
href="https://bugzilla.mozilla.org/show_bug.cgi?id=653601"
|
||||
title="aria-selected ignored for ARIA tabs">
|
||||
Mozilla Bug 653601
|
||||
</a>
|
||||
<a target="_blank"
|
||||
href="https://bugzilla.mozilla.org/show_bug.cgi?id=526703"
|
||||
title="Focused widget item should expose selected state by default">
|
||||
Mozilla Bug 526703
|
||||
</a>
|
||||
<p id="display"></p>
|
||||
<div id="content" style="display: none"></div>
|
||||
<pre id="test">
|
||||
</pre>
|
||||
|
||||
<!-- tab -->
|
||||
<div id="aria_tablist" role="tablist">
|
||||
<div id="aria_tab1" role="tab" tabindex="0">unselected tab</div>
|
||||
<div id="aria_tab2" role="tab" tabindex="0" aria-selected="true">selected tab</div>
|
||||
<div id="aria_tab3" role="tab" tabindex="0" aria-selected="false">focused explicitly unselected tab</div>
|
||||
</div>
|
||||
|
||||
<!-- listbox -->
|
||||
<div id="aria_listbox" role="listbox">
|
||||
<div id="aria_option1" role="option" tabindex="0">unselected option</div>
|
||||
<div id="aria_option2" role="option" tabindex="0" aria-selected="true">selected option</div>
|
||||
<div id="aria_option3" role="option" tabindex="0" aria-selected="false">focused explicitly unselected option</div>
|
||||
</div>
|
||||
|
||||
<!-- tree -->
|
||||
<div id="aria_tree" role="tree">
|
||||
<div id="aria_treeitem1" role="treeitem" tabindex="0">unselected treeitem</div>
|
||||
<div id="aria_treeitem2" role="treeitem" tabindex="0" aria-selected="true">selected treeitem</div>
|
||||
<div id="aria_treeitem3" role="treeitem" tabindex="0" aria-selected="false">focused explicitly unselected treeitem</div>
|
||||
</div>
|
||||
|
||||
<!-- tab managed by active-descendant -->
|
||||
<div id="aria_tablist2" role="tablist" tabindex="0">
|
||||
<div id="aria_tab4" role="tab" aria-selected="false">focused explicitly unselected tab</div>
|
||||
<div id="aria_tab5" role="tab">initially selected tab</div>
|
||||
<div id="aria_tab6" role="tab">later selected tab</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
Loading…
Reference in New Issue
Block a user