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