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

@@ -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

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"

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,