YUI Library Examples: Focus Manager Node Plugin: Accessible TabView

<h3 id="tabview-heading">Today's News</h3>
<div id="tabview-1">
    <ul>
        <li class="yui-tab yui-tab-selected"><a href="#top-stories"><em>Top Stories</em></a></li>
        <li class="yui-tab"><a href="#world-news"><em>World</em></a></li>
        <li class="yui-tab"><a href="#entertainment-news"><em>Entertainment</em></a></li>
        <li class="yui-tab"><a href="#sports-news"><em>Sports</em></a></li>
        <li class="yui-tab"><a href="#technology-news"><em>Technology</em></a></li>
    </ul>
    <div>
        <div class="yui-tabpanel yui-tabpanel-selected" id="top-stories">
            <!-- Tab Panel Content Here  -->
        </div>
        <div class="yui-tabpanel" id="world-news">
            <!-- Tab Panel Content Here  -->
        </div>
        <div class="yui-tabpanel" id="entertainment-news">
            <!-- Tab Panel Content Here  -->
        </div>
        <div class="yui-tabpanel" id="sports-news">
            <!-- Tab Panel Content Here  -->
        </div>
        <div class="yui-tabpanel" id="technology-news">
            <!-- Tab Panel Content Here  -->
        </div>
    </div>
</div>

function getFeed($sFeed) {
 
    $params = array(
        "q" => ('select title,link from rss where url="http://rss.news.yahoo.com/rss/$sFeed"'),
        "format" => "json"
    );
 
    $encoded_params = array();
 
    foreach ($params as $k => $v) {
        $encoded_params[] = urlencode($k)."=".urlencode($v);
    }
 
    $url = "http://query.yahooapis.com/v1/public/yql?".implode("&", $encoded_params);
 
    $ch = curl_init();
    curl_setopt($ch, CURLOPT_URL, $url);
    curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
    $rsp = curl_exec($ch);
    curl_close($ch);
 
    if ($rsp !== false) {
 
        $rsp_obj = json_decode($rsp, true);
 
        $results = $rsp_obj["query"]["results"]["item"];
 
        $list = ""; // HTML output
 
        $nResults = count($results);
 
        if ($nResults > 10) {
            $nResults = 9;
        }
 
        for ($i = 0; $i<= $nResults; $i++) {
 
            $result = $results[$i];
 
            $list.= <<< END_OF_HTML
            <li>
                <a href="${result["link"]}"><q>${result["title"]}</q></a>
            </li>
END_OF_HTML;
 
        }
 
        return ("<ul>" . $list . "</ul>");
 
    }
 
}
 

YUI({
 
    base: "../../build/",
    modules: {
        "tabviewcss": {
            type: "css",
            fullpath: "assets/tabview.css"
        },
        "tabviewjs": {
            type: "js",
            fullpath: "assets/tabview.js",
            requires: ["node-focusmanager", "tabviewcss"]
        }
 
    },
    timeout: 10000
 
}).use("tabviewjs", function(Y, result) {
 
    //  The callback supplied to use() will be executed regardless of
    //  whether the operation was successful or not.  The second parameter
    //  is a result object that has the status of the operation.  We can
    //  use this to try to recover from failures or timeouts.
 
    if (!result.success) {
 
        Y.log("Load failure: " + result.msg, "warn", "Example");
 
        //  Show the tabview HTML if the loader failed that way the
        //  original unskinned tabview will be visible so that the
        //  user can interact with it either way.
 
        document.documentElement.className = "";
 
    }
 
});

