1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
|
/*
MIT License
Copyright (c) 2016 Edenspiekermann
*/
(function () {
'use strict';
var internalId = 0;
var togglesMap = {};
var targetsMap = {};
function $ (selector, context) {
return Array.prototype.slice.call(
(context || document).querySelectorAll(selector)
);
}
function getClosestToggle (element) {
if (element.closest) {
return element.closest('[data-a11y-toggle]');
}
while (element) {
if (element.nodeType === 1 && element.hasAttribute('data-a11y-toggle')) {
return element;
}
element = element.parentNode;
}
return null;
}
function handleToggle (toggle) {
var target = toggle && targetsMap[toggle.getAttribute('aria-controls')];
if (!target) {
return false;
}
var toggles = togglesMap['#' + target.id];
var isExpanded = target.getAttribute('aria-hidden') === 'false';
target.setAttribute('aria-hidden', isExpanded);
toggles.forEach(function (toggle) {
toggle.setAttribute('aria-expanded', !isExpanded);
});
}
var initA11yToggle = function (context) {
togglesMap = $('[data-a11y-toggle]', context).reduce(function (acc, toggle) {
var selector = '#' + toggle.getAttribute('data-a11y-toggle');
acc[selector] = acc[selector] || [];
acc[selector].push(toggle);
return acc;
}, togglesMap);
var targets = Object.keys(togglesMap);
targets.length && $(targets).forEach(function (target) {
var toggles = togglesMap['#' + target.id];
var isExpanded = target.hasAttribute('data-a11y-toggle-open');
var labelledby = [];
toggles.forEach(function (toggle) {
toggle.id || toggle.setAttribute('id', 'a11y-toggle-' + internalId++);
toggle.setAttribute('aria-controls', target.id);
toggle.setAttribute('aria-expanded', isExpanded);
labelledby.push(toggle.id);
});
target.setAttribute('aria-hidden', !isExpanded);
target.hasAttribute('aria-labelledby') || target.setAttribute('aria-labelledby', labelledby.join(' '));
targetsMap[target.id] = target;
});
};
document.addEventListener('DOMContentLoaded', function () {
initA11yToggle();
});
document.addEventListener('click', function (event) {
var toggle = getClosestToggle(event.target);
handleToggle(toggle);
});
document.addEventListener('keyup', function (event) {
if (event.which === 13 || event.which === 32) {
var toggle = getClosestToggle(event.target);
if (toggle && toggle.getAttribute('role') === 'button') {
handleToggle(toggle);
}
}
});
window && (window.a11yToggle = initA11yToggle);
})();
|
