Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP

Loading…

Add proper ARIA management for hidden and disabled states #1649

Open
wants to merge 1 commit into from

2 participants

@gerardkcohen

This simple pull request adds ARIA state management to Widget's _uiSetVisible and _uiSetDisabled methods by setting the aria-hidden and aria-disabled attributes in order to properly communicate these states to assitistive technology users.

Doc's and unit tests are updated.

@juandopazo
Collaborator

Looks good! Do we know if the way screen readers read these attributes is generic enough to be on Widget?

@gerardkcohen

I went back and forth with this question before I made the PR and I was hoping you would be the tie breaker. But honestly, there are no generics with the screen reader. If aria-hidden, it's not communicated. If aria-disabled, its announced as such and it cannot be interacted with. There is not much left to the developer to decided, as in the case with the CSS needed to support these states. If the classes are meant to support/ communicate state, then we really need to provide the same to AT. There is also the potential conflict between the focused and disabled state, as disabled elements may not be focusable, but that is a different conversation.

@juandopazo
Collaborator

That's what I was expecting to hear. :+1: from my side.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Commits on Feb 24, 2014
  1. Add proper ARIA management for hidden and disabled states

    Gerard K. Cohen authored
This page is out of date. Refresh to see the latest.
View
25 src/widget/docs/index.mustache
@@ -64,8 +64,8 @@ the same `Attribute`, `Event.Provider` and `Plugin.Host` support as <a href="../
<tr><td>`srcNode`</td><td>An existing node in the document provided by application developers when progressively enhancing existing markup to create the widget. By default, this resolves to the `contentBox`.</td></tr>
<tr><td>`tabIndex`</td><td>The tabIndex, applied to the bounding box.</td></tr>
<tr><td>`focused`</td><td>Flag, indicating if the widget currently has focus. `Widget` marks the bounding box with a "focused" class, but other than that the focus implementation is left to the specific widget class.</td></tr>
- <tr><td>`disabled`</td><td>Flag, indicating if the widget is disabled. `Widget` marks the bounding box with a "disabled" class, but other than that the disabled implementation is left to the specific widget class.</td></tr>
- <tr><td>`visible`</td><td>Flag, indicating whether or not the widget is visible. `Widget` marks the bounding box with a "hidden" class. The hidden implementation is left to the CSS delivered by the specific widget class (viz. whether or not the widget uses visibility, display or off screen positioning to actually hide the widget).</td></tr>
+ <tr><td>`disabled`</td><td>Flag, indicating if the widget is disabled. `Widget` marks the bounding box with a "disabled" class and sets the `aria-disabled` attribute to "true", but other than that the disabled implementation is left to the specific widget class.</td></tr>
+ <tr><td>`visible`</td><td>Flag, indicating whether or not the widget is visible. `Widget` marks the bounding box with a "hidden" class and sets the `aria-hidden` attribute to "true". The hidden implementation is left to the CSS delivered by the specific widget class (viz. whether or not the widget uses visibility, display or off screen positioning to actually hide the widget).</td></tr>
<tr><td>`height`</td><td>String with units, or a number, representing the height of the widget. If a number is provided, the default unit, defined by `Widget`'s `DEF_UNIT`, property is used. The height is applied to the bounding box.</td></tr>
<tr><td>`width`</td><td>String with units, or a number, representing the width of the widget. If a number is provided, the default unit, defined by `Widget`'s `DEF_UNIT`, property is used. The width is applied to the bounding box.</td></tr>
<tr><td>`strings`</td><td>The collection of strings used to label elements of the widget's UI. These should ideally be packaged separately from the Widget code, as discussed in the <a href="../intl/intl-basic.html">Language Resource Bundles</a> example.</td></tr>
@@ -436,6 +436,27 @@ Of the state-based rules above, all widgets will definitely end up providing a "
Whether or not CSS rules for the other two states are provided is usually a function of whether or not the widget needs special UI handled for the "disabled" and "focused" states.
</p>
+<h3 id="acessibility">Accessibility Considerations</h3>
+<p>Along with state being managed via CSS with proper class names, care is taken to communicate these states to assisitive technology users with ARIA. The following ARIA attributes are managed:</p>
+
+<table>
+ <tr>
+ <th>State</th>
+ <th>ARIA Attribute</th>
+ <th>CSS Class Applied</th>
+ </tr>
+ <tr>
+ <td>hidden</td>
+ <td>aria-hidden</td>
+ <td>yui3-[widgetname]-hidden</td>
+ </tr>
+ <tr>
+ <td>disabled</td>
+ <td>aria-disabled</td>
+ <td>yui3-[widgetname]-disabled</td>
+ </tr>
+</table>
+
<h3 id="uievents">Default UI Events</h3>
<p>
View
11 src/widget/js/Widget.js
@@ -48,6 +48,9 @@ var L = Y.Lang,
CHANGE = "Change",
LOADING = "loading",
+ ARIA_HIDDEN = 'aria-hidden',
+ ARIA_DISABLED = 'aria-disabled',
+
_UISET = "_uiSet",
EMPTY_STR = "",
@@ -1027,7 +1030,9 @@ Y.extend(Widget, Y.Base, {
* @param {boolean} val
*/
_uiSetVisible: function(val) {
- this.get(BOUNDING_BOX).toggleClass(this.getClassName(HIDDEN), !val);
+ var boundingBox = this.get(BOUNDING_BOX);
+ boundingBox.toggleClass(this.getClassName(HIDDEN), !val);
+ boundingBox.set(ARIA_HIDDEN, !val);
},
/**
@@ -1038,7 +1043,9 @@ Y.extend(Widget, Y.Base, {
* @param {boolean} val
*/
_uiSetDisabled: function(val) {
- this.get(BOUNDING_BOX).toggleClass(this.getClassName(DISABLED), val);
+ var boundingBox = this.get(BOUNDING_BOX);
+ boundingBox.toggleClass(this.getClassName(DISABLED), val);
+ boundingBox.set(ARIA_DISABLED, val);
},
/**
View
12 src/widget/tests/unit/widget.html
@@ -360,16 +360,19 @@
Y.Assert.isFalse(w.get("disabled"), "disabled should be false by default");
Y.Assert.isFalse(bb.hasClass(className), "bb should not have a disabled marker class");
+ Y.Assert.areEqual('false', bb.getAttribute('aria-disabled'), 'aria-disabled should be false');
w.set("disabled", true);
Y.Assert.isTrue(w.get("disabled"), "disabled should be true");
Y.Assert.isTrue(bb.hasClass(className), "bb should have a disabled marker");
+ Y.Assert.areEqual('true', bb.getAttribute('aria-disabled'), 'aria-disabled should be true');
w.set("disabled", false);
Y.Assert.isFalse(w.get("disabled"), "disabled should be false");
Y.Assert.isFalse(bb.hasClass(className), "bb should not have a disabled marker class");
+ Y.Assert.areEqual('false', bb.getAttribute('aria-disabled'), 'aria-disabled should be false');
w.destroy();
},
@@ -382,16 +385,19 @@
Y.Assert.isFalse(w.get("disabled"), "disabled should be false by default");
Y.Assert.isFalse(bb.hasClass(className), "bb should not have a disabled marker class");
+ Y.Assert.areEqual('false', bb.getAttribute('aria-disabled'), 'aria-disabled should be false');
w.disable();
Y.Assert.isTrue(w.get("disabled"), "disabled should be true");
Y.Assert.isTrue(bb.hasClass(className), "bb should have a disabled marker");
+ Y.Assert.areEqual('true', bb.getAttribute('aria-disabled'), 'aria-disabled should be true');
w.enable();
Y.Assert.isFalse(w.get("disabled"), "disabled should be false");
Y.Assert.isFalse(bb.hasClass(className), "bb should not have a disabled marker class");
+ Y.Assert.areEqual('false', bb.getAttribute('aria-disabled'), 'aria-disabled should be false');
w.destroy();
},
@@ -462,18 +468,21 @@
Y.Assert.isTrue(w.get("visible"), "visible should be true by default");
Y.Assert.isFalse(bb.hasClass(className), "bb should not have a hidden marker class");
+ Y.Assert.areEqual('false', bb.getAttribute('aria-hidden'), 'aria-hidden should be false');
Y.Assert.areNotEqual("none", bb.getStyle("display"), "widget should not be display:none");
w.set("visible", false);
Y.Assert.isFalse(w.get("visible"), "visible should be false");
Y.Assert.isTrue(bb.hasClass(className), "bb should have an hidden marker");
+ Y.Assert.areEqual('true', bb.getAttribute('aria-hidden'), 'aria-hidden should be true');
Y.Assert.areEqual("none", bb.getStyle("display"), "Default CSS should hide widget using display:none");
w.set("visible", true);
Y.Assert.isTrue(w.get("visible"), "visible should be true by default");
Y.Assert.isFalse(bb.hasClass(className), "bb should not have a hidden marker class");
+ Y.Assert.areEqual('false', bb.getAttribute('aria-hidden'), 'aria-hidden should be false');
Y.Assert.areNotEqual("none", bb.getStyle("display"), "widget should not be display:none");
w.destroy();
@@ -487,18 +496,21 @@
Y.Assert.isTrue(w.get("visible"), "visible should be true by default");
Y.Assert.isFalse(bb.hasClass(className), "bb should not have a hidden marker class");
+ Y.Assert.areEqual('false', bb.getAttribute('aria-hidden'), 'aria-hidden should be false');
Y.Assert.areNotEqual("none", bb.getStyle("display"), "widget should not be display:none");
w.hide();
Y.Assert.isFalse(w.get("visible"), "visible should be false");
Y.Assert.isTrue(bb.hasClass(className), "bb should have an hidden marker");
+ Y.Assert.areEqual('true', bb.getAttribute('aria-hidden'), 'aria-hidden should be true');
Y.Assert.areEqual("none", bb.getStyle("display"), "Default CSS should hide widget using display:none");
w.show();
Y.Assert.isTrue(w.get("visible"), "visible should be true by default");
Y.Assert.isFalse(bb.hasClass(className), "bb should not have a hidden marker class");
+ Y.Assert.areEqual('false', bb.getAttribute('aria-hidden'), 'aria-hidden should be false');
Y.Assert.areNotEqual("none", bb.getStyle("display"), "widget should not be display:none");
w.destroy();
Something went wrong with that request. Please try again.