Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Browse files

Set the aria-hidden attribute when setting the visibility of a control.

R=nnaze
DELTA=115 (104 added, 1 deleted, 10 changed)


Revision created by MOE tool push_codebase.
MOE_MIGRATION=6178


git-svn-id: http://closure-library.googlecode.com/svn/trunk@2457 0b95b8e8-c90f-11de-9d4f-f947ee5921c8
  • Loading branch information...
commit 95dc2df14173c33c208387cf4ede98c726ae0175 1 parent a463bcc
michaelthomas@google.com authored
View
2  closure/goog/deps.js
@@ -671,7 +671,7 @@ goog.addDependency('ui/containerrenderer.js', ['goog.ui.ContainerRenderer'], ['g
goog.addDependency('ui/containerscroller.js', ['goog.ui.ContainerScroller'], ['goog.Timer', 'goog.events.EventHandler', 'goog.style', 'goog.ui.Component', 'goog.ui.Component.EventType', 'goog.ui.Container.EventType']);
goog.addDependency('ui/control.js', ['goog.ui.Control'], ['goog.array', 'goog.dom', 'goog.events.BrowserEvent.MouseButton', 'goog.events.Event', 'goog.events.EventType', 'goog.events.KeyCodes', 'goog.events.KeyHandler', 'goog.events.KeyHandler.EventType', 'goog.string', 'goog.ui.Component', 'goog.ui.Component.Error', 'goog.ui.Component.EventType', 'goog.ui.Component.State', 'goog.ui.ControlContent', 'goog.ui.ControlRenderer', 'goog.ui.decorate', 'goog.ui.registry', 'goog.userAgent']);
goog.addDependency('ui/controlcontent.js', ['goog.ui.ControlContent'], []);
-goog.addDependency('ui/controlrenderer.js', ['goog.ui.ControlRenderer'], ['goog.array', 'goog.dom', 'goog.dom.a11y', 'goog.dom.a11y.State', 'goog.dom.classes', 'goog.object', 'goog.style', 'goog.ui.Component.State', 'goog.ui.ControlContent', 'goog.userAgent']);
+goog.addDependency('ui/controlrenderer.js', ['goog.ui.ControlRenderer'], ['goog.a11y.aria', 'goog.a11y.aria.State', 'goog.array', 'goog.dom', 'goog.dom.a11y', 'goog.dom.a11y.State', 'goog.dom.classes', 'goog.object', 'goog.style', 'goog.ui.Component.State', 'goog.ui.ControlContent', 'goog.userAgent']);
goog.addDependency('ui/cookieeditor.js', ['goog.ui.CookieEditor'], ['goog.dom', 'goog.dom.TagName', 'goog.events.EventType', 'goog.net.cookies', 'goog.string', 'goog.style', 'goog.ui.Component']);
goog.addDependency('ui/css3buttonrenderer.js', ['goog.ui.Css3ButtonRenderer'], ['goog.dom', 'goog.dom.TagName', 'goog.dom.classes', 'goog.ui.Button', 'goog.ui.ButtonRenderer', 'goog.ui.ControlContent', 'goog.ui.INLINE_BLOCK_CLASSNAME', 'goog.ui.registry']);
goog.addDependency('ui/css3menubuttonrenderer.js', ['goog.ui.Css3MenuButtonRenderer'], ['goog.dom', 'goog.dom.TagName', 'goog.ui.ControlContent', 'goog.ui.INLINE_BLOCK_CLASSNAME', 'goog.ui.MenuButton', 'goog.ui.MenuButtonRenderer', 'goog.ui.registry']);
View
30 closure/goog/ui/controlrenderer.js
@@ -21,15 +21,17 @@
goog.provide('goog.ui.ControlRenderer');
+goog.require('goog.a11y.aria');
+goog.require('goog.a11y.aria.State');
goog.require('goog.array');
+goog.require('goog.asserts');
goog.require('goog.dom');
goog.require('goog.dom.a11y');
goog.require('goog.dom.a11y.State');
goog.require('goog.dom.classes');
goog.require('goog.object');
goog.require('goog.style');
-goog.require('goog.ui.Component.State');
-goog.require('goog.ui.ControlContent');
+goog.require('goog.ui.Component');
goog.require('goog.userAgent');
@@ -389,21 +391,26 @@ goog.ui.ControlRenderer.prototype.setAriaRole = function(element,
goog.ui.ControlRenderer.prototype.setAriaStates = function(control, element) {
goog.asserts.assert(control);
goog.asserts.assert(element);
+
+ if (!control.isVisible()) {
+ goog.a11y.aria.setState(
+ element, goog.a11y.aria.State.HIDDEN, !control.isVisible());
+ }
if (!control.isEnabled()) {
- this.updateAriaState(element, goog.ui.Component.State.DISABLED,
- true);
+ this.updateAriaState(
+ element, goog.ui.Component.State.DISABLED, !control.isEnabled());
}
if (control.isSupportedState(goog.ui.Component.State.SELECTED)) {
- this.updateAriaState(element, goog.ui.Component.State.SELECTED,
- control.isSelected());
+ this.updateAriaState(
+ element, goog.ui.Component.State.SELECTED, control.isSelected());
}
if (control.isSupportedState(goog.ui.Component.State.CHECKED)) {
- this.updateAriaState(element, goog.ui.Component.State.CHECKED,
- control.isChecked());
+ this.updateAriaState(
+ element, goog.ui.Component.State.CHECKED, control.isChecked());
}
if (control.isSupportedState(goog.ui.Component.State.OPENED)) {
- this.updateAriaState(element, goog.ui.Component.State.OPENED,
- control.isOpen());
+ this.updateAriaState(
+ element, goog.ui.Component.State.OPENED, control.isOpen());
}
};
@@ -500,6 +507,9 @@ goog.ui.ControlRenderer.prototype.setVisible = function(element, visible) {
// The base class implementation is trivial; subclasses should override as
// needed. It should be possible to do animated reveals, for example.
goog.style.showElement(element, visible);
+ if (element) {
+ goog.a11y.aria.setState(element, goog.a11y.aria.State.HIDDEN, !visible);
+ }
};
View
92 closure/goog/ui/controlrenderer_test.html
@@ -376,6 +376,94 @@
goog.dom.a11y.Role.BUTTON, goog.dom.a11y.getRole(bar));
}
+ function testSetAriaStatesHidden() {
+ sandbox.innerHTML = '<div id="foo">Foo</div><div id="bar">Bar</div>';
+ var foo = goog.dom.getElement('foo');
+
+ control.setVisible(true);
+ controlRenderer.setAriaStates(control, foo);
+
+ assertEquals('ControlRenderer did not set aria-hidden.', '',
+ goog.dom.a11y.getState(foo, goog.a11y.aria.State.HIDDEN));
+
+ control.setVisible(false);
+ controlRenderer.setAriaStates(control, foo);
+
+ assertEquals('ControlRenderer did not set aria-hidden.', 'true',
+ goog.dom.a11y.getState(foo, goog.a11y.aria.State.HIDDEN));
+ }
+
+ function testSetAriaStatesDisabled() {
+ sandbox.innerHTML = '<div id="foo">Foo</div><div id="bar">Bar</div>';
+ var foo = goog.dom.getElement('foo');
+
+ control.setEnabled(true);
+ controlRenderer.setAriaStates(control, foo);
+
+ assertEquals('ControlRenderer did not set aria-disabled.', '',
+ goog.dom.a11y.getState(foo, goog.a11y.aria.State.DISABLED));
+
+ control.setEnabled(false);
+ controlRenderer.setAriaStates(control, foo);
+
+ assertEquals('ControlRenderer did not set aria-disabled.', 'true',
+ goog.dom.a11y.getState(foo, goog.a11y.aria.State.DISABLED));
+ }
+
+ function testSetAriaStatesSelected() {
+ sandbox.innerHTML = '<div id="foo">Foo</div><div id="bar">Bar</div>';
+ var foo = goog.dom.getElement('foo');
+ control.setSupportedState(goog.ui.Component.State.SELECTED, true);
+
+ control.setSelected(true);
+ controlRenderer.setAriaStates(control, foo);
+
+ assertEquals('ControlRenderer did not set aria-selected.', 'true',
+ goog.dom.a11y.getState(foo, goog.a11y.aria.State.SELECTED));
+
+ control.setSelected(false);
+ controlRenderer.setAriaStates(control, foo);
+
+ assertEquals('ControlRenderer did not set aria-selected.', 'false',
+ goog.dom.a11y.getState(foo, goog.a11y.aria.State.SELECTED));
+ }
+
+ function testSetAriaStatesChecked() {
+ sandbox.innerHTML = '<div id="foo">Foo</div><div id="bar">Bar</div>';
+ var foo = goog.dom.getElement('foo');
+ control.setSupportedState(goog.ui.Component.State.CHECKED, true);
+
+ control.setChecked(true);
+ controlRenderer.setAriaStates(control, foo);
+
+ assertEquals('ControlRenderer did not set aria-checked.', 'true',
+ goog.dom.a11y.getState(foo, goog.a11y.aria.State.CHECKED));
+
+ control.setChecked(false);
+ controlRenderer.setAriaStates(control, foo);
+
+ assertEquals('ControlRenderer did not set aria-checked.', 'false',
+ goog.dom.a11y.getState(foo, goog.a11y.aria.State.CHECKED));
+ }
+
+ function testSetAriaStatesExpanded() {
+ sandbox.innerHTML = '<div id="foo">Foo</div><div id="bar">Bar</div>';
+ var foo = goog.dom.getElement('foo');
+ control.setSupportedState(goog.ui.Component.State.OPENED, true);
+
+ control.setOpen(true);
+ controlRenderer.setAriaStates(control, foo);
+
+ assertEquals('ControlRenderer did not set aria-expanded.', 'true',
+ goog.dom.a11y.getState(foo, goog.a11y.aria.State.EXPANDED));
+
+ control.setOpen(false);
+ controlRenderer.setAriaStates(control, foo);
+
+ assertEquals('ControlRenderer did not set aria-expanded.', 'false',
+ goog.dom.a11y.getState(foo, goog.a11y.aria.State.EXPANDED));
+ }
+
function testSetAllowTextSelection() {
sandbox.innerHTML = '<div id="foo"><span>Foo</span></div>';
var foo = goog.dom.getElement('foo');
@@ -479,8 +567,12 @@
var foo = goog.dom.getElement('foo');
assertTrue('Element must be visible', foo.style.display != 'none');
controlRenderer.setVisible(foo, true);
+ assertEquals('ControlRenderer did not set aria-hidden.', 'false',
+ goog.dom.a11y.getState(foo, goog.a11y.aria.State.HIDDEN));
assertTrue('Element must still be visible', foo.style.display != 'none');
controlRenderer.setVisible(foo, false);
+ assertEquals('ControlRenderer did not set aria-hidden.', 'true',
+ goog.dom.a11y.getState(foo, goog.a11y.aria.State.HIDDEN));
assertTrue('Element must be hidden', foo.style.display == 'none');
}
Please sign in to comment.
Something went wrong with that request. Please try again.