diff --git a/packages/pluggableWidgets/carousel-web/CHANGELOG.md b/packages/pluggableWidgets/carousel-web/CHANGELOG.md
index 446cd0d329..ff8d1c56e2 100644
--- a/packages/pluggableWidgets/carousel-web/CHANGELOG.md
+++ b/packages/pluggableWidgets/carousel-web/CHANGELOG.md
@@ -6,6 +6,10 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
## [Unreleased]
+### Fixed
+
+- Added focus indicator and background to navigation buttons of carousel, removed autoplay by default
+
## [2.3.0] - 2025-08-19
### Changed
diff --git a/packages/pluggableWidgets/carousel-web/package.json b/packages/pluggableWidgets/carousel-web/package.json
index d33019f96f..3dbea6132f 100644
--- a/packages/pluggableWidgets/carousel-web/package.json
+++ b/packages/pluggableWidgets/carousel-web/package.json
@@ -1,7 +1,7 @@
{
"name": "@mendix/carousel-web",
"widgetName": "Carousel",
- "version": "2.3.0",
+ "version": "2.3.1",
"description": "Displays images in a carousel",
"copyright": "© Mendix Technology BV 2025. All rights reserved.",
"license": "Apache-2.0",
@@ -44,7 +44,7 @@
"dependencies": {
"@mendix/widget-plugin-component-kit": "workspace:*",
"classnames": "^2.5.1",
- "swiper": "^11.2.10"
+ "swiper": "^12.1.0"
},
"devDependencies": {
"@mendix/automation-utils": "workspace:*",
diff --git a/packages/pluggableWidgets/carousel-web/src/Carousel.xml b/packages/pluggableWidgets/carousel-web/src/Carousel.xml
index 53ee13cd3c..2db73936e0 100644
--- a/packages/pluggableWidgets/carousel-web/src/Carousel.xml
+++ b/packages/pluggableWidgets/carousel-web/src/Carousel.xml
@@ -25,7 +25,7 @@
Navigation controls
-
+
Auto play
diff --git a/packages/pluggableWidgets/carousel-web/src/components/Carousel.tsx b/packages/pluggableWidgets/carousel-web/src/components/Carousel.tsx
index 2228a592ff..d9c3d10c40 100644
--- a/packages/pluggableWidgets/carousel-web/src/components/Carousel.tsx
+++ b/packages/pluggableWidgets/carousel-web/src/components/Carousel.tsx
@@ -1,7 +1,7 @@
import { ReactElement, ReactNode, useCallback, useState } from "react";
import { GUID } from "mendix";
import classNames from "classnames";
-import { A11y, Autoplay, EffectFade, Navigation, Pagination } from "swiper/modules";
+import { A11y, Autoplay, EffectFade, Keyboard, Navigation, Pagination } from "swiper/modules";
import { Swiper, SwiperClass, SwiperSlide } from "swiper/react";
import { PaginationOptions, SwiperOptions } from "swiper/types";
import "swiper/css";
@@ -57,10 +57,13 @@ export function Carousel(props: CarouselProps): ReactElement {
effect: "fade",
fadeEffect: { crossFade: true }
}),
- modules: [A11y, Navigation, Pagination, EffectFade, Autoplay],
+ modules: [A11y, Navigation, Pagination, EffectFade, Autoplay, Keyboard],
a11y: {
enabled: true,
slideRole: "listitem"
+ },
+ keyboard: {
+ enabled: true
}
};
diff --git a/packages/pluggableWidgets/carousel-web/src/package.xml b/packages/pluggableWidgets/carousel-web/src/package.xml
index 124bce9c6f..916c59d476 100644
--- a/packages/pluggableWidgets/carousel-web/src/package.xml
+++ b/packages/pluggableWidgets/carousel-web/src/package.xml
@@ -1,6 +1,6 @@
-
+
diff --git a/packages/pluggableWidgets/carousel-web/src/ui/Carousel.scss b/packages/pluggableWidgets/carousel-web/src/ui/Carousel.scss
index 0a2cc4c54e..7d70b087d5 100644
--- a/packages/pluggableWidgets/carousel-web/src/ui/Carousel.scss
+++ b/packages/pluggableWidgets/carousel-web/src/ui/Carousel.scss
@@ -1,4 +1,12 @@
+// Atlas UI compatible variable naming for data widgets
+$gray-200: #e3e3e5 !default;
+$spacing-small: 8px !default;
+$focus-outline: 2px solid #264ae5 !default;
+$focus-outline-offset: 2px !default;
+
.swiper {
+ --swiper-navigation-size: 30px;
+ --swiper-navigation-color: var(--brand-primary);
width: 100%;
height: 100%;
}
@@ -23,6 +31,18 @@
align-items: center;
}
+.swiper-button-next,
+.swiper-button-prev {
+ border-radius: 50%;
+ background-color: var(--gray-200, $gray-200);
+ padding: var(--spacing-small, $spacing-small);
+
+ &:focus {
+ outline: var(--focus-outline, $focus-outline);
+ outline-offset: var(--focus-outline-offset, $focus-outline-offset);
+ }
+}
+
.swiper-slide img {
display: block;
width: 100%;
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index a058423185..cf91697f76 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -769,8 +769,8 @@ importers:
specifier: ^2.5.1
version: 2.5.1
swiper:
- specifier: ^11.2.10
- version: 11.2.10
+ specifier: ^12.1.0
+ version: 12.1.0
devDependencies:
'@mendix/automation-utils':
specifier: workspace:*
@@ -10130,8 +10130,8 @@ packages:
engines: {node: '>=10.13.0'}
hasBin: true
- swiper@11.2.10:
- resolution: {integrity: sha512-RMeVUUjTQH+6N3ckimK93oxz6Sn5la4aDlgPzB+rBrG/smPdCTicXyhxa+woIpopz+jewEloiEE3lKo1h9w2YQ==}
+ swiper@12.1.0:
+ resolution: {integrity: sha512-BD4CpAOOyEvZ2f0CDx362ea+vmOwukVcmbsQx+0BhRIaBUz8wvcCd//E7RFmvBZCrfyqXCHUVqmgUwts6ywlxw==}
engines: {node: '>= 4.7.0'}
symbol-observable@1.2.0:
@@ -12489,7 +12489,7 @@ snapshots:
identity-obj-proxy: 3.0.0
jasmine: 3.99.0
jasmine-core: 3.99.1
- jest: 29.7.0(@types/node@22.14.1)(ts-node@10.9.2(@swc/core@1.13.5)(@types/node@22.14.1)(typescript@5.9.3))
+ jest: 29.7.0(@types/node@22.14.1)
jest-environment-jsdom: 29.7.0
jest-jasmine2: 29.7.0
jest-junit: 13.2.0
@@ -17008,6 +17008,18 @@ snapshots:
merge-stream: 2.0.0
supports-color: 8.1.1
+ jest@29.7.0(@types/node@22.14.1):
+ dependencies:
+ '@jest/core': 29.7.0(ts-node@10.9.2(@swc/core@1.13.5)(@types/node@22.14.1)(typescript@5.9.3))
+ '@jest/types': 29.6.3
+ import-local: 3.2.0
+ jest-cli: 29.7.0(@types/node@22.14.1)(ts-node@10.9.2(@swc/core@1.13.5)(@types/node@22.14.1)(typescript@5.9.3))
+ transitivePeerDependencies:
+ - '@types/node'
+ - babel-plugin-macros
+ - supports-color
+ - ts-node
+
jest@29.7.0(@types/node@22.14.1)(ts-node@10.9.2(@swc/core@1.13.5)(@types/node@22.14.1)(typescript@5.9.3)):
dependencies:
'@jest/core': 29.7.0(ts-node@10.9.2(@swc/core@1.13.5)(@types/node@22.14.1)(typescript@5.9.3))
@@ -19664,7 +19676,7 @@ snapshots:
picocolors: 1.1.1
stable: 0.1.8
- swiper@11.2.10: {}
+ swiper@12.1.0: {}
symbol-observable@1.2.0: {}
@@ -19809,7 +19821,7 @@ snapshots:
bs-logger: 0.2.6
fast-json-stable-stringify: 2.1.0
handlebars: 4.7.8
- jest: 29.7.0(@types/node@22.14.1)(ts-node@10.9.2(@swc/core@1.13.5)(@types/node@22.14.1)(typescript@5.9.3))
+ jest: 29.7.0(@types/node@22.14.1)
json5: 2.2.3
lodash.memoize: 4.1.2
make-error: 1.3.6