From 0871ed44b1d257738877319debbceb4e608b9731 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jo=C3=A3o=20Victor=20Congio=20Goularte?=
 <joaocongio@outlook.com>
Date: Mon, 6 Nov 2023 17:10:14 -0300
Subject: [PATCH] fix(a11y): Fix a11y issues reported by Lighthouse

- Fixed the accessibility issue of the `aria-controls`s' relationship between the slider and its controls ([reference](https://dequeuniversity.com/rules/axe/4.7/aria-valid-attr-value)).
- Fixed the `tabindex` accessibility issue of the dots controls ([reference](https://dequeuniversity.com/rules/axe/4.7/tabindex)).
---
 CHANGELOG.md                        | 5 +++++
 react/components/PaginationDots.tsx | 2 +-
 react/components/Slider.tsx         | 5 ++++-
 3 files changed, 10 insertions(+), 2 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 161a20c..4cf8b4f 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -7,6 +7,11 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
 
 ## [Unreleased]
 
+### Fixed
+
+- Fixed the accessibility issue of the `aria-controls`s' relationship between the slider and its controls ([reference](https://dequeuniversity.com/rules/axe/4.7/aria-valid-attr-value)).
+- Fixed the `tabindex` accessibility issue of the dots controls ([reference](https://dequeuniversity.com/rules/axe/4.7/tabindex)).
+
 ## [0.24.3] - 2023-05-08
 
 ### Fixed
diff --git a/react/components/PaginationDots.tsx b/react/components/PaginationDots.tsx
index d63fbde..0c663bf 100644
--- a/react/components/PaginationDots.tsx
+++ b/react/components/PaginationDots.tsx
@@ -96,7 +96,7 @@ const PaginationDots: FC<Props> = ({ controls, totalItems, infinite }) => {
               width: `${DOTS_DEFAULT_SIZE}rem`,
             }}
             key={index}
-            tabIndex={index}
+            tabIndex={isActive ? 0 : -1}
             onKeyDown={event => handleDotClick(event, index)}
             onClick={event => handleDotClick(event, index)}
             role="button"
diff --git a/react/components/Slider.tsx b/react/components/Slider.tsx
index b0e80ba..85fd78b 100644
--- a/react/components/Slider.tsx
+++ b/react/components/Slider.tsx
@@ -67,7 +67,9 @@ const Slider: FC<Props> = ({
   const controls = `${label
     .toLowerCase()
     .trim()
-    .replace(/ /g, '-')}-items`
+    .replace(/ /g, '-')}-items-${Math.random()
+    .toString(36)
+    .substring(2, 9)}`
 
   const shouldShowArrows = Boolean(
     (showNavigationArrows === 'always' ||
@@ -98,6 +100,7 @@ const Slider: FC<Props> = ({
       onTouchEnd={touchEndHandler}
       onTouchMove={touchMoveHandler}
       aria-label={label}
+      id={controls}
       style={{
         WebkitOverflowScrolling: !shouldUsePagination ? 'touch' : undefined,
         paddingLeft: fullWidth ? undefined : arrowSize * 2,