ISTWCMS-5650: Add tab indexing to fact and figures carousel nav and dots

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');

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 %}