Permalink
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...
1 parent a463bcc commit 95dc2df14173c33c208387cf4ede98c726ae0175 michaelthomas@google.com committed Jan 23, 2013
Showing with 113 additions and 11 deletions.
  1. +1 −1 closure/goog/deps.js
  2. +20 −10 closure/goog/ui/controlrenderer.js
  3. +92 −0 closure/goog/ui/controlrenderer_test.html
View

Some generated files are not rendered by default. Learn more.

Oops, something went wrong.
@@ -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);
+ }
};
@@ -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');
}

0 comments on commit 95dc2df

Please sign in to comment.