https://www.zoloft.com/-/media/Base-Themes/Components-Theme/Scripts/accessibility.js

1/**
2 * Component accessibility
3 * makes content more accessible to people with disabilities.
4 * @module Accessibility
5 * @param  {jQuery} $ Instance of jQuery
6 */
7XA.component.accessibility = (function ($) {
8    /**
9    * This object stores all public api methods
10    * @type {Object.<Methods>}
11    * @memberOf module:Accessibility
12    * */
13    var api = {};
14    /**
15        * getAllIndexedElement - returns elements that have tab index attribute
16        * @returns {jQuery<DOMElement>} elements that have tab index attribute
17    */
18    var getAllIndexedElement = function () {
19        return $("body").find("[tabindex]");
20    };
21
22    /**
23        * activateFirstElement - activate first element on a page that have tab index attribute
24        * active element
25        * @returns {String} component name 
26    */
27    var activateFirstElement = function () {
28        api.indexedElements.eq(0).attr("tabindex", "0");
29    };
30    /**
31       * getComponentName - helper that provides component name based on 
32       * active element
33       * @returns {String} component name 
34   */
35    var getComponentName = function () {
36        var $activeElement = $(document.activeElement),
37            currComponent = $activeElement.closest(".initialized"),
38            componentName = currComponent.length
39                ? currComponent.attr("class").split(" ")[1]
40                : "";
41        return componentName;
42    };
43    /**
44        * getWrapper - helper that provides wrapper element for
45        * active element
46        * @param {String} selector selector of parent wrapper
47        * @returns {jQuery<DOMElement>} 
48    */
49    var getWrapper = function (selector) {
50        var $activeElement = $(document.activeElement);
51        return $activeElement.closest(selector);
52    };
53
54    /**
55        * activateTab - helper for Tabs component
56    */
57    var activateTab = function (direction, currTab) {
58        var activatedTab = currTab;
59        if (direction == "left" && currTab.prev()) {
60            currTab.attr("tabindex", "-1");
61            activatedTab = currTab.prev();
62        } else if (direction == "right" && currTab.next()) {
63            currTab.attr("tabindex", "-1");
64            activatedTab = currTab.next();
65        }
66        activatedTab
67            .attr("tabindex", "0")
68            .trigger("click")
69            .focus();
70    };
71
72    /**
73     * activateItem - helper for Accordion component
74    */
75    var activateItem = function (direction, currItem) {
76        var itemWrapper = currItem.closest("li.item"),
77            activatedTab = currItem,
78            nextItem = itemWrapper.next(),
79            prevItem = itemWrapper.prev();
80        if (direction == "down" && nextItem) {
81            currItem.attr("tabindex", "-1");
82            activatedTab = nextItem;
83        } else if (direction == "up" && prevItem) {
84            currItem.attr("tabindex", "-1");
85            activatedTab = prevItem;
86        }
87        activatedTab
88            .find(".toggle-header")
89            .attr("tabindex", "0")
90            .focus();
91    };
92
93    /**
94     * toggleFlip - helper for Flip component
95    */
96    var toggleFlip = function (currItem) {
97        var nextItem = currItem.next().length ? currItem.next() : currItem.prev();
98        currItem.attr("tabindex", "-1");
99        nextItem
100            .trigger("click")
101            .attr("tabindex", "0")
102            .focus();
103    };
104
105    /**
106     * componentLogic - object that contains list of components as a object key
107     * and function with logic that make this component WCAG friendly
108     * @type {Object}
109     */
110    var componentLogic = {
111        tabs: function (keyCode) {
112            var currTab = getWrapper("li.active");
113            if (currTab) {
114                if (keyCode == api.keys.right) {
115                    activateTab("right", currTab);
116                } else if (keyCode == api.keys.left) {
117                    activateTab("left", currTab);
118                }
119            }
120        },
121        accordion: function (keyCode) {
122            var currItem = getWrapper("div.toggle-header");
123            if (currItem) {
124                if (keyCode == api.keys.down) {
125                    activateItem("down", currItem);
126                } else if (keyCode == api.keys.up) {
127                    activateItem("up", currItem);
128                }
129            }
130        },
131        flip: function (keyCode) {
132            var currItem = getWrapper("[class*='Side']");
133            if (currItem) {

134                if (keyCode == api.keys.right || keyCode == api.keys.left) {
135                    toggleFlip(currItem);
136                }
137            }
138        }
139    };
140    /**
141    * bindEvents method get component name by calling 
142    * ["getComponentName"]{@link module:Accessibility.getComponentName} method and running apropriate to
143    * component logic
144    * @memberOf module:Accessibility
145    * @param {number} keycode keycode of pressed button on keyboard
146    * @alias module:Accessibility.bindEvents
147    * @private
148    * */
149    var bindEvents = function (keyCode) {
150        var component = getComponentName();
151        if (componentLogic[component]) {
152            componentLogic[component](keyCode);
153        }
154    };
155
156    /**
157    * This object stores keycode of keyboard buttons
158    * @type {Object}
159    * @memberOf module:Accessibility 
160    * @alias module:Accessibility.keys
161    * */
162    api.keys = {
163        end: 35,
164        home: 36,
165        left: 37,
166        up: 38,
167        right: 39,
168        down: 40,
169        delete: 46,
170        enter: 13,
171        space: 32
172    };
173    /**
174         * indexedElements variable take list of all Indexed Element on a page by calling
175         * ["getAllIndexedElement"]{@link module:Accessibility.getAllIndexedElement} method
176         * @memberOf module:Accessibility
177         * @param {Object} properties list of properties for accordion component
178         * @alias module:Accessibility.indexedElements
179    */
180    api.indexedElements = getAllIndexedElement();
181    /**
182     * watchEvents method bind keyup event on document and on each trigger calls
183     * ["bindEvents"]{@link module:Accessibility.bindEvents}
184     * @memberOf module:Accessibility
185     * @alias module:Accessibility.watchEvents
186     */
187    api.watchEvents = function () {
188        $(document).on("keyup", function (event) {
189            var keyCode = event.keyCode;
190            bindEvents(keyCode);
191        });
192    };
193    /**
194        * initInstance method call
195        * ["watchEvents"]{@link module:Accessibility.watchEvents} method
196        * and call
197        * ["activateFirstElement"]{@link module:Accessibility.activateFirstElement}
198        * @memberOf module:Accessibility
199        * @method
200        * @alias module:Accessibility.initInstance
201        */
202    api.initInstance = function () {
203        api.watchEvents();
204        activateFirstElement();
205    };
206    /**
207     * init method calls 
208     * [".initInstance"]{@link module:Accessibility.initInstance} method.
209     * @memberOf module:Accessibility
210     * @alias module:Accessibility.init
211     */
212    api.init = function () {
213        api.initInstance();
214    };
215
216    return api;
217})(jQuery, document);
218
219XA.register("accessibility", XA.component.accessibility);