From 85c6b276da490a0b922a65dd6f0a419a6052291c Mon Sep 17 00:00:00 2001
From: Martin Leblanc <m26lebla@uwaterloo.ca>
Date: Thu, 27 Feb 2025 13:21:43 -0500
Subject: [PATCH] ISTWCMS-5650: Add tab indexing to fact and figures carousel
nav and dots
---
.../facts-and-figures/facts-and-figures.js | 31 +++++++++++++++++++
.../facts-and-figures/facts-and-figures.twig | 4 +--
2 files changed, 33 insertions(+), 2 deletions(-)
diff --git a/src/patterns/04-components/facts-and-figures/facts-and-figures.js b/src/patterns/04-components/facts-and-figures/facts-and-figures.js
index 57f0ea88..b940fbf7 100644
--- a/src/patterns/04-components/facts-and-figures/facts-and-figures.js
+++ b/src/patterns/04-components/facts-and-figures/facts-and-figures.js
@@ -36,6 +36,37 @@
}
}
});
+ // Get the Flickity instance from the element.
+ var flkty = $carousel.data('flickity');
+
+ // Handle keyboard navigation for Flickity pagination dots.
+ var dots = document.querySelectorAll('.uw-ff .flickity-page-dots .dot');
+
+ if (!dots.length) {
+ return;
+ }
+
+ dots.forEach(function (dot) {
+ dot.setAttribute('tabindex', '0'); // Make dots focusable.
+
+ dot.addEventListener('keydown', function (event) {
+ if (event.key === 'Enter' || event.keyCode === 13) {
+ var label = dot.getAttribute('aria-label');
+
+ // Extract the slide index from the dot label.
+ var match = label.match(/\d+/);
+ if (!match) {
+ return;
+ }
+
+ var targetIndex = parseInt(match[0], 10) - 1;
+
+ if (flkty) {
+ flkty.select(targetIndex); // Move to the selected slide.
+ }
+ }
+ });
+ });
// previous button
$('.uw-button--previous').on( 'click', function() {
$carousel.flickity('previous');
diff --git a/src/patterns/04-components/facts-and-figures/facts-and-figures.twig b/src/patterns/04-components/facts-and-figures/facts-and-figures.twig
index 80746d79..0aeca943 100644
--- a/src/patterns/04-components/facts-and-figures/facts-and-figures.twig
+++ b/src/patterns/04-components/facts-and-figures/facts-and-figures.twig
@@ -62,8 +62,8 @@
{% if ffs.num_per_carousel %}
<div class="uw-button--wrap">
- <button class="uw-button--previous"> < Prev</button>
- <button class="uw-button--next">Next ></button>
+ <button tabindex="0" class="uw-button--previous"> < Prev</button>
+ <button tabindex="0" class="uw-button--next">Next ></button>
</div>
{% endif %}
--
GitLab