a11y.mjs 12 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378
  1. import { g as getDocument } from '../shared/ssr-window.esm.mjs';
  2. import { c as classesToSelector } from '../shared/classes-to-selector.mjs';
  3. import { c as createElement, h as elementIndex, m as makeElementsArray } from '../shared/utils.mjs';
  4. function A11y(_ref) {
  5. let {
  6. swiper,
  7. extendParams,
  8. on
  9. } = _ref;
  10. extendParams({
  11. a11y: {
  12. enabled: true,
  13. notificationClass: 'swiper-notification',
  14. prevSlideMessage: 'Previous slide',
  15. nextSlideMessage: 'Next slide',
  16. firstSlideMessage: 'This is the first slide',
  17. lastSlideMessage: 'This is the last slide',
  18. paginationBulletMessage: 'Go to slide {{index}}',
  19. slideLabelMessage: '{{index}} / {{slidesLength}}',
  20. containerMessage: null,
  21. containerRoleDescriptionMessage: null,
  22. containerRole: null,
  23. itemRoleDescriptionMessage: null,
  24. slideRole: 'group',
  25. id: null,
  26. scrollOnFocus: true
  27. }
  28. });
  29. swiper.a11y = {
  30. clicked: false
  31. };
  32. let liveRegion = null;
  33. let preventFocusHandler;
  34. let focusTargetSlideEl;
  35. let visibilityChangedTimestamp = new Date().getTime();
  36. function notify(message) {
  37. const notification = liveRegion;
  38. if (notification.length === 0) return;
  39. notification.innerHTML = '';
  40. notification.innerHTML = message;
  41. }
  42. function getRandomNumber(size) {
  43. if (size === void 0) {
  44. size = 16;
  45. }
  46. const randomChar = () => Math.round(16 * Math.random()).toString(16);
  47. return 'x'.repeat(size).replace(/x/g, randomChar);
  48. }
  49. function makeElFocusable(el) {
  50. el = makeElementsArray(el);
  51. el.forEach(subEl => {
  52. subEl.setAttribute('tabIndex', '0');
  53. });
  54. }
  55. function makeElNotFocusable(el) {
  56. el = makeElementsArray(el);
  57. el.forEach(subEl => {
  58. subEl.setAttribute('tabIndex', '-1');
  59. });
  60. }
  61. function addElRole(el, role) {
  62. el = makeElementsArray(el);
  63. el.forEach(subEl => {
  64. subEl.setAttribute('role', role);
  65. });
  66. }
  67. function addElRoleDescription(el, description) {
  68. el = makeElementsArray(el);
  69. el.forEach(subEl => {
  70. subEl.setAttribute('aria-roledescription', description);
  71. });
  72. }
  73. function addElControls(el, controls) {
  74. el = makeElementsArray(el);
  75. el.forEach(subEl => {
  76. subEl.setAttribute('aria-controls', controls);
  77. });
  78. }
  79. function addElLabel(el, label) {
  80. el = makeElementsArray(el);
  81. el.forEach(subEl => {
  82. subEl.setAttribute('aria-label', label);
  83. });
  84. }
  85. function addElId(el, id) {
  86. el = makeElementsArray(el);
  87. el.forEach(subEl => {
  88. subEl.setAttribute('id', id);
  89. });
  90. }
  91. function addElLive(el, live) {
  92. el = makeElementsArray(el);
  93. el.forEach(subEl => {
  94. subEl.setAttribute('aria-live', live);
  95. });
  96. }
  97. function disableEl(el) {
  98. el = makeElementsArray(el);
  99. el.forEach(subEl => {
  100. subEl.setAttribute('aria-disabled', true);
  101. });
  102. }
  103. function enableEl(el) {
  104. el = makeElementsArray(el);
  105. el.forEach(subEl => {
  106. subEl.setAttribute('aria-disabled', false);
  107. });
  108. }
  109. function onEnterOrSpaceKey(e) {
  110. if (e.keyCode !== 13 && e.keyCode !== 32) return;
  111. const params = swiper.params.a11y;
  112. const targetEl = e.target;
  113. if (swiper.pagination && swiper.pagination.el && (targetEl === swiper.pagination.el || swiper.pagination.el.contains(e.target))) {
  114. if (!e.target.matches(classesToSelector(swiper.params.pagination.bulletClass))) return;
  115. }
  116. if (swiper.navigation && swiper.navigation.prevEl && swiper.navigation.nextEl) {
  117. const prevEls = makeElementsArray(swiper.navigation.prevEl);
  118. const nextEls = makeElementsArray(swiper.navigation.nextEl);
  119. if (nextEls.includes(targetEl)) {
  120. if (!(swiper.isEnd && !swiper.params.loop)) {
  121. swiper.slideNext();
  122. }
  123. if (swiper.isEnd) {
  124. notify(params.lastSlideMessage);
  125. } else {
  126. notify(params.nextSlideMessage);
  127. }
  128. }
  129. if (prevEls.includes(targetEl)) {
  130. if (!(swiper.isBeginning && !swiper.params.loop)) {
  131. swiper.slidePrev();
  132. }
  133. if (swiper.isBeginning) {
  134. notify(params.firstSlideMessage);
  135. } else {
  136. notify(params.prevSlideMessage);
  137. }
  138. }
  139. }
  140. if (swiper.pagination && targetEl.matches(classesToSelector(swiper.params.pagination.bulletClass))) {
  141. targetEl.click();
  142. }
  143. }
  144. function updateNavigation() {
  145. if (swiper.params.loop || swiper.params.rewind || !swiper.navigation) return;
  146. const {
  147. nextEl,
  148. prevEl
  149. } = swiper.navigation;
  150. if (prevEl) {
  151. if (swiper.isBeginning) {
  152. disableEl(prevEl);
  153. makeElNotFocusable(prevEl);
  154. } else {
  155. enableEl(prevEl);
  156. makeElFocusable(prevEl);
  157. }
  158. }
  159. if (nextEl) {
  160. if (swiper.isEnd) {
  161. disableEl(nextEl);
  162. makeElNotFocusable(nextEl);
  163. } else {
  164. enableEl(nextEl);
  165. makeElFocusable(nextEl);
  166. }
  167. }
  168. }
  169. function hasPagination() {
  170. return swiper.pagination && swiper.pagination.bullets && swiper.pagination.bullets.length;
  171. }
  172. function hasClickablePagination() {
  173. return hasPagination() && swiper.params.pagination.clickable;
  174. }
  175. function updatePagination() {
  176. const params = swiper.params.a11y;
  177. if (!hasPagination()) return;
  178. swiper.pagination.bullets.forEach(bulletEl => {
  179. if (swiper.params.pagination.clickable) {
  180. makeElFocusable(bulletEl);
  181. if (!swiper.params.pagination.renderBullet) {
  182. addElRole(bulletEl, 'button');
  183. addElLabel(bulletEl, params.paginationBulletMessage.replace(/\{\{index\}\}/, elementIndex(bulletEl) + 1));
  184. }
  185. }
  186. if (bulletEl.matches(classesToSelector(swiper.params.pagination.bulletActiveClass))) {
  187. bulletEl.setAttribute('aria-current', 'true');
  188. } else {
  189. bulletEl.removeAttribute('aria-current');
  190. }
  191. });
  192. }
  193. const initNavEl = (el, wrapperId, message) => {
  194. makeElFocusable(el);
  195. if (el.tagName !== 'BUTTON') {
  196. addElRole(el, 'button');
  197. el.addEventListener('keydown', onEnterOrSpaceKey);
  198. }
  199. addElLabel(el, message);
  200. addElControls(el, wrapperId);
  201. };
  202. const handlePointerDown = e => {
  203. if (focusTargetSlideEl && focusTargetSlideEl !== e.target && !focusTargetSlideEl.contains(e.target)) {
  204. preventFocusHandler = true;
  205. }
  206. swiper.a11y.clicked = true;
  207. };
  208. const handlePointerUp = () => {
  209. preventFocusHandler = false;
  210. requestAnimationFrame(() => {
  211. requestAnimationFrame(() => {
  212. if (!swiper.destroyed) {
  213. swiper.a11y.clicked = false;
  214. }
  215. });
  216. });
  217. };
  218. const onVisibilityChange = e => {
  219. visibilityChangedTimestamp = new Date().getTime();
  220. };
  221. const handleFocus = e => {
  222. if (swiper.a11y.clicked || !swiper.params.a11y.scrollOnFocus) return;
  223. if (new Date().getTime() - visibilityChangedTimestamp < 100) return;
  224. const slideEl = e.target.closest(`.${swiper.params.slideClass}, swiper-slide`);
  225. if (!slideEl || !swiper.slides.includes(slideEl)) return;
  226. focusTargetSlideEl = slideEl;
  227. const isActive = swiper.slides.indexOf(slideEl) === swiper.activeIndex;
  228. const isVisible = swiper.params.watchSlidesProgress && swiper.visibleSlides && swiper.visibleSlides.includes(slideEl);
  229. if (isActive || isVisible) return;
  230. if (e.sourceCapabilities && e.sourceCapabilities.firesTouchEvents) return;
  231. if (swiper.isHorizontal()) {
  232. swiper.el.scrollLeft = 0;
  233. } else {
  234. swiper.el.scrollTop = 0;
  235. }
  236. requestAnimationFrame(() => {
  237. if (preventFocusHandler) return;
  238. if (swiper.params.loop) {
  239. swiper.slideToLoop(parseInt(slideEl.getAttribute('data-swiper-slide-index')), 0);
  240. } else {
  241. swiper.slideTo(swiper.slides.indexOf(slideEl), 0);
  242. }
  243. preventFocusHandler = false;
  244. });
  245. };
  246. const initSlides = () => {
  247. const params = swiper.params.a11y;
  248. if (params.itemRoleDescriptionMessage) {
  249. addElRoleDescription(swiper.slides, params.itemRoleDescriptionMessage);
  250. }
  251. if (params.slideRole) {
  252. addElRole(swiper.slides, params.slideRole);
  253. }
  254. const slidesLength = swiper.slides.length;
  255. if (params.slideLabelMessage) {
  256. swiper.slides.forEach((slideEl, index) => {
  257. const slideIndex = swiper.params.loop ? parseInt(slideEl.getAttribute('data-swiper-slide-index'), 10) : index;
  258. const ariaLabelMessage = params.slideLabelMessage.replace(/\{\{index\}\}/, slideIndex + 1).replace(/\{\{slidesLength\}\}/, slidesLength);
  259. addElLabel(slideEl, ariaLabelMessage);
  260. });
  261. }
  262. };
  263. const init = () => {
  264. const params = swiper.params.a11y;
  265. swiper.el.append(liveRegion);
  266. // Container
  267. const containerEl = swiper.el;
  268. if (params.containerRoleDescriptionMessage) {
  269. addElRoleDescription(containerEl, params.containerRoleDescriptionMessage);
  270. }
  271. if (params.containerMessage) {
  272. addElLabel(containerEl, params.containerMessage);
  273. }
  274. if (params.containerRole) {
  275. addElRole(containerEl, params.containerRole);
  276. }
  277. // Wrapper
  278. const wrapperEl = swiper.wrapperEl;
  279. const wrapperId = params.id || wrapperEl.getAttribute('id') || `swiper-wrapper-${getRandomNumber(16)}`;
  280. const live = swiper.params.autoplay && swiper.params.autoplay.enabled ? 'off' : 'polite';
  281. addElId(wrapperEl, wrapperId);
  282. addElLive(wrapperEl, live);
  283. // Slide
  284. initSlides();
  285. // Navigation
  286. let {
  287. nextEl,
  288. prevEl
  289. } = swiper.navigation ? swiper.navigation : {};
  290. nextEl = makeElementsArray(nextEl);
  291. prevEl = makeElementsArray(prevEl);
  292. if (nextEl) {
  293. nextEl.forEach(el => initNavEl(el, wrapperId, params.nextSlideMessage));
  294. }
  295. if (prevEl) {
  296. prevEl.forEach(el => initNavEl(el, wrapperId, params.prevSlideMessage));
  297. }
  298. // Pagination
  299. if (hasClickablePagination()) {
  300. const paginationEl = makeElementsArray(swiper.pagination.el);
  301. paginationEl.forEach(el => {
  302. el.addEventListener('keydown', onEnterOrSpaceKey);
  303. });
  304. }
  305. // Tab focus
  306. const document = getDocument();
  307. document.addEventListener('visibilitychange', onVisibilityChange);
  308. swiper.el.addEventListener('focus', handleFocus, true);
  309. swiper.el.addEventListener('focus', handleFocus, true);
  310. swiper.el.addEventListener('pointerdown', handlePointerDown, true);
  311. swiper.el.addEventListener('pointerup', handlePointerUp, true);
  312. };
  313. function destroy() {
  314. if (liveRegion) liveRegion.remove();
  315. let {
  316. nextEl,
  317. prevEl
  318. } = swiper.navigation ? swiper.navigation : {};
  319. nextEl = makeElementsArray(nextEl);
  320. prevEl = makeElementsArray(prevEl);
  321. if (nextEl) {
  322. nextEl.forEach(el => el.removeEventListener('keydown', onEnterOrSpaceKey));
  323. }
  324. if (prevEl) {
  325. prevEl.forEach(el => el.removeEventListener('keydown', onEnterOrSpaceKey));
  326. }
  327. // Pagination
  328. if (hasClickablePagination()) {
  329. const paginationEl = makeElementsArray(swiper.pagination.el);
  330. paginationEl.forEach(el => {
  331. el.removeEventListener('keydown', onEnterOrSpaceKey);
  332. });
  333. }
  334. const document = getDocument();
  335. document.removeEventListener('visibilitychange', onVisibilityChange);
  336. // Tab focus
  337. if (swiper.el && typeof swiper.el !== 'string') {
  338. swiper.el.removeEventListener('focus', handleFocus, true);
  339. swiper.el.removeEventListener('pointerdown', handlePointerDown, true);
  340. swiper.el.removeEventListener('pointerup', handlePointerUp, true);
  341. }
  342. }
  343. on('beforeInit', () => {
  344. liveRegion = createElement('span', swiper.params.a11y.notificationClass);
  345. liveRegion.setAttribute('aria-live', 'assertive');
  346. liveRegion.setAttribute('aria-atomic', 'true');
  347. });
  348. on('afterInit', () => {
  349. if (!swiper.params.a11y.enabled) return;
  350. init();
  351. });
  352. on('slidesLengthChange snapGridLengthChange slidesGridLengthChange', () => {
  353. if (!swiper.params.a11y.enabled) return;
  354. initSlides();
  355. });
  356. on('fromEdge toEdge afterInit lock unlock', () => {
  357. if (!swiper.params.a11y.enabled) return;
  358. updateNavigation();
  359. });
  360. on('paginationUpdate', () => {
  361. if (!swiper.params.a11y.enabled) return;
  362. updatePagination();
  363. });
  364. on('destroy', () => {
  365. if (!swiper.params.a11y.enabled) return;
  366. destroy();
  367. });
  368. }
  369. export { A11y as default };