chore: update swiper and accessibillity

Author: gjulivan

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

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/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 {