Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Add proper ARIA management for hidden and disabled states #1649

Open
wants to merge 1 commit into
base: dev-master
Choose a base branch
from
Open

Add proper ARIA management for hidden and disabled states #1649

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
25 changes: 23 additions & 2 deletions src/widget/docs/index.mustache
View file
Open in desktop
Expand Up @@ -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>
Expand Down Expand Up @@ -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>
Expand Down
11 changes: 9 additions & 2 deletions src/widget/js/Widget.js
View file
Open in desktop
Expand Up @@ -48,6 +48,9 @@ var L = Y.Lang,
CHANGE = "Change",
LOADING = "loading",

ARIA_HIDDEN = 'aria-hidden',
ARIA_DISABLED = 'aria-disabled',

_UISET = "_uiSet",

EMPTY_STR = "",
Expand Down Expand Up @@ -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);
},

/**
Expand All @@ -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);
},

/**
Expand Down
12 changes: 12 additions & 0 deletions src/widget/tests/unit/widget.html
View file
Open in desktop
Expand Up @@ -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();
},
Expand All @@ -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();
},
Expand Down Expand Up @@ -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();
Expand All @@ -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();
Expand Down