From d52d776c9bce2b433fba5d1bc997f31cfd9c2068 Mon Sep 17 00:00:00 2001 From: "hedwig.doets" Date: Tue, 4 Nov 2025 16:52:45 +0100 Subject: [PATCH 01/10] fix: add focus indicators to previous and next button --- .../pluggableWidgets/carousel-web/src/ui/Carousel.scss | 10 ++++++++++ 1 file changed, 10 insertions(+) diff --git a/packages/pluggableWidgets/carousel-web/src/ui/Carousel.scss b/packages/pluggableWidgets/carousel-web/src/ui/Carousel.scss index 0a2cc4c54e..4b0c350e8e 100644 --- a/packages/pluggableWidgets/carousel-web/src/ui/Carousel.scss +++ b/packages/pluggableWidgets/carousel-web/src/ui/Carousel.scss @@ -23,6 +23,16 @@ align-items: center; } +.swiper-button-next:focus { + outline: 2px solid #264ae5; + outline-offset: 2px; +} + +.swiper-button-prev:focus { + outline: 2px solid #264ae5; + outline-offset: 2px; +} + .swiper-slide img { display: block; width: 100%; From 24877cb02237e0e338cd0e83ac6a813fe9a36b7f Mon Sep 17 00:00:00 2001 From: "hedwig.doets" Date: Tue, 4 Nov 2025 16:53:14 +0100 Subject: [PATCH 02/10] fix: disable autoplay by default since it's not accessible --- packages/pluggableWidgets/carousel-web/src/Carousel.xml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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 From a193855c1064e9df2bce94ef27311b147cdaae69 Mon Sep 17 00:00:00 2001 From: "hedwig.doets" Date: Fri, 7 Nov 2025 11:16:16 +0100 Subject: [PATCH 03/10] feat: add background to carousel nav buttons --- .../pluggableWidgets/carousel-web/src/ui/Carousel.scss | 10 +++++++--- 1 file changed, 7 insertions(+), 3 deletions(-) diff --git a/packages/pluggableWidgets/carousel-web/src/ui/Carousel.scss b/packages/pluggableWidgets/carousel-web/src/ui/Carousel.scss index 4b0c350e8e..33b22889ae 100644 --- a/packages/pluggableWidgets/carousel-web/src/ui/Carousel.scss +++ b/packages/pluggableWidgets/carousel-web/src/ui/Carousel.scss @@ -23,11 +23,15 @@ align-items: center; } -.swiper-button-next:focus { - outline: 2px solid #264ae5; - outline-offset: 2px; +.swiper-button-next, +.swiper-button-prev { + --swiper-navigation-size: 24px; + border-radius: 50%; + background-color: rgba(245, 245, 245, 0.7); + padding: 2em; } +.swiper-button-next:focus, .swiper-button-prev:focus { outline: 2px solid #264ae5; outline-offset: 2px; From 21d426587aabb02a620c98d3e7b8b39d45471d4a Mon Sep 17 00:00:00 2001 From: "hedwig.doets" Date: Fri, 7 Nov 2025 11:35:44 +0100 Subject: [PATCH 04/10] chore: update changelog --- packages/pluggableWidgets/carousel-web/CHANGELOG.md | 4 ++++ packages/pluggableWidgets/carousel-web/package.json | 2 +- packages/pluggableWidgets/carousel-web/src/package.xml | 2 +- 3 files changed, 6 insertions(+), 2 deletions(-) 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..e5c24c49e0 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", 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 @@ - + From 0b314a755de71200cd0d5943520b44efa834ddfb Mon Sep 17 00:00:00 2001 From: "hedwig.doets" Date: Tue, 9 Dec 2025 16:43:20 +0100 Subject: [PATCH 05/10] fix: use css variables --- packages/pluggableWidgets/carousel-web/src/ui/Carousel.scss | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/pluggableWidgets/carousel-web/src/ui/Carousel.scss b/packages/pluggableWidgets/carousel-web/src/ui/Carousel.scss index 33b22889ae..37969ed7fc 100644 --- a/packages/pluggableWidgets/carousel-web/src/ui/Carousel.scss +++ b/packages/pluggableWidgets/carousel-web/src/ui/Carousel.scss @@ -28,13 +28,13 @@ --swiper-navigation-size: 24px; border-radius: 50%; background-color: rgba(245, 245, 245, 0.7); - padding: 2em; + padding: var(--spacing-large); } .swiper-button-next:focus, .swiper-button-prev:focus { - outline: 2px solid #264ae5; - outline-offset: 2px; + outline: var(--focus-outline); + outline-offset: var(--focus-outline-offset); } .swiper-slide img { From a53ae4cc45dbb38038ec6137ed27aaa814f8ce15 Mon Sep 17 00:00:00 2001 From: "hedwig.doets" Date: Wed, 10 Dec 2025 11:22:27 +0100 Subject: [PATCH 06/10] fix: use variable for background color of swiper button --- packages/pluggableWidgets/carousel-web/src/ui/Carousel.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/pluggableWidgets/carousel-web/src/ui/Carousel.scss b/packages/pluggableWidgets/carousel-web/src/ui/Carousel.scss index 37969ed7fc..f9d9c2a319 100644 --- a/packages/pluggableWidgets/carousel-web/src/ui/Carousel.scss +++ b/packages/pluggableWidgets/carousel-web/src/ui/Carousel.scss @@ -27,7 +27,7 @@ .swiper-button-prev { --swiper-navigation-size: 24px; border-radius: 50%; - background-color: rgba(245, 245, 245, 0.7); + background-color: var(--gray-200); padding: var(--spacing-large); } From f2445f9cb165a300ee93d0ba1aeaf8f5b3f50b56 Mon Sep 17 00:00:00 2001 From: "hedwig.doets" Date: Wed, 10 Dec 2025 16:37:12 +0100 Subject: [PATCH 07/10] fix: add fallback css variables --- packages/pluggableWidgets/carousel-web/src/ui/Carousel.scss | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/packages/pluggableWidgets/carousel-web/src/ui/Carousel.scss b/packages/pluggableWidgets/carousel-web/src/ui/Carousel.scss index f9d9c2a319..cf937fff99 100644 --- a/packages/pluggableWidgets/carousel-web/src/ui/Carousel.scss +++ b/packages/pluggableWidgets/carousel-web/src/ui/Carousel.scss @@ -1,3 +1,8 @@ +$gray-200: #e3e3e5 !default; +$spacing-large: 24px !default; +$focus-outline: 2px solid #264ae5 !default; +$focus-outline-offset: 2px !default; + .swiper { width: 100%; height: 100%; From 84fcf4f6158109e0fc999416571bc60a279f8cf1 Mon Sep 17 00:00:00 2001 From: "hedwig.doets" Date: Wed, 10 Dec 2025 16:51:47 +0100 Subject: [PATCH 08/10] fix: add comment with explanation of css variables --- packages/pluggableWidgets/carousel-web/src/ui/Carousel.scss | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/pluggableWidgets/carousel-web/src/ui/Carousel.scss b/packages/pluggableWidgets/carousel-web/src/ui/Carousel.scss index cf937fff99..ec32765496 100644 --- a/packages/pluggableWidgets/carousel-web/src/ui/Carousel.scss +++ b/packages/pluggableWidgets/carousel-web/src/ui/Carousel.scss @@ -1,3 +1,4 @@ +// Atlas UI compatible variable naming for data widgets $gray-200: #e3e3e5 !default; $spacing-large: 24px !default; $focus-outline: 2px solid #264ae5 !default; From aff68bf8d403e450e54a080869f6e0fadbcede25 Mon Sep 17 00:00:00 2001 From: "hedwig.doets" Date: Thu, 11 Dec 2025 11:13:49 +0100 Subject: [PATCH 09/10] fix: add fallback for variables --- .../pluggableWidgets/carousel-web/src/ui/Carousel.scss | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/packages/pluggableWidgets/carousel-web/src/ui/Carousel.scss b/packages/pluggableWidgets/carousel-web/src/ui/Carousel.scss index ec32765496..b9ae8b301e 100644 --- a/packages/pluggableWidgets/carousel-web/src/ui/Carousel.scss +++ b/packages/pluggableWidgets/carousel-web/src/ui/Carousel.scss @@ -33,14 +33,14 @@ $focus-outline-offset: 2px !default; .swiper-button-prev { --swiper-navigation-size: 24px; border-radius: 50%; - background-color: var(--gray-200); - padding: var(--spacing-large); + background-color: var(--gray-200, $gray-200); + padding: var(--spacing-large, $spacing-large); } .swiper-button-next:focus, .swiper-button-prev:focus { - outline: var(--focus-outline); - outline-offset: var(--focus-outline-offset); + outline: var(--focus-outline, $focus-outline); + outline-offset: var(--focus-outline-offset, $focus-outline-offset); } .swiper-slide img { From 91118440687b87087e5ce1ca31196cb405353be1 Mon Sep 17 00:00:00 2001 From: gjulivan Date: Thu, 29 Jan 2026 12:45:12 +0100 Subject: [PATCH 10/10] chore: update swiper and accessibillity --- .../carousel-web/package.json | 2 +- .../carousel-web/src/components/Carousel.tsx | 7 +++-- .../carousel-web/src/ui/Carousel.scss | 16 ++++++------ pnpm-lock.yaml | 26 ++++++++++++++----- 4 files changed, 33 insertions(+), 18 deletions(-) diff --git a/packages/pluggableWidgets/carousel-web/package.json b/packages/pluggableWidgets/carousel-web/package.json index e5c24c49e0..3dbea6132f 100644 --- a/packages/pluggableWidgets/carousel-web/package.json +++ b/packages/pluggableWidgets/carousel-web/package.json @@ -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/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/ui/Carousel.scss b/packages/pluggableWidgets/carousel-web/src/ui/Carousel.scss index b9ae8b301e..7d70b087d5 100644 --- a/packages/pluggableWidgets/carousel-web/src/ui/Carousel.scss +++ b/packages/pluggableWidgets/carousel-web/src/ui/Carousel.scss @@ -1,10 +1,12 @@ // Atlas UI compatible variable naming for data widgets $gray-200: #e3e3e5 !default; -$spacing-large: 24px !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%; } @@ -31,16 +33,14 @@ $focus-outline-offset: 2px !default; .swiper-button-next, .swiper-button-prev { - --swiper-navigation-size: 24px; border-radius: 50%; background-color: var(--gray-200, $gray-200); - padding: var(--spacing-large, $spacing-large); -} + padding: var(--spacing-small, $spacing-small); -.swiper-button-next:focus, -.swiper-button-prev:focus { - outline: var(--focus-outline, $focus-outline); - outline-offset: var(--focus-outline-offset, $focus-outline-offset); + &:focus { + outline: var(--focus-outline, $focus-outline); + outline-offset: var(--focus-outline-offset, $focus-outline-offset); + } } .swiper-slide img { 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