From 62aa1e764a8f8422ef8d97ba8d24b2f2ec9840ce Mon Sep 17 00:00:00 2001
From: planctus <davidepuntoferrante@gmail.com>
Date: Mon, 27 Feb 2023 12:01:29 +0200
Subject: [PATCH 1/2] feat(focus): Handling keyboard on play button -
 FRONT-3870

---
 .../vanilla/components/carousel/carousel.js   | 26 +++++++++++++++++++
 1 file changed, 26 insertions(+)

diff --git a/src/implementations/vanilla/components/carousel/carousel.js b/src/implementations/vanilla/components/carousel/carousel.js
index bc7a38a732a..0b67dfa967b 100644
--- a/src/implementations/vanilla/components/carousel/carousel.js
+++ b/src/implementations/vanilla/components/carousel/carousel.js
@@ -80,6 +80,7 @@ export class Carousel {
     this.index = 1;
     this.total = 0;
     this.allowShift = true;
+    this.activeNav = null;
     this.autoPlay = null;
     this.autoPlayInterval = null;
     this.hoverAutoPlay = null;
@@ -107,6 +108,7 @@ export class Carousel {
     this.dragEnd = this.dragEnd.bind(this);
     this.dragAction = this.dragAction.bind(this);
     this.handleFocus = this.handleFocus.bind(this);
+    this.handleKeyboardOnPlay = this.handleKeyboardOnPlay.bind(this);
   }
 
   /**
@@ -180,6 +182,9 @@ export class Carousel {
       this.btnPlay.addEventListener('click', this.handleAutoPlay);
       this.btnPause.addEventListener('click', this.handleAutoPlay);
     }
+    if (this.btnPlay) {
+      this.btnPlay.addEventListener('keydown', this.handleKeyboardOnPlay);
+    }
     if (this.attachClickListener && this.btnNext) {
       this.btnNext.addEventListener(
         'click',
@@ -192,6 +197,7 @@ export class Carousel {
         this.shiftSlide.bind(this, 'prev', true)
       );
     }
+
     if (this.slidesContainer) {
       // Mouse events
       this.slidesContainer.addEventListener('mouseover', this.handleMouseOver);
@@ -494,6 +500,26 @@ export class Carousel {
     }
   }
 
+  /**
+   * @param {Event} e
+   */
+  handleKeyboardOnPlay(e) {
+    switch (e.key) {
+      case 'Tab':
+      case 'ArrowRight':
+        e.preventDefault();
+        this.activeNav = queryOne(
+          '.ecl-carousel__navigation-item[aria-current="true"]'
+        );
+        if (this.activeNav) {
+          this.activeNav.focus();
+        }
+        break;
+
+      default:
+    }
+  }
+
   /**
    * Trigger events on focus.
    * @param {Event} e

From ddd005fd3985f334bdc4e8494821a140bffd4a50 Mon Sep 17 00:00:00 2001
From: planctus <davidepuntoferrante@gmail.com>
Date: Wed, 1 Mar 2023 10:21:45 +0200
Subject: [PATCH 2/2] chore: improving keyboard nav in carousel, aligning
 styles in EU radio to the EC version - FRONT-3870

---
 .../radio/__snapshots__/radio.test.js.snap    |  5 ---
 .../vanilla/components/carousel/carousel.js   | 41 ++++++++++++++++++-
 .../vanilla/components/radio/radio-eu.scss    |  6 +--
 .../components/radio/demo/data--default.js    |  1 -
 4 files changed, 43 insertions(+), 10 deletions(-)

diff --git a/src/implementations/twig/components/radio/__snapshots__/radio.test.js.snap b/src/implementations/twig/components/radio/__snapshots__/radio.test.js.snap
index 0c52b5a207f..03ab95f743b 100644
--- a/src/implementations/twig/components/radio/__snapshots__/radio.test.js.snap
+++ b/src/implementations/twig/components/radio/__snapshots__/radio.test.js.snap
@@ -211,7 +211,6 @@ exports[`Radio Default renders correctly 1`] = `
     >
       <input
         aria-describedby="helper-1"
-        checked=""
         class="ecl-radio__input"
         id="radio-default-1"
         name="radio-group-1"
@@ -391,7 +390,6 @@ exports[`Radio Default renders correctly with extra attributes 1`] = `
     >
       <input
         aria-describedby="helper-1"
-        checked=""
         class="ecl-radio__input"
         id="radio-default-1"
         name="radio-group-1"
@@ -569,7 +567,6 @@ exports[`Radio Default renders correctly with extra class names 1`] = `
     >
       <input
         aria-describedby="helper-1"
-        checked=""
         class="ecl-radio__input"
         id="radio-default-1"
         name="radio-group-1"
@@ -761,7 +758,6 @@ exports[`Radio Invalid renders correctly 1`] = `
     >
       <input
         aria-describedby="helper-1"
-        checked=""
         class="ecl-radio__input"
         id="radio-default-1"
         name="radio-group-1"
@@ -939,7 +935,6 @@ exports[`Radio Optional renders correctly 1`] = `
     >
       <input
         aria-describedby="helper-1"
-        checked=""
         class="ecl-radio__input"
         id="radio-default-1"
         name="radio-group-1"
diff --git a/src/implementations/vanilla/components/carousel/carousel.js b/src/implementations/vanilla/components/carousel/carousel.js
index 0b67dfa967b..92f99d9d27c 100644
--- a/src/implementations/vanilla/components/carousel/carousel.js
+++ b/src/implementations/vanilla/components/carousel/carousel.js
@@ -91,6 +91,7 @@ export class Carousel {
     this.posFinal = 0;
     this.threshold = 80;
     this.navigationItems = null;
+    this.navigation = null;
     this.controls = null;
     this.direction = 'ltr';
     this.cloneFirstSLide = null;
@@ -109,6 +110,7 @@ export class Carousel {
     this.dragAction = this.dragAction.bind(this);
     this.handleFocus = this.handleFocus.bind(this);
     this.handleKeyboardOnPlay = this.handleKeyboardOnPlay.bind(this);
+    this.handleKeyboardOnBullets = this.handleKeyboardOnBullets.bind(this);
   }
 
   /**
@@ -121,6 +123,7 @@ export class Carousel {
     this.btnNext = queryOne(this.nextSelector, this.element);
     this.slidesContainer = queryOne(this.slidesClass, this.element);
     this.container = queryOne(this.containerClass, this.element);
+    this.navigation = queryOne('.ecl-carousel__navigation', this.element);
     this.navigationItems = queryAll(this.navigationItemsClass, this.element);
     this.pagination = queryOne(this.paginationClass, this.element);
     this.controls = queryOne(this.controlsClass, this.element);
@@ -178,6 +181,9 @@ export class Carousel {
         );
       });
     }
+    if (this.navigation) {
+      this.navigation.addEventListener('keydown', this.handleKeyboardOnBullets);
+    }
     if (this.attachClickListener && this.btnPlay && this.btnPause) {
       this.btnPlay.addEventListener('click', this.handleAutoPlay);
       this.btnPause.addEventListener('click', this.handleAutoPlay);
@@ -509,11 +515,44 @@ export class Carousel {
       case 'ArrowRight':
         e.preventDefault();
         this.activeNav = queryOne(
-          '.ecl-carousel__navigation-item[aria-current="true"]'
+          `${this.navigationItemsClass}[aria-current="true"]`
         );
         if (this.activeNav) {
           this.activeNav.focus();
         }
+        if (this.autoPlay) {
+          this.handleAutoPlay();
+        }
+        break;
+
+      default:
+    }
+  }
+
+  /**
+   * @param {Event} e
+   */
+  handleKeyboardOnBullets(e) {
+    const focusedEl = document.activeElement;
+    switch (e.key) {
+      case 'Tab':
+      case 'ArrowRight':
+        e.preventDefault();
+        if (focusedEl.nextSibling) {
+          this.shiftSlide('next', true);
+          focusedEl.nextSibling.focus();
+        } else {
+          this.btnPrev.focus();
+        }
+        break;
+
+      case 'ArrowLeft':
+        if (focusedEl.previousSibling) {
+          this.shiftSlide('prev', true);
+          focusedEl.previousSibling.focus();
+        } else {
+          this.btnPlay.focus();
+        }
         break;
 
       default:
diff --git a/src/implementations/vanilla/components/radio/radio-eu.scss b/src/implementations/vanilla/components/radio/radio-eu.scss
index 5b2ee6aff86..58f247e77a4 100644
--- a/src/implementations/vanilla/components/radio/radio-eu.scss
+++ b/src/implementations/vanilla/components/radio/radio-eu.scss
@@ -5,9 +5,9 @@
   $_box-border-color: map.get(theme.$color, 'grey-80'),
   $_box-border-color-hover: map.get(theme.$color, 'blue-100'),
   $_box-border-color-checked-hover: map.get(theme.$color, 'blue-140'),
-  $_box-border-width-checked: 2px,
-  $_box-inner-display: flex,
-  $_box-margin-top: 0.0625rem,
+  $_box-border-width-checked: 7px,
+  $_box-inner-display: none,
+  $_box-margin-top: 0.125rem,
   $_help-text-color: map.get(theme.$color, 'grey-80'),
   $_help-text-font: map.get(theme.$font-prolonged, 'm'),
   $_invalid-border-color: map.get(theme.$color, 'red-120'),
diff --git a/src/specs/components/radio/demo/data--default.js b/src/specs/components/radio/demo/data--default.js
index eb29b387e56..534f780e4bf 100644
--- a/src/specs/components/radio/demo/data--default.js
+++ b/src/specs/components/radio/demo/data--default.js
@@ -22,7 +22,6 @@ module.exports = {
       label: 'Luxembourg',
       helper_id: 'helper-1',
       helper_text: 'Help text for an option',
-      checked: true,
     },
     {
       id: 'radio-default-2',