https://www.firstfederalwisconsin.com/wp-content/themes/BankSiteResponsive_2017/js/tab-index.js

1// Accessibility modification: Set tabindex order
2jQuery(document).ready(function() {
3    // Set certain links to no-tab i.e. Logos, etc.
4    jQuery('.slider a, #wpadminbar a').attr('tabindex', -1);
5	jQuery('body').prepend('<a href="#" id="skip_to_content">Skip To Main Content</a>');
6	jQuery("#skip_to_content").hide().css({"background":"#CCCCCC", "left":"0", "padding":"10px", "position":"absolute", "top":"0", "z-index":"10001"}).attr('tabindex', -1);
7	
8	 jQuery('body').live("keyup", function(e) {
9		var code = e.keyCode || e.which;
10		if (code == '9') {
11			jQuery("#skip_to_content").fadeIn();
12		}
13	 });
14	jQuery("#skip_to_content").live('click',function(e) {
15		e.preventDefault();
16		jQuery('.top-section a, .top-section input, .main-menu a').attr('tabindex', -1);
17		jQuery('html, body').animate({
18			scrollTop: jQuery(".main-content").offset().top
19		}, 500);
20		jQuery(this).hide();
21	});
22	jQuery(document).click( function(){
23		jQuery('#skip_to_content').hide();
24	});
25	/*
26    // List tabindex selectors (in order)
27    var array =     [
28                        "#main-menu-ul > a",
29                        ".social-logos a",
30                        ".top-menu a",
31						".main-content a",
32						".main-content input",
33						"footer a",
34                    ];
35 
36    var tabindex=1;
37 
38    // For each value of array, set tab index
39    jQuery(array).each(function(index, value) {
40        jQuery(value).attr('tabindex', tabindex); tabindex++;
41    });
42	*/
43});
44
45
46jQuery.fn.accessibleDropDown = function ()
47{
48	var el = jQuery(this);
49	/* Make dropdown menus keyboard accessible */
50
51	el.find("a").focus(function() {
52		if(jQuery(this).parent().hasClass('has-dropdown')){
53			jQuery(this).parent().find('.dropdown:first').addClass('hover');
54		}
55		else if((jQuery(this).parent().parent().hasClass('dropdown') === false)){
56			jQuery(document).find('.dropdown').removeClass('hover');
57		}
58	}).keydown(function(e){
59		//if tab is pressed but not shift
60		if(e.keyCode == 9 && !e.shiftKey){
61			//and element is the last child in menu
62			if(jQuery(this).parent().is(':last-child')){
63				jQuery(this).parent().parent().removeClass('hover');
64			}
65		}
66	});
67}
68
69//adds keyboard control to navigation
70jQuery('nav').accessibleDropDown();
71
72jQuery(document).click(function(){
73	//if someone uses keyboard and switches to mouse close menu if mouse click isn't focused on a navigation element 
74	if(jQuery('nav a').is(':focus') === false){
75		jQuery('.dropdown').removeClass('hover');
76	}
77});
78
79(function() {
80	'use strict';
81
82var DURATION = 350;
83
84var ringElem = null;
85var movingId = 0;
86var prevFocused = null;
87var keyDownTime = 0;
88
89var win = window;
90var doc = document;
91var docElem = doc.documentElement;
92var body = doc.body;
93
94
95docElem.addEventListener('keydown', function(event) {
96	var code = event.which;
97	// Show animation only upon Tab or Arrow keys press.
98	if (code === 9 || (code > 36 && code < 41)) {
99		keyDownTime = Date.now();
100	}
101}, false);
102
103
104docElem.addEventListener('focus', function(event) {
105	var target = event.target;
106	if (target.id === 'flying-focus') {
107		return;
108	}
109
110	var isFirstFocus = false;
111	if (!ringElem) {
112		isFirstFocus = true;
113		initialize();
114	}
115
116	var offset = offsetOf(target);
117	ringElem.style.left = offset.left + 'px';
118	ringElem.style.top = offset.top + 'px';
119	ringElem.style.width = target.offsetWidth + 'px';
120	ringElem.style.height = target.offsetHeight + 'px';
121
122	if (isFirstFocus || !isJustPressed()) {
123		return;
124	}
125
126	onEnd();
127	target.classList.add('flying-focus_target');
128	ringElem.classList.add('flying-focus_visible');
129	prevFocused = target;
130	movingId = setTimeout(onEnd, DURATION);
131}, true);
132
133
134docElem.addEventListener('blur', function() {
135	onEnd();
136}, true);
137
138
139function initialize() {
140	ringElem = doc.createElement('flying-focus'); // use uniq element name to decrease the chances of a conflict with website styles
141	ringElem.id = 'flying-focus';
142	ringElem.style.transitionDuration = ringElem.style.WebkitTransitionDuration = DURATION / 1000 + 's';
143	body.appendChild(ringElem);
144}
145
146
147function onEnd() {
148	if (!movingId) {
149		return;
150	}
151	clearTimeout(movingId);
152	movingId = 0;
153	ringElem.classList.remove('flying-focus_visible');
154	prevFocused.classList.remove('flying-focus_target');
155	prevFocused = null;
156}
157
158
159function isJustPressed() {
160	return Date.now() - keyDownTime < 42
161}
162
163
164function offsetOf(elem) {
165	var rect = elem.getBoundingClientRect();
166	var clientLeft = docElem.clientLeft || body.clientLeft;
167	var clientTop  = docElem.clientTop  || body.clientTop;
168	var scrollLeft = win.pageXOffset || docElem.scrollLeft || body.scrollLeft;
169	var scrollTop  = win.pageYOffset || docElem.scrollTop  || body.scrollTop;
170	var left = rect.left + scrollLeft - clientLeft;
171	var top =  rect.top  + scrollTop  - clientTop;
172	return {
173		top: top || 0,
174		left: left || 0
175	};
176}
177
178
179	var style = doc.createElement('style');
180	style.textContent = "#flying-focus {\
181	position: absolute;\
182	margin: 0;\
183	background: transparent;\
184	-webkit-transition-property: left, top, width, height;\
185	transition-property: left, top, width, height;\
186	-webkit-transition-timing-function: cubic-bezier(0,1,0,1);\
187	transition-timing-function: cubic-bezier(0,1,0,1);\
188	visibility: hidden;\

189	pointer-events: none;\
190	box-shadow: 0 0 2px 3px #78aeda, 0 0 2px #78aeda inset; border-radius: 2px;\
191}\
192#flying-focus.flying-focus_visible {\
193	visibility: visible;\
194	z-index: 9999;\
195}\
196.flying-focus_target {\
197	outline: none !important; /* Doesn't work in Firefox :( */\
198}\
199/* http://stackoverflow.com/questions/71074/how-to-remove-firefoxs-dotted-outline-on-buttons-as-well-as-links/199319 */\
200.flying-focus_target::-moz-focus-inner {\
201	border: 0 !important;\
202}\
203/* Replace it with @supports rule when browsers catch up */\
204@media screen and (-webkit-min-device-pixel-ratio: 0) {\
205	#flying-focus {\
206		box-shadow: none;\
207		outline: 5px auto -webkit-focus-ring-color;\
208		outline-offset: -3px;\
209	}\
210}\
211";
212	body.appendChild(style);
213})();