1 | 1 |
deleted file mode 100644 |
... | ... |
@@ -1,295 +0,0 @@ |
1 |
-function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); } |
|
2 |
- |
|
3 |
-import $ from '../../utils/dom'; |
|
4 |
-import { bindModuleMethods } from '../../utils/utils'; |
|
5 |
-var A11y = { |
|
6 |
- getRandomNumber: function getRandomNumber(size) { |
|
7 |
- if (size === void 0) { |
|
8 |
- size = 16; |
|
9 |
- } |
|
10 |
- |
|
11 |
- var randomChar = function randomChar() { |
|
12 |
- return Math.round(16 * Math.random()).toString(16); |
|
13 |
- }; |
|
14 |
- |
|
15 |
- return 'x'.repeat(size).replace(/x/g, randomChar); |
|
16 |
- }, |
|
17 |
- makeElFocusable: function makeElFocusable($el) { |
|
18 |
- $el.attr('tabIndex', '0'); |
|
19 |
- return $el; |
|
20 |
- }, |
|
21 |
- makeElNotFocusable: function makeElNotFocusable($el) { |
|
22 |
- $el.attr('tabIndex', '-1'); |
|
23 |
- return $el; |
|
24 |
- }, |
|
25 |
- addElRole: function addElRole($el, role) { |
|
26 |
- $el.attr('role', role); |
|
27 |
- return $el; |
|
28 |
- }, |
|
29 |
- addElRoleDescription: function addElRoleDescription($el, description) { |
|
30 |
- $el.attr('aria-role-description', description); |
|
31 |
- return $el; |
|
32 |
- }, |
|
33 |
- addElControls: function addElControls($el, controls) { |
|
34 |
- $el.attr('aria-controls', controls); |
|
35 |
- return $el; |
|
36 |
- }, |
|
37 |
- addElLabel: function addElLabel($el, label) { |
|
38 |
- $el.attr('aria-label', label); |
|
39 |
- return $el; |
|
40 |
- }, |
|
41 |
- addElId: function addElId($el, id) { |
|
42 |
- $el.attr('id', id); |
|
43 |
- return $el; |
|
44 |
- }, |
|
45 |
- addElLive: function addElLive($el, live) { |
|
46 |
- $el.attr('aria-live', live); |
|
47 |
- return $el; |
|
48 |
- }, |
|
49 |
- disableEl: function disableEl($el) { |
|
50 |
- $el.attr('aria-disabled', true); |
|
51 |
- return $el; |
|
52 |
- }, |
|
53 |
- enableEl: function enableEl($el) { |
|
54 |
- $el.attr('aria-disabled', false); |
|
55 |
- return $el; |
|
56 |
- }, |
|
57 |
- onEnterOrSpaceKey: function onEnterOrSpaceKey(e) { |
|
58 |
- if (e.keyCode !== 13 && e.keyCode !== 32) return; |
|
59 |
- var swiper = this; |
|
60 |
- var params = swiper.params.a11y; |
|
61 |
- var $targetEl = $(e.target); |
|
62 |
- |
|
63 |
- if (swiper.navigation && swiper.navigation.$nextEl && $targetEl.is(swiper.navigation.$nextEl)) { |
|
64 |
- if (!(swiper.isEnd && !swiper.params.loop)) { |
|
65 |
- swiper.slideNext(); |
|
66 |
- } |
|
67 |
- |
|
68 |
- if (swiper.isEnd) { |
|
69 |
- swiper.a11y.notify(params.lastSlideMessage); |
|
70 |
- } else { |
|
71 |
- swiper.a11y.notify(params.nextSlideMessage); |
|
72 |
- } |
|
73 |
- } |
|
74 |
- |
|
75 |
- if (swiper.navigation && swiper.navigation.$prevEl && $targetEl.is(swiper.navigation.$prevEl)) { |
|
76 |
- if (!(swiper.isBeginning && !swiper.params.loop)) { |
|
77 |
- swiper.slidePrev(); |
|
78 |
- } |
|
79 |
- |
|
80 |
- if (swiper.isBeginning) { |
|
81 |
- swiper.a11y.notify(params.firstSlideMessage); |
|
82 |
- } else { |
|
83 |
- swiper.a11y.notify(params.prevSlideMessage); |
|
84 |
- } |
|
85 |
- } |
|
86 |
- |
|
87 |
- if (swiper.pagination && $targetEl.is("." + swiper.params.pagination.bulletClass.replace(/ /g, '.'))) { |
|
88 |
- $targetEl[0].click(); |
|
89 |
- } |
|
90 |
- }, |
|
91 |
- notify: function notify(message) { |
|
92 |
- var swiper = this; |
|
93 |
- var notification = swiper.a11y.liveRegion; |
|
94 |
- if (notification.length === 0) return; |
|
95 |
- notification.html(''); |
|
96 |
- notification.html(message); |
|
97 |
- }, |
|
98 |
- updateNavigation: function updateNavigation() { |
|
99 |
- var swiper = this; |
|
100 |
- if (swiper.params.loop || !swiper.navigation) return; |
|
101 |
- var _swiper$navigation = swiper.navigation, |
|
102 |
- $nextEl = _swiper$navigation.$nextEl, |
|
103 |
- $prevEl = _swiper$navigation.$prevEl; |
|
104 |
- |
|
105 |
- if ($prevEl && $prevEl.length > 0) { |
|
106 |
- if (swiper.isBeginning) { |
|
107 |
- swiper.a11y.disableEl($prevEl); |
|
108 |
- swiper.a11y.makeElNotFocusable($prevEl); |
|
109 |
- } else { |
|
110 |
- swiper.a11y.enableEl($prevEl); |
|
111 |
- swiper.a11y.makeElFocusable($prevEl); |
|
112 |
- } |
|
113 |
- } |
|
114 |
- |
|
115 |
- if ($nextEl && $nextEl.length > 0) { |
|
116 |
- if (swiper.isEnd) { |
|
117 |
- swiper.a11y.disableEl($nextEl); |
|
118 |
- swiper.a11y.makeElNotFocusable($nextEl); |
|
119 |
- } else { |
|
120 |
- swiper.a11y.enableEl($nextEl); |
|
121 |
- swiper.a11y.makeElFocusable($nextEl); |
|
122 |
- } |
|
123 |
- } |
|
124 |
- }, |
|
125 |
- updatePagination: function updatePagination() { |
|
126 |
- var swiper = this; |
|
127 |
- var params = swiper.params.a11y; |
|
128 |
- |
|
129 |
- if (swiper.pagination && swiper.params.pagination.clickable && swiper.pagination.bullets && swiper.pagination.bullets.length) { |
|
130 |
- swiper.pagination.bullets.each(function (bulletEl) { |
|
131 |
- var $bulletEl = $(bulletEl); |
|
132 |
- swiper.a11y.makeElFocusable($bulletEl); |
|
133 |
- |
|
134 |
- if (!swiper.params.pagination.renderBullet) { |
|
135 |
- swiper.a11y.addElRole($bulletEl, 'button'); |
|
136 |
- swiper.a11y.addElLabel($bulletEl, params.paginationBulletMessage.replace(/\{\{index\}\}/, $bulletEl.index() + 1)); |
|
137 |
- } |
|
138 |
- }); |
|
139 |
- } |
|
140 |
- }, |
|
141 |
- init: function init() { |
|
142 |
- var swiper = this; |
|
143 |
- var params = swiper.params.a11y; |
|
144 |
- swiper.$el.append(swiper.a11y.liveRegion); // Container |
|
145 |
- |
|
146 |
- var $containerEl = swiper.$el; |
|
147 |
- |
|
148 |
- if (params.containerRoleDescriptionMessage) { |
|
149 |
- swiper.a11y.addElRoleDescription($containerEl, params.containerRoleDescriptionMessage); |
|
150 |
- } |
|
151 |
- |
|
152 |
- if (params.containerMessage) { |
|
153 |
- swiper.a11y.addElLabel($containerEl, params.containerMessage); |
|
154 |
- } // Wrapper |
|
155 |
- |
|
156 |
- |
|
157 |
- var $wrapperEl = swiper.$wrapperEl; |
|
158 |
- var wrapperId = $wrapperEl.attr('id') || "swiper-wrapper-" + swiper.a11y.getRandomNumber(16); |
|
159 |
- var live; |
|
160 |
- swiper.a11y.addElId($wrapperEl, wrapperId); |
|
161 |
- |
|
162 |
- if (swiper.params.autoplay && swiper.params.autoplay.enabled) { |
|
163 |
- live = 'off'; |
|
164 |
- } else { |
|
165 |
- live = 'polite'; |
|
166 |
- } |
|
167 |
- |
|
168 |
- swiper.a11y.addElLive($wrapperEl, live); // Slide |
|
169 |
- |
|
170 |
- if (params.itemRoleDescriptionMessage) { |
|
171 |
- swiper.a11y.addElRoleDescription($(swiper.slides), params.itemRoleDescriptionMessage); |
|
172 |
- } |
|
173 |
- |
|
174 |
- swiper.a11y.addElRole($(swiper.slides), 'group'); |
|
175 |
- swiper.slides.each(function (slideEl) { |
|
176 |
- var $slideEl = $(slideEl); |
|
177 |
- swiper.a11y.addElLabel($slideEl, $slideEl.index() + 1 + " / " + swiper.slides.length); |
|
178 |
- }); // Navigation |
|
179 |
- |
|
180 |
- var $nextEl; |
|
181 |
- var $prevEl; |
|
182 |
- |
|
183 |
- if (swiper.navigation && swiper.navigation.$nextEl) { |
|
184 |
- $nextEl = swiper.navigation.$nextEl; |
|
185 |
- } |
|
186 |
- |
|
187 |
- if (swiper.navigation && swiper.navigation.$prevEl) { |
|
188 |
- $prevEl = swiper.navigation.$prevEl; |
|
189 |
- } |
|
190 |
- |
|
191 |
- if ($nextEl && $nextEl.length) { |
|
192 |
- swiper.a11y.makeElFocusable($nextEl); |
|
193 |
- |
|
194 |
- if ($nextEl[0].tagName !== 'BUTTON') { |
|
195 |
- swiper.a11y.addElRole($nextEl, 'button'); |
|
196 |
- $nextEl.on('keydown', swiper.a11y.onEnterOrSpaceKey); |
|
197 |
- } |
|
198 |
- |
|
199 |
- swiper.a11y.addElLabel($nextEl, params.nextSlideMessage); |
|
200 |
- swiper.a11y.addElControls($nextEl, wrapperId); |
|
201 |
- } |
|
202 |
- |
|
203 |
- if ($prevEl && $prevEl.length) { |
|
204 |
- swiper.a11y.makeElFocusable($prevEl); |
|
205 |
- |
|
206 |
- if ($prevEl[0].tagName !== 'BUTTON') { |
|
207 |
- swiper.a11y.addElRole($prevEl, 'button'); |
|
208 |
- $prevEl.on('keydown', swiper.a11y.onEnterOrSpaceKey); |
|
209 |
- } |
|
210 |
- |
|
211 |
- swiper.a11y.addElLabel($prevEl, params.prevSlideMessage); |
|
212 |
- swiper.a11y.addElControls($prevEl, wrapperId); |
|
213 |
- } // Pagination |
|
214 |
- |
|
215 |
- |
|
216 |
- if (swiper.pagination && swiper.params.pagination.clickable && swiper.pagination.bullets && swiper.pagination.bullets.length) { |
|
217 |
- swiper.pagination.$el.on('keydown', "." + swiper.params.pagination.bulletClass.replace(/ /g, '.'), swiper.a11y.onEnterOrSpaceKey); |
|
218 |
- } |
|
219 |
- }, |
|
220 |
- destroy: function destroy() { |
|
221 |
- var swiper = this; |
|
222 |
- if (swiper.a11y.liveRegion && swiper.a11y.liveRegion.length > 0) swiper.a11y.liveRegion.remove(); |
|
223 |
- var $nextEl; |
|
224 |
- var $prevEl; |
|
225 |
- |
|
226 |
- if (swiper.navigation && swiper.navigation.$nextEl) { |
|
227 |
- $nextEl = swiper.navigation.$nextEl; |
|
228 |
- } |
|
229 |
- |
|
230 |
- if (swiper.navigation && swiper.navigation.$prevEl) { |
|
231 |
- $prevEl = swiper.navigation.$prevEl; |
|
232 |
- } |
|
233 |
- |
|
234 |
- if ($nextEl) { |
|
235 |
- $nextEl.off('keydown', swiper.a11y.onEnterOrSpaceKey); |
|
236 |
- } |
|
237 |
- |
|
238 |
- if ($prevEl) { |
|
239 |
- $prevEl.off('keydown', swiper.a11y.onEnterOrSpaceKey); |
|
240 |
- } // Pagination |
|
241 |
- |
|
242 |
- |
|
243 |
- if (swiper.pagination && swiper.params.pagination.clickable && swiper.pagination.bullets && swiper.pagination.bullets.length) { |
|
244 |
- swiper.pagination.$el.off('keydown', "." + swiper.params.pagination.bulletClass.replace(/ /g, '.'), swiper.a11y.onEnterOrSpaceKey); |
|
245 |
- } |
|
246 |
- } |
|
247 |
-}; |
|
248 |
-export default { |
|
249 |
- name: 'a11y', |
|
250 |
- params: { |
|
251 |
- a11y: { |
|
252 |
- enabled: true, |
|
253 |
- notificationClass: 'swiper-notification', |
|
254 |
- prevSlideMessage: 'Previous slide', |
|
255 |
- nextSlideMessage: 'Next slide', |
|
256 |
- firstSlideMessage: 'This is the first slide', |
|
257 |
- lastSlideMessage: 'This is the last slide', |
|
258 |
- paginationBulletMessage: 'Go to slide {{index}}', |
|
259 |
- containerMessage: null, |
|
260 |
- containerRoleDescriptionMessage: null, |
|
261 |
- itemRoleDescriptionMessage: null |
|
262 |
- } |
|
263 |
- }, |
|
264 |
- create: function create() { |
|
265 |
- var swiper = this; |
|
266 |
- bindModuleMethods(swiper, { |
|
267 |
- a11y: _extends({}, A11y, { |
|
268 |
- liveRegion: $("<span class=\"" + swiper.params.a11y.notificationClass + "\" aria-live=\"assertive\" aria-atomic=\"true\"></span>") |
|
269 |
- }) |
|
270 |
- }); |
|
271 |
- }, |
|
272 |
- on: { |
|
273 |
- afterInit: function afterInit(swiper) { |
|
274 |
- if (!swiper.params.a11y.enabled) return; |
|
275 |
- swiper.a11y.init(); |
|
276 |
- swiper.a11y.updateNavigation(); |
|
277 |
- }, |
|
278 |
- toEdge: function toEdge(swiper) { |
|
279 |
- if (!swiper.params.a11y.enabled) return; |
|
280 |
- swiper.a11y.updateNavigation(); |
|
281 |
- }, |
|
282 |
- fromEdge: function fromEdge(swiper) { |
|
283 |
- if (!swiper.params.a11y.enabled) return; |
|
284 |
- swiper.a11y.updateNavigation(); |
|
285 |
- }, |
|
286 |
- paginationUpdate: function paginationUpdate(swiper) { |
|
287 |
- if (!swiper.params.a11y.enabled) return; |
|
288 |
- swiper.a11y.updatePagination(); |
|
289 |
- }, |
|
290 |
- destroy: function destroy(swiper) { |
|
291 |
- if (!swiper.params.a11y.enabled) return; |
|
292 |
- swiper.a11y.destroy(); |
|
293 |
- } |
|
294 |
- } |
|
295 |
-}; |
|
296 | 0 |
\ No newline at end of file |
1 | 1 |
new file mode 100644 |
... | ... |
@@ -0,0 +1,295 @@ |
1 |
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); } |
|
2 |
+ |
|
3 |
+import $ from '../../utils/dom'; |
|
4 |
+import { bindModuleMethods } from '../../utils/utils'; |
|
5 |
+var A11y = { |
|
6 |
+ getRandomNumber: function getRandomNumber(size) { |
|
7 |
+ if (size === void 0) { |
|
8 |
+ size = 16; |
|
9 |
+ } |
|
10 |
+ |
|
11 |
+ var randomChar = function randomChar() { |
|
12 |
+ return Math.round(16 * Math.random()).toString(16); |
|
13 |
+ }; |
|
14 |
+ |
|
15 |
+ return 'x'.repeat(size).replace(/x/g, randomChar); |
|
16 |
+ }, |
|
17 |
+ makeElFocusable: function makeElFocusable($el) { |
|
18 |
+ $el.attr('tabIndex', '0'); |
|
19 |
+ return $el; |
|
20 |
+ }, |
|
21 |
+ makeElNotFocusable: function makeElNotFocusable($el) { |
|
22 |
+ $el.attr('tabIndex', '-1'); |
|
23 |
+ return $el; |
|
24 |
+ }, |
|
25 |
+ addElRole: function addElRole($el, role) { |
|
26 |
+ $el.attr('role', role); |
|
27 |
+ return $el; |
|
28 |
+ }, |
|
29 |
+ addElRoleDescription: function addElRoleDescription($el, description) { |
|
30 |
+ $el.attr('aria-role-description', description); |
|
31 |
+ return $el; |
|
32 |
+ }, |
|
33 |
+ addElControls: function addElControls($el, controls) { |
|
34 |
+ $el.attr('aria-controls', controls); |
|
35 |
+ return $el; |
|
36 |
+ }, |
|
37 |
+ addElLabel: function addElLabel($el, label) { |
|
38 |
+ $el.attr('aria-label', label); |
|
39 |
+ return $el; |
|
40 |
+ }, |
|
41 |
+ addElId: function addElId($el, id) { |
|
42 |
+ $el.attr('id', id); |
|
43 |
+ return $el; |
|
44 |
+ }, |
|
45 |
+ addElLive: function addElLive($el, live) { |
|
46 |
+ $el.attr('aria-live', live); |
|
47 |
+ return $el; |
|
48 |
+ }, |
|
49 |
+ disableEl: function disableEl($el) { |
|
50 |
+ $el.attr('aria-disabled', true); |
|
51 |
+ return $el; |
|
52 |
+ }, |
|
53 |
+ enableEl: function enableEl($el) { |
|
54 |
+ $el.attr('aria-disabled', false); |
|
55 |
+ return $el; |
|
56 |
+ }, |
|
57 |
+ onEnterOrSpaceKey: function onEnterOrSpaceKey(e) { |
|
58 |
+ if (e.keyCode !== 13 && e.keyCode !== 32) return; |
|
59 |
+ var swiper = this; |
|
60 |
+ var params = swiper.params.a11y; |
|
61 |
+ var $targetEl = $(e.target); |
|
62 |
+ |
|
63 |
+ if (swiper.navigation && swiper.navigation.$nextEl && $targetEl.is(swiper.navigation.$nextEl)) { |
|
64 |
+ if (!(swiper.isEnd && !swiper.params.loop)) { |
|
65 |
+ swiper.slideNext(); |
|
66 |
+ } |
|
67 |
+ |
|
68 |
+ if (swiper.isEnd) { |
|
69 |
+ swiper.a11y.notify(params.lastSlideMessage); |
|
70 |
+ } else { |
|
71 |
+ swiper.a11y.notify(params.nextSlideMessage); |
|
72 |
+ } |
|
73 |
+ } |
|
74 |
+ |
|
75 |
+ if (swiper.navigation && swiper.navigation.$prevEl && $targetEl.is(swiper.navigation.$prevEl)) { |
|
76 |
+ if (!(swiper.isBeginning && !swiper.params.loop)) { |
|
77 |
+ swiper.slidePrev(); |
|
78 |
+ } |
|
79 |
+ |
|
80 |
+ if (swiper.isBeginning) { |
|
81 |
+ swiper.a11y.notify(params.firstSlideMessage); |
|
82 |
+ } else { |
|
83 |
+ swiper.a11y.notify(params.prevSlideMessage); |
|
84 |
+ } |
|
85 |
+ } |
|
86 |
+ |
|
87 |
+ if (swiper.pagination && $targetEl.is("." + swiper.params.pagination.bulletClass.replace(/ /g, '.'))) { |
|
88 |
+ $targetEl[0].click(); |
|
89 |
+ } |
|
90 |
+ }, |
|
91 |
+ notify: function notify(message) { |
|
92 |
+ var swiper = this; |
|
93 |
+ var notification = swiper.a11y.liveRegion; |
|
94 |
+ if (notification.length === 0) return; |
|
95 |
+ notification.html(''); |
|
96 |
+ notification.html(message); |
|
97 |
+ }, |
|
98 |
+ updateNavigation: function updateNavigation() { |
|
99 |
+ var swiper = this; |
|
100 |
+ if (swiper.params.loop || !swiper.navigation) return; |
|
101 |
+ var _swiper$navigation = swiper.navigation, |
|
102 |
+ $nextEl = _swiper$navigation.$nextEl, |
|
103 |
+ $prevEl = _swiper$navigation.$prevEl; |
|
104 |
+ |
|
105 |
+ if ($prevEl && $prevEl.length > 0) { |
|
106 |
+ if (swiper.isBeginning) { |
|
107 |
+ swiper.a11y.disableEl($prevEl); |
|
108 |
+ swiper.a11y.makeElNotFocusable($prevEl); |
|
109 |
+ } else { |
|
110 |
+ swiper.a11y.enableEl($prevEl); |
|
111 |
+ swiper.a11y.makeElFocusable($prevEl); |
|
112 |
+ } |
|
113 |
+ } |
|
114 |
+ |
|
115 |
+ if ($nextEl && $nextEl.length > 0) { |
|
116 |
+ if (swiper.isEnd) { |
|
117 |
+ swiper.a11y.disableEl($nextEl); |
|
118 |
+ swiper.a11y.makeElNotFocusable($nextEl); |
|
119 |
+ } else { |
|
120 |
+ swiper.a11y.enableEl($nextEl); |
|
121 |
+ swiper.a11y.makeElFocusable($nextEl); |
|
122 |
+ } |
|
123 |
+ } |
|
124 |
+ }, |
|
125 |
+ updatePagination: function updatePagination() { |
|
126 |
+ var swiper = this; |
|
127 |
+ var params = swiper.params.a11y; |
|
128 |
+ |
|
129 |
+ if (swiper.pagination && swiper.params.pagination.clickable && swiper.pagination.bullets && swiper.pagination.bullets.length) { |
|
130 |
+ swiper.pagination.bullets.each(function (bulletEl) { |
|
131 |
+ var $bulletEl = $(bulletEl); |
|
132 |
+ swiper.a11y.makeElFocusable($bulletEl); |
|
133 |
+ |
|
134 |
+ if (!swiper.params.pagination.renderBullet) { |
|
135 |
+ swiper.a11y.addElRole($bulletEl, 'button'); |
|
136 |
+ swiper.a11y.addElLabel($bulletEl, params.paginationBulletMessage.replace(/\{\{index\}\}/, $bulletEl.index() + 1)); |
|
137 |
+ } |
|
138 |
+ }); |
|
139 |
+ } |
|
140 |
+ }, |
|
141 |
+ init: function init() { |
|
142 |
+ var swiper = this; |
|
143 |
+ var params = swiper.params.a11y; |
|
144 |
+ swiper.$el.append(swiper.a11y.liveRegion); // Container |
|
145 |
+ |
|
146 |
+ var $containerEl = swiper.$el; |
|
147 |
+ |
|
148 |
+ if (params.containerRoleDescriptionMessage) { |
|
149 |
+ swiper.a11y.addElRoleDescription($containerEl, params.containerRoleDescriptionMessage); |
|
150 |
+ } |
|
151 |
+ |
|
152 |
+ if (params.containerMessage) { |
|
153 |
+ swiper.a11y.addElLabel($containerEl, params.containerMessage); |
|
154 |
+ } // Wrapper |
|
155 |
+ |
|
156 |
+ |
|
157 |
+ var $wrapperEl = swiper.$wrapperEl; |
|
158 |
+ var wrapperId = $wrapperEl.attr('id') || "swiper-wrapper-" + swiper.a11y.getRandomNumber(16); |
|
159 |
+ var live; |
|
160 |
+ swiper.a11y.addElId($wrapperEl, wrapperId); |
|
161 |
+ |
|
162 |
+ if (swiper.params.autoplay && swiper.params.autoplay.enabled) { |
|
163 |
+ live = 'off'; |
|
164 |
+ } else { |
|
165 |
+ live = 'polite'; |
|
166 |
+ } |
|
167 |
+ |
|
168 |
+ swiper.a11y.addElLive($wrapperEl, live); // Slide |
|
169 |
+ |
|
170 |
+ if (params.itemRoleDescriptionMessage) { |
|
171 |
+ swiper.a11y.addElRoleDescription($(swiper.slides), params.itemRoleDescriptionMessage); |
|
172 |
+ } |
|
173 |
+ |
|
174 |
+ swiper.a11y.addElRole($(swiper.slides), 'group'); |
|
175 |
+ swiper.slides.each(function (slideEl) { |
|
176 |
+ var $slideEl = $(slideEl); |
|
177 |
+ swiper.a11y.addElLabel($slideEl, $slideEl.index() + 1 + " / " + swiper.slides.length); |
|
178 |
+ }); // Navigation |
|
179 |
+ |
|
180 |
+ var $nextEl; |
|
181 |
+ var $prevEl; |
|
182 |
+ |
|
183 |
+ if (swiper.navigation && swiper.navigation.$nextEl) { |
|
184 |
+ $nextEl = swiper.navigation.$nextEl; |
|
185 |
+ } |
|
186 |
+ |
|
187 |
+ if (swiper.navigation && swiper.navigation.$prevEl) { |
|
188 |
+ $prevEl = swiper.navigation.$prevEl; |
|
189 |
+ } |
|
190 |
+ |
|
191 |
+ if ($nextEl && $nextEl.length) { |
|
192 |
+ swiper.a11y.makeElFocusable($nextEl); |
|
193 |
+ |
|
194 |
+ if ($nextEl[0].tagName !== 'BUTTON') { |
|
195 |
+ swiper.a11y.addElRole($nextEl, 'button'); |
|
196 |
+ $nextEl.on('keydown', swiper.a11y.onEnterOrSpaceKey); |
|
197 |
+ } |
|
198 |
+ |
|
199 |
+ swiper.a11y.addElLabel($nextEl, params.nextSlideMessage); |
|
200 |
+ swiper.a11y.addElControls($nextEl, wrapperId); |
|
201 |
+ } |
|
202 |
+ |
|
203 |
+ if ($prevEl && $prevEl.length) { |
|
204 |
+ swiper.a11y.makeElFocusable($prevEl); |
|
205 |
+ |
|
206 |
+ if ($prevEl[0].tagName !== 'BUTTON') { |
|
207 |
+ swiper.a11y.addElRole($prevEl, 'button'); |
|
208 |
+ $prevEl.on('keydown', swiper.a11y.onEnterOrSpaceKey); |
|
209 |
+ } |
|
210 |
+ |
|
211 |
+ swiper.a11y.addElLabel($prevEl, params.prevSlideMessage); |
|
212 |
+ swiper.a11y.addElControls($prevEl, wrapperId); |
|
213 |
+ } // Pagination |
|
214 |
+ |
|
215 |
+ |
|
216 |
+ if (swiper.pagination && swiper.params.pagination.clickable && swiper.pagination.bullets && swiper.pagination.bullets.length) { |
|
217 |
+ swiper.pagination.$el.on('keydown', "." + swiper.params.pagination.bulletClass.replace(/ /g, '.'), swiper.a11y.onEnterOrSpaceKey); |
|
218 |
+ } |
|
219 |
+ }, |
|
220 |
+ destroy: function destroy() { |
|
221 |
+ var swiper = this; |
|
222 |
+ if (swiper.a11y.liveRegion && swiper.a11y.liveRegion.length > 0) swiper.a11y.liveRegion.remove(); |
|
223 |
+ var $nextEl; |
|
224 |
+ var $prevEl; |
|
225 |
+ |
|
226 |
+ if (swiper.navigation && swiper.navigation.$nextEl) { |
|
227 |
+ $nextEl = swiper.navigation.$nextEl; |
|
228 |
+ } |
|
229 |
+ |
|
230 |
+ if (swiper.navigation && swiper.navigation.$prevEl) { |
|
231 |
+ $prevEl = swiper.navigation.$prevEl; |
|
232 |
+ } |
|
233 |
+ |
|
234 |
+ if ($nextEl) { |
|
235 |
+ $nextEl.off('keydown', swiper.a11y.onEnterOrSpaceKey); |
|
236 |
+ } |
|
237 |
+ |
|
238 |
+ if ($prevEl) { |
|
239 |
+ $prevEl.off('keydown', swiper.a11y.onEnterOrSpaceKey); |
|
240 |
+ } // Pagination |
|
241 |
+ |
|
242 |
+ |
|
243 |
+ if (swiper.pagination && swiper.params.pagination.clickable && swiper.pagination.bullets && swiper.pagination.bullets.length) { |
|
244 |
+ swiper.pagination.$el.off('keydown', "." + swiper.params.pagination.bulletClass.replace(/ /g, '.'), swiper.a11y.onEnterOrSpaceKey); |
|
245 |
+ } |
|
246 |
+ } |
|
247 |
+}; |
|
248 |
+export default { |
|
249 |
+ name: 'a11y', |
|
250 |
+ params: { |
|
251 |
+ a11y: { |
|
252 |
+ enabled: true, |
|
253 |
+ notificationClass: 'swiper-notification', |
|
254 |
+ prevSlideMessage: 'Previous slide', |
|
255 |
+ nextSlideMessage: 'Next slide', |
|
256 |
+ firstSlideMessage: 'This is the first slide', |
|
257 |
+ lastSlideMessage: 'This is the last slide', |
|
258 |
+ paginationBulletMessage: 'Go to slide {{index}}', |
|
259 |
+ containerMessage: null, |
|
260 |
+ containerRoleDescriptionMessage: null, |
|
261 |
+ itemRoleDescriptionMessage: null |
|
262 |
+ } |
|
263 |
+ }, |
|
264 |
+ create: function create() { |
|
265 |
+ var swiper = this; |
|
266 |
+ bindModuleMethods(swiper, { |
|
267 |
+ a11y: _extends({}, A11y, { |
|
268 |
+ liveRegion: $("<span class=\"" + swiper.params.a11y.notificationClass + "\" aria-live=\"assertive\" aria-atomic=\"true\"></span>") |
|
269 |
+ }) |
|
270 |
+ }); |
|
271 |
+ }, |
|
272 |
+ on: { |
|
273 |
+ afterInit: function afterInit(swiper) { |
|
274 |
+ if (!swiper.params.a11y.enabled) return; |
|
275 |
+ swiper.a11y.init(); |
|
276 |
+ swiper.a11y.updateNavigation(); |
|
277 |
+ }, |
|
278 |
+ toEdge: function toEdge(swiper) { |
|
279 |
+ if (!swiper.params.a11y.enabled) return; |
|
280 |
+ swiper.a11y.updateNavigation(); |
|
281 |
+ }, |
|
282 |
+ fromEdge: function fromEdge(swiper) { |
|
283 |
+ if (!swiper.params.a11y.enabled) return; |
|
284 |
+ swiper.a11y.updateNavigation(); |
|
285 |
+ }, |
|
286 |
+ paginationUpdate: function paginationUpdate(swiper) { |
|
287 |
+ if (!swiper.params.a11y.enabled) return; |
|
288 |
+ swiper.a11y.updatePagination(); |
|
289 |
+ }, |
|
290 |
+ destroy: function destroy(swiper) { |
|
291 |
+ if (!swiper.params.a11y.enabled) return; |
|
292 |
+ swiper.a11y.destroy(); |
|
293 |
+ } |
|
294 |
+ } |
|
295 |
+}; |
|
0 | 296 |
\ No newline at end of file |