Merge branch 'master' into feat/add-translation-to-dropdown-props-opt…

…ions

CHANGELOG.md

@@ -11,6 +11,19 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
 - Added translation for the Dropdown options on props `showNavigationArrows` and `showPaginationDots`
 - Translations for Bulgarian, German, Spanish, French, Italian, Korean, Dutch, Portuguese, Romanian and Thai.
 
+## [0.24.5] - 2024-08-08
+
+### Fixed
+
+- Fixed unexpected vertical scrolling when user scrolls the slider horizontally
+
+## [0.24.4] - 2023-11-06
+
+### 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

manifest.json

@@ -1,7 +1,7 @@
 {
   "name": "slider-layout",
   "vendor": "vtex",
-  "version": "0.24.3",
+  "version": "0.24.5",
   "title": "VTEX Slider-Layout",
   "description": "A React Slider component that works well in SPA and SSR",
   "mustUpdateAt": "2020-01-30",

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,10 +100,12 @@ const Slider: FC<Props> = ({
       onTouchEnd={touchEndHandler}
       onTouchMove={touchMoveHandler}
       aria-label={label}
+      id={controls}
       style={{
         WebkitOverflowScrolling: !shouldUsePagination ? 'touch' : undefined,
         paddingLeft: fullWidth ? undefined : arrowSize * 2,
         paddingRight: fullWidth ? undefined : arrowSize * 2,
+        touchAction: 'pan-y',
       }}
       className={`w-100 flex items-center relative ${handles.sliderLayoutContainer}`}
     >

react/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vtex.slider-layout",
-  "version": "0.24.3",
+  "version": "0.24.5",
   "description": "A React Slider component that works well in SPA and SSR",
   "files": [
     "react"