[WC-2942]: Fix carousel focus indicator

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

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:*",

packages/pluggableWidgets/carousel-web/src/Carousel.xml

@@ -25,7 +25,7 @@
                     <caption>Navigation controls</caption>
                     <description />
                 </property>
-                <property key="autoplay" type="boolean" defaultValue="true">
+                <property key="autoplay" type="boolean" defaultValue="false">
                     <caption>Auto play</caption>
                     <description />
                 </property>

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
         }
     };
 

packages/pluggableWidgets/carousel-web/src/package.xml

@@ -1,6 +1,6 @@
 <?xml version="1.0" encoding="utf-8" ?>
 <package xmlns="http://www.mendix.com/package/1.0/">
-    <clientModule name="Carousel" version="2.3.0" xmlns="http://www.mendix.com/clientModule/1.0/">
+    <clientModule name="Carousel" version="2.3.1" xmlns="http://www.mendix.com/clientModule/1.0/">
         <widgetFiles>
             <widgetFile path="Carousel.xml" />
         </widgetFiles>

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%;