focusmanager.html revision 2241a33ad47b9dc8a5f8db4f2fb7ac9a7eacb65d
b6a72da8ecd1c725f5c9432172ae02d72e09162bTodd Kloots<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
b6a72da8ecd1c725f5c9432172ae02d72e09162bTodd Kloots <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
b6a72da8ecd1c725f5c9432172ae02d72e09162bTodd Kloots <title>YUI FocusManager Node Plugin Tests</title>
b6a72da8ecd1c725f5c9432172ae02d72e09162bTodd Kloots width: 150px;
b6a72da8ecd1c725f5c9432172ae02d72e09162bTodd Kloots background-color: #ccc;
b6a72da8ecd1c725f5c9432172ae02d72e09162bTodd Kloots border: solid 1px #333;
b6a72da8ecd1c725f5c9432172ae02d72e09162bTodd Kloots padding: 10px;
b6a72da8ecd1c725f5c9432172ae02d72e09162bTodd Kloots list-style: none;
b6a72da8ecd1c725f5c9432172ae02d72e09162bTodd Kloots width: auto;
b6a72da8ecd1c725f5c9432172ae02d72e09162bTodd Kloots border: solid 1px #ffcc00;
b6a72da8ecd1c725f5c9432172ae02d72e09162bTodd Kloots background-color: yellow;
b6a72da8ecd1c725f5c9432172ae02d72e09162bTodd Kloots <li><a href="#" class="focusable">Three</a></li>
b6a72da8ecd1c725f5c9432172ae02d72e09162bTodd Kloots <li><a href="#" class="focusable" tabindex="0">Two</a></li>
b6a72da8ecd1c725f5c9432172ae02d72e09162bTodd Kloots <li><a href="#" class="focusable">Three</a></li>
b6a72da8ecd1c725f5c9432172ae02d72e09162bTodd Kloots <li><input type="button" name="button-1" value="Five" class="focusable" disabled></li>
b6a72da8ecd1c725f5c9432172ae02d72e09162bTodd Kloots <li><input type="button" name="button-2" value="Six" class="focusable"></li>
b6a72da8ecd1c725f5c9432172ae02d72e09162bTodd Kloots <li><button type="button" class="focusable" disabled><em>Seven</em></button></li>
b6a72da8ecd1c725f5c9432172ae02d72e09162bTodd Kloots <li><button type="button" class="focusable"><em><em>Eight</em></em></button></li>
b6a72da8ecd1c725f5c9432172ae02d72e09162bTodd Kloots <li><a id="anchor-1" href="#" class="focusable">One</a></li>
b6a72da8ecd1c725f5c9432172ae02d72e09162bTodd Kloots <li><a href="#" class="focusable">Three</a></li>
b6a72da8ecd1c725f5c9432172ae02d72e09162bTodd Kloots <li><a href="#" class="focusable">Three</a></li>
b6a72da8ecd1c725f5c9432172ae02d72e09162bTodd Kloots <li><input type="button" name="button-1" value="Five" class="focusable" disabled></li>
b6a72da8ecd1c725f5c9432172ae02d72e09162bTodd Kloots <li><input type="button" name="button-2" value="Six" class="focusable"></li>
b6a72da8ecd1c725f5c9432172ae02d72e09162bTodd Kloots <li><button type="button" class="focusable" disabled><em>Seven</em></button></li>
b6a72da8ecd1c725f5c9432172ae02d72e09162bTodd Kloots <li><button type="button" class="focusable"><em><em>Eight</em></em></button></li>
b6a72da8ecd1c725f5c9432172ae02d72e09162bTodd Kloots<script src="/yui3/build/yui/yui.js" type="text/javascript"></script>
b6a72da8ecd1c725f5c9432172ae02d72e09162bTodd Kloots YUI({base:"/build/", timeout: 10000}).use("node-event-simulate", "node-focusmanager", "test", "console", function(Y) {
b6a72da8ecd1c725f5c9432172ae02d72e09162bTodd Kloots Y.on("contentready", function () {
b6a72da8ecd1c725f5c9432172ae02d72e09162bTodd Kloots var myConsole = new Y.Console().render();
b6a72da8ecd1c725f5c9432172ae02d72e09162bTodd Kloots var testFocusManager = new Y.Test.Case({
b6a72da8ecd1c725f5c9432172ae02d72e09162bTodd Kloots name: "FocusManager Tests",
b6a72da8ecd1c725f5c9432172ae02d72e09162bTodd Kloots testActiveDescendant: function() {
b6a72da8ecd1c725f5c9432172ae02d72e09162bTodd Kloots // If no value is specified for the "activeDescendant"
b6a72da8ecd1c725f5c9432172ae02d72e09162bTodd Kloots // attribute, the value is interpreted from the markup
b6a72da8ecd1c725f5c9432172ae02d72e09162bTodd Kloots // by using the first descendant whose tabIndex attribute
b6a72da8ecd1c725f5c9432172ae02d72e09162bTodd Kloots // is set to "0"
b6a72da8ecd1c725f5c9432172ae02d72e09162bTodd Kloots var oList1 = Y.Node.get("#list-1");
b6a72da8ecd1c725f5c9432172ae02d72e09162bTodd Kloots descendants: ">li>.focusable",
b6a72da8ecd1c725f5c9432172ae02d72e09162bTodd Kloots keys: { next: "down:40", previous: "down:38" },
b6a72da8ecd1c725f5c9432172ae02d72e09162bTodd Kloots focusClass: "focused",
79f1e6752719a37759550a790d78514b1c3302b5Todd Kloots circular: true
b6a72da8ecd1c725f5c9432172ae02d72e09162bTodd Kloots Y.Assert.isTrue((oList1.focusManager.get("activeDescendant") === 1));
b6a72da8ecd1c725f5c9432172ae02d72e09162bTodd Kloots // If no value is specified for the "activeDescendant"
b6a72da8ecd1c725f5c9432172ae02d72e09162bTodd Kloots // attribute, the value is interpreted from the markup
b6a72da8ecd1c725f5c9432172ae02d72e09162bTodd Kloots // by using the first descendant whose tabIndex attribute
b6a72da8ecd1c725f5c9432172ae02d72e09162bTodd Kloots // is set to "0"
b6a72da8ecd1c725f5c9432172ae02d72e09162bTodd Kloots var oList2 = Y.Node.get("#list-2");
b6a72da8ecd1c725f5c9432172ae02d72e09162bTodd Kloots descendants: ">li>.focusable",
b6a72da8ecd1c725f5c9432172ae02d72e09162bTodd Kloots keys: { next: "down:40", previous: "down:38" },
b6a72da8ecd1c725f5c9432172ae02d72e09162bTodd Kloots focusClass: "focused",
79f1e6752719a37759550a790d78514b1c3302b5Todd Kloots circular: true
b6a72da8ecd1c725f5c9432172ae02d72e09162bTodd Kloots Y.Assert.isTrue((oList2.focusManager.get("activeDescendant") === 0));
b6a72da8ecd1c725f5c9432172ae02d72e09162bTodd Kloots // Clean up for next set of tests
b6a72da8ecd1c725f5c9432172ae02d72e09162bTodd Kloots oList1.unplug("focusManager");
b6a72da8ecd1c725f5c9432172ae02d72e09162bTodd Kloots oList2.unplug("focusManager");
b6a72da8ecd1c725f5c9432172ae02d72e09162bTodd Kloots // The value specified for the activeDescendant attribute
b6a72da8ecd1c725f5c9432172ae02d72e09162bTodd Kloots // via the configuration object, should supercede the
b6a72da8ecd1c725f5c9432172ae02d72e09162bTodd Kloots // value interpreted via the markup
b6a72da8ecd1c725f5c9432172ae02d72e09162bTodd Kloots descendants: ">li>.focusable",
b6a72da8ecd1c725f5c9432172ae02d72e09162bTodd Kloots activeDescendant: 3,
b6a72da8ecd1c725f5c9432172ae02d72e09162bTodd Kloots keys: { next: "down:40", previous: "down:38" },
b6a72da8ecd1c725f5c9432172ae02d72e09162bTodd Kloots focusClass: "focused",
79f1e6752719a37759550a790d78514b1c3302b5Todd Kloots circular: true
b6a72da8ecd1c725f5c9432172ae02d72e09162bTodd Kloots Y.Assert.isTrue((oList1.focusManager.get("activeDescendant") === 3));
b6a72da8ecd1c725f5c9432172ae02d72e09162bTodd Kloots // Setting the "activeDescendant" attribute to -1 should
b6a72da8ecd1c725f5c9432172ae02d72e09162bTodd Kloots // result in none of the descendants being focusable via
b6a72da8ecd1c725f5c9432172ae02d72e09162bTodd Kloots // the keyboard
b6a72da8ecd1c725f5c9432172ae02d72e09162bTodd Kloots oList1.focusManager.set("activeDescendant", -1);
b6a72da8ecd1c725f5c9432172ae02d72e09162bTodd Kloots // Test to make sure that the "tabIndex" attribute of all
b6a72da8ecd1c725f5c9432172ae02d72e09162bTodd Kloots // descendants is set to "-1"
b6a72da8ecd1c725f5c9432172ae02d72e09162bTodd Kloots oList1.focusManager.get("descendants").each(function (node) {
b6a72da8ecd1c725f5c9432172ae02d72e09162bTodd Kloots Y.Assert.isTrue( (node.get("tabIndex") === -1) );
b6a72da8ecd1c725f5c9432172ae02d72e09162bTodd Kloots // Calling "focus" with no arguments should result in none
b6a72da8ecd1c725f5c9432172ae02d72e09162bTodd Kloots // of the descendants being focused
3d15b2280b07c5175f2af409791b701005333c4cTodd Kloots Y.Assert.isFalse(oList1.focusManager.get("focused"));
b6a72da8ecd1c725f5c9432172ae02d72e09162bTodd Kloots // With the "activeDescendant" attribute set to "-1",
b6a72da8ecd1c725f5c9432172ae02d72e09162bTodd Kloots // the user can still focus a descendant by mousing
b6a72da8ecd1c725f5c9432172ae02d72e09162bTodd Kloots // down on it
b6a72da8ecd1c725f5c9432172ae02d72e09162bTodd Kloots oList1.focusManager.get("descendants").item(0).simulate("mousedown");
3d15b2280b07c5175f2af409791b701005333c4cTodd Kloots Y.Assert.isTrue(oList1.focusManager.get("focused"));
b6a72da8ecd1c725f5c9432172ae02d72e09162bTodd Kloots // The "activeDescendant" attribute should return the
b6a72da8ecd1c725f5c9432172ae02d72e09162bTodd Kloots // index of the currently focused descendant
b6a72da8ecd1c725f5c9432172ae02d72e09162bTodd Kloots Y.Assert.isTrue((oList1.focusManager.get("activeDescendant") === 0));
b6a72da8ecd1c725f5c9432172ae02d72e09162bTodd Kloots // With the "activeDescendant" attribute set to "-1",
b6a72da8ecd1c725f5c9432172ae02d72e09162bTodd Kloots // the user can focus a descendant programmically by
b6a72da8ecd1c725f5c9432172ae02d72e09162bTodd Kloots // calling the "focus" method and passing in the index
b6a72da8ecd1c725f5c9432172ae02d72e09162bTodd Kloots // of the descendant to be focused
b6a72da8ecd1c725f5c9432172ae02d72e09162bTodd Kloots oList1.focusManager.set("activeDescendant", -1);
3d15b2280b07c5175f2af409791b701005333c4cTodd Kloots Y.Assert.isTrue(oList1.focusManager.get("focused"));
b6a72da8ecd1c725f5c9432172ae02d72e09162bTodd Kloots // The "activeDescendant" attribute should return the
b6a72da8ecd1c725f5c9432172ae02d72e09162bTodd Kloots // index of the currently focused descendant
b6a72da8ecd1c725f5c9432172ae02d72e09162bTodd Kloots Y.Assert.isTrue((oList1.focusManager.get("activeDescendant") === 1));
b6a72da8ecd1c725f5c9432172ae02d72e09162bTodd Kloots // The "activeDescendant" attribute can also be set to a
b6a72da8ecd1c725f5c9432172ae02d72e09162bTodd Kloots // Node reference
b6a72da8ecd1c725f5c9432172ae02d72e09162bTodd Kloots oList1.focusManager.focus(oList1.focusManager.get("descendants").item(2));
3d15b2280b07c5175f2af409791b701005333c4cTodd Kloots Y.Assert.isTrue(oList1.focusManager.get("focused"));
b6a72da8ecd1c725f5c9432172ae02d72e09162bTodd Kloots // The "activeDescendant" attribute should return the
b6a72da8ecd1c725f5c9432172ae02d72e09162bTodd Kloots // index of the currently focused descendant
b6a72da8ecd1c725f5c9432172ae02d72e09162bTodd Kloots Y.Assert.isTrue((oList1.focusManager.get("activeDescendant") === 2));
b6a72da8ecd1c725f5c9432172ae02d72e09162bTodd Kloots // The "activeDescendant" attribute cannot be set to the
b6a72da8ecd1c725f5c9432172ae02d72e09162bTodd Kloots // index of a disabled Node...
b6a72da8ecd1c725f5c9432172ae02d72e09162bTodd Kloots Y.Assert.isTrue((oList1.focusManager.get("activeDescendant") === 2));
b6a72da8ecd1c725f5c9432172ae02d72e09162bTodd Kloots // ...Or a disabled Node reference
b6a72da8ecd1c725f5c9432172ae02d72e09162bTodd Kloots oList1.focusManager.focus(oList1.focusManager.get("descendants").item(4));
b6a72da8ecd1c725f5c9432172ae02d72e09162bTodd Kloots Y.Assert.isTrue((oList1.focusManager.get("activeDescendant") === 2));
b6a72da8ecd1c725f5c9432172ae02d72e09162bTodd Kloots // TEST #10:
b6a72da8ecd1c725f5c9432172ae02d72e09162bTodd Kloots // There should be one element with the CSS class of
b6a72da8ecd1c725f5c9432172ae02d72e09162bTodd Kloots // "focused" applied
b6a72da8ecd1c725f5c9432172ae02d72e09162bTodd Kloots Y.Assert.isTrue((Y.all(".focused").size() === 1));
b6a72da8ecd1c725f5c9432172ae02d72e09162bTodd Kloots // There should be no elements with the CSS class of
b6a72da8ecd1c725f5c9432172ae02d72e09162bTodd Kloots // "focused" applied
b6a72da8ecd1c725f5c9432172ae02d72e09162bTodd Kloots Y.Assert.isTrue((Y.all(".focused").size() === 0));
b6a72da8ecd1c725f5c9432172ae02d72e09162bTodd Kloots // Clean up for next set of tests
b6a72da8ecd1c725f5c9432172ae02d72e09162bTodd Kloots oList1.unplug("focusManager");
b6a72da8ecd1c725f5c9432172ae02d72e09162bTodd Kloots testDescendants: function() {
b6a72da8ecd1c725f5c9432172ae02d72e09162bTodd Kloots // Check to make sure that the "descendants" attribute
b6a72da8ecd1c725f5c9432172ae02d72e09162bTodd Kloots // returns a NodeList of the correct size
b6a72da8ecd1c725f5c9432172ae02d72e09162bTodd Kloots var oList1 = Y.Node.get("#list-1");
b6a72da8ecd1c725f5c9432172ae02d72e09162bTodd Kloots descendants: ">li>.focusable",
b6a72da8ecd1c725f5c9432172ae02d72e09162bTodd Kloots keys: { next: "down:40", previous: "down:38" },
b6a72da8ecd1c725f5c9432172ae02d72e09162bTodd Kloots focusClass: "focused",
79f1e6752719a37759550a790d78514b1c3302b5Todd Kloots circular: true
b6a72da8ecd1c725f5c9432172ae02d72e09162bTodd Kloots Y.Assert.isTrue((oList1.focusManager.get("descendants").size() === 8));
b6a72da8ecd1c725f5c9432172ae02d72e09162bTodd Kloots // Can update the "descendants" attribute on the fly
b6a72da8ecd1c725f5c9432172ae02d72e09162bTodd Kloots oList1.focusManager.set("descendants", ".focusable");
b6a72da8ecd1c725f5c9432172ae02d72e09162bTodd Kloots Y.Assert.isTrue((oList1.focusManager.get("descendants").size() === 12));
b6a72da8ecd1c725f5c9432172ae02d72e09162bTodd Kloots // Can modify the child nodes of the current owner Node
b6a72da8ecd1c725f5c9432172ae02d72e09162bTodd Kloots // of the FocusManager and call "refresh" to sync the
b6a72da8ecd1c725f5c9432172ae02d72e09162bTodd Kloots // number of descendants
b6a72da8ecd1c725f5c9432172ae02d72e09162bTodd Kloots var oSublist = Y.Node.get("#list-1-2"),
b6a72da8ecd1c725f5c9432172ae02d72e09162bTodd Kloots oParentNode = oSublist.get("parentNode");
b6a72da8ecd1c725f5c9432172ae02d72e09162bTodd Kloots Y.Assert.isTrue((oList1.focusManager.get("descendants").size() === 8));
b6a72da8ecd1c725f5c9432172ae02d72e09162bTodd Kloots // Clean up for next set of tests
b6a72da8ecd1c725f5c9432172ae02d72e09162bTodd Kloots oList1.unplug("focusManager");
3d15b2280b07c5175f2af409791b701005333c4cTodd Kloots testFocusedAttribute: function() {
3d15b2280b07c5175f2af409791b701005333c4cTodd Kloots // The "focused" attribute should be false by default
b6a72da8ecd1c725f5c9432172ae02d72e09162bTodd Kloots var oList2 = Y.Node.get("#list-2");
b6a72da8ecd1c725f5c9432172ae02d72e09162bTodd Kloots descendants: ">li>.focusable",
b6a72da8ecd1c725f5c9432172ae02d72e09162bTodd Kloots keys: { next: "down:40", previous: "down:38" },
b6a72da8ecd1c725f5c9432172ae02d72e09162bTodd Kloots focusClass: "focused",
79f1e6752719a37759550a790d78514b1c3302b5Todd Kloots circular: true
3d15b2280b07c5175f2af409791b701005333c4cTodd Kloots Y.Assert.isFalse(oList2.focusManager.get("focused"));
b6a72da8ecd1c725f5c9432172ae02d72e09162bTodd Kloots // Calling the "focus" method with no arguments should
3d15b2280b07c5175f2af409791b701005333c4cTodd Kloots // result in the "focused" attribute being set to true
b6a72da8ecd1c725f5c9432172ae02d72e09162bTodd Kloots // and the "activeDescendant" attribute being 0
3d15b2280b07c5175f2af409791b701005333c4cTodd Kloots Y.Assert.isTrue(oList2.focusManager.get("focused"));
b6a72da8ecd1c725f5c9432172ae02d72e09162bTodd Kloots Y.Assert.isTrue((oList2.focusManager.get("activeDescendant") === 0));
b6a72da8ecd1c725f5c9432172ae02d72e09162bTodd Kloots // Calling the "blur" method should result in the
3d15b2280b07c5175f2af409791b701005333c4cTodd Kloots // "focused" attribute being set to false, the
b6a72da8ecd1c725f5c9432172ae02d72e09162bTodd Kloots // removal of the the "focused" CSS class,
b6a72da8ecd1c725f5c9432172ae02d72e09162bTodd Kloots // and the "activeDescendant" attribute being still 0
b6a72da8ecd1c725f5c9432172ae02d72e09162bTodd Kloots Y.Assert.isTrue((Y.all(".focused").size() === 0));
3d15b2280b07c5175f2af409791b701005333c4cTodd Kloots Y.Assert.isFalse(oList2.focusManager.get("focused"));
b6a72da8ecd1c725f5c9432172ae02d72e09162bTodd Kloots Y.Assert.isTrue((oList2.focusManager.get("activeDescendant") === 0));
b6a72da8ecd1c725f5c9432172ae02d72e09162bTodd Kloots // Focusing another element in the DOM will result in the
3d15b2280b07c5175f2af409791b701005333c4cTodd Kloots // "focused" attribute being set to false, the
b6a72da8ecd1c725f5c9432172ae02d72e09162bTodd Kloots // removal of the "focused" CSS class,
b6a72da8ecd1c725f5c9432172ae02d72e09162bTodd Kloots // and the "activeDescendant" attribute being still 0
b6a72da8ecd1c725f5c9432172ae02d72e09162bTodd Kloots Y.Node.get("#anchor-1").focus();
b6a72da8ecd1c725f5c9432172ae02d72e09162bTodd Kloots Y.Assert.isTrue((Y.all(".focused").size() === 0));
3d15b2280b07c5175f2af409791b701005333c4cTodd Kloots Y.Assert.isFalse(oList2.focusManager.get("focused"));
b6a72da8ecd1c725f5c9432172ae02d72e09162bTodd Kloots Y.Assert.isTrue((oList2.focusManager.get("activeDescendant") === 0));
b6a72da8ecd1c725f5c9432172ae02d72e09162bTodd Kloots // Clean up for next set of tests
b6a72da8ecd1c725f5c9432172ae02d72e09162bTodd Kloots oList2.unplug("focusManager");
79f1e6752719a37759550a790d78514b1c3302b5Todd Kloots testFocusClassAttribute: function() {
79f1e6752719a37759550a790d78514b1c3302b5Todd Kloots var oList1 = Y.Node.get("#list-1");
79f1e6752719a37759550a790d78514b1c3302b5Todd Kloots descendants: ">li>.focusable",
79f1e6752719a37759550a790d78514b1c3302b5Todd Kloots keys: { next: "down:40", previous: "down:38" },
79f1e6752719a37759550a790d78514b1c3302b5Todd Kloots focusClass: "focused",
79f1e6752719a37759550a790d78514b1c3302b5Todd Kloots activeDescendant: 0,
79f1e6752719a37759550a790d78514b1c3302b5Todd Kloots circular: true
2241a33ad47b9dc8a5f8db4f2fb7ac9a7eacb65dTodd Kloots // TEST #1: Make sure that the "focused" class is
2241a33ad47b9dc8a5f8db4f2fb7ac9a7eacb65dTodd Kloots // applied to the first descendant
79f1e6752719a37759550a790d78514b1c3302b5Todd Kloots var nodes = oList1.queryAll(".focused");
79f1e6752719a37759550a790d78514b1c3302b5Todd Kloots Y.Assert.isTrue(oList1.focusManager.get("descendants").item(0).hasClass("focused"));
2241a33ad47b9dc8a5f8db4f2fb7ac9a7eacb65dTodd Kloots // TEST #2: Make sure that the "focused" class is not
2241a33ad47b9dc8a5f8db4f2fb7ac9a7eacb65dTodd Kloots // not applied to any of the descendants
79f1e6752719a37759550a790d78514b1c3302b5Todd Kloots nodes = oList1.queryAll(".focused");
79f1e6752719a37759550a790d78514b1c3302b5Todd Kloots Y.Assert.isFalse(oList1.focusManager.get("descendants").item(0).hasClass("focused"));
2241a33ad47b9dc8a5f8db4f2fb7ac9a7eacb65dTodd Kloots // TEST #3: Make sure that the "focused" class is
2241a33ad47b9dc8a5f8db4f2fb7ac9a7eacb65dTodd Kloots // applied to the parent node of the first descendant
79f1e6752719a37759550a790d78514b1c3302b5Todd Kloots className: "focused",
79f1e6752719a37759550a790d78514b1c3302b5Todd Kloots fn: function (node) {
79f1e6752719a37759550a790d78514b1c3302b5Todd Kloots return node.get("parentNode");
79f1e6752719a37759550a790d78514b1c3302b5Todd Kloots nodes = oList1.queryAll(".focused");
79f1e6752719a37759550a790d78514b1c3302b5Todd Kloots Y.Assert.isTrue(oList1.focusManager.get("descendants").item(0).get("parentNode").hasClass("focused"));
2241a33ad47b9dc8a5f8db4f2fb7ac9a7eacb65dTodd Kloots // TEST #4: Make sure that the "focused" class is not
2241a33ad47b9dc8a5f8db4f2fb7ac9a7eacb65dTodd Kloots // not applied to any of the descendants
79f1e6752719a37759550a790d78514b1c3302b5Todd Kloots nodes = oList1.queryAll(".focused");
79f1e6752719a37759550a790d78514b1c3302b5Todd Kloots Y.Assert.isFalse(oList1.focusManager.get("descendants").item(0).get("parentNode").hasClass("focused"));
b6a72da8ecd1c725f5c9432172ae02d72e09162bTodd Kloots Y.Test.Runner.add(testFocusManager);
b6a72da8ecd1c725f5c9432172ae02d72e09162bTodd Kloots }, "#list-2");