YUI().use("*", function (Y) {
 
    var tabView = Y.one("#tabview-1"),
        tabList = tabView.one("ul"),
        tabHeading = Y.one("#tabview-heading"),
        sInstructionalText = tabHeading.get("innerHTML");
        selectedTabAnchor = tabView.one(".yui-tab-selected>a"),
        bGeckoIEWin = ((Y.UA.gecko || Y.UA.ie) && navigator.userAgent.indexOf("Windows") > -1),
        panelMap = {};
 
 
    tabView.addClass("yui-tabview");
 
    //  Remove the "yui-loading" class from the documentElement
    //  now that the necessary YUI dependencies are loaded and the
    //  tabview has been skinned.
 
    tabView.get("ownerDocument").get("documentElement").removeClass("yui-loading");
 
    //  Apply the ARIA roles, states and properties.
 
    //  Add some instructional text to the heading that will be read by
    //  the screen reader when the first tab in the tabview is focused.
 
    tabHeading.set("innerHTML", (sInstructionalText + " <em>Press the enter key to load the content of each tab.</em>"));
 
    tabList.setAttrs({
        "aria-labelledby": "tabview-heading",
        role: "tablist"
    });
 
    tabView.one("div").set("role", "presentation");
 
 
    tabView.plug(Y.Plugin.NodeFocusManager, {
            descendants: ".yui-tab>a",
            keys: { next: "down:39", // Right arrow
                    previous: "down:37" },  // Left arrow
            focusClass: {
                className: "yui-tab-focus",
                fn: function (node) {
                    return node.get("parentNode");
                }
            },
            circular: true
        });
 
 
    //  If the list of tabs loses focus, set the activeDescendant
    //  attribute to the currently selected tab.
 
    tabView.focusManager.after("focusedChange", function (event) {
 
        if (!event.newVal) {    //  The list of tabs has lost focus
            this.set("activeDescendant", selectedTabAnchor);
        }
 
    });
 
 
    tabView.all(".yui-tab>a").each(function (anchor) {
 
        var sHref = anchor.getAttribute("href", 2),
            sPanelID = sHref.substring(1, sHref.length),
            panel;
 
        //  Apply the ARIA roles, states and properties to each tab
 
        anchor.set("role", "tab");
        anchor.get("parentNode").set("role", "presentation");
 
 
        //  Remove the "href" attribute from the anchor element to
        //  prevent JAWS and NVDA from reading the value of the "href"
        //  attribute when the anchor is focused
 
        if (bGeckoIEWin) {
            anchor.removeAttribute("href");
        }
 
        //  Cache a reference to id of the tab's corresponding panel
        //  element so that it can be made visible when the tab
        //  is clicked.
        panelMap[anchor.get("id")] = sPanelID;
 
 
        //  Apply the ARIA roles, states and properties to each panel
 
        panel = Y.one(("#" + sPanelID));
 
        panel.setAttrs({
            role: "tabpanel",
            "aria-labelledby": anchor.get("id")
        });
 
    });
 
 
    //  Use the "delegate" custom event to listen for the "click" event
    //  of each tab's <A> element.
 
    tabView.delegate("click", function (event) {
 
        var selectedPanel,
            sID = this.get("id");
 
        //  Deselect the currently selected tab and hide its
        //  corresponding panel.
 
        if (selectedTabAnchor) {
            selectedTabAnchor.get("parentNode").removeClass("yui-tab-selected");
            Y.one(("#" + panelMap[selectedTabAnchor.get("id")])).removeClass("yui-tabpanel-selected");
        }
 
        selectedTabAnchor = this;
        selectedTabAnchor.get("parentNode").addClass("yui-tab-selected");
 
        selectedPanel = Y.one(("#" + panelMap[sID]));
        selectedPanel.addClass("yui-tabpanel-selected");
 
        creatingPaging(selectedPanel);
 
        //  Prevent the browser from following the URL specified by the
        //  anchor's "href" attribute when clicked.
 
        event.preventDefault();
 
    }, ".yui-tab>a");
 
 
    //  Since the anchor's "href" attribute has been removed, the
    //  element will not fire the click event in Firefox when the
    //  user presses the enter key.  To fix this, dispatch the
    //  "click" event to the anchor when the user presses the
    //  enter key.
 
    if (bGeckoIEWin) {
 
        tabView.delegate("keydown", function (event) {
 
            if (event.charCode === 13) {
                this.simulate("click");
            }
 
        }, ">ul>li>a");
 
    }
 
});

var creatingPaging = function (panel) {
 
    var listitem,
        sHTML,
        paging;
 
    if (!panel.one(".paging")) {
 
        listitem = selectedTabAnchor.get("parentNode");
        sHTML = "";
 
        if (listitem.previous()) {
            sHTML += '<button type="button" class="yui-tabview-prevbtn">Previous Tab Panel</button>';
        }
 
        if (listitem.next()) {
            sHTML += '<button type="button" class="yui-tabview-nextbtn">Next Tab Panel</button>';
        }
 
        paging = Y.Node.create('<div class="paging">' + sHTML + '</div>');
 
        panel.appendChild(paging);
 
    }
 
};
 
creatingPaging(Y.one(".yui-tabpanel-selected"));
 
 
tabView.delegate("click", function (event) {
 
    var node = selectedTabAnchor.get("parentNode").previous().one("a");
 
    tabView.focusManager.focus(node);
    node.simulate("click");
 
}, ".yui-tabview-prevbtn");
 
 
tabView.delegate("click", function (event) {
 
    var node = selectedTabAnchor.get("parentNode").next().one("a");
 
    tabView.focusManager.focus(node);
    node.simulate("click");
 
}, ".yui-tabview-nextbtn");