diff --git a/src/implementations/twig/components/carousel/README.md b/src/implementations/twig/components/carousel/README.md
index e562043ffba..8c3c10aa6d6 100644
--- a/src/implementations/twig/components/carousel/README.md
+++ b/src/implementations/twig/components/carousel/README.md
@@ -13,8 +13,6 @@ npm install --save @ecl/twig-component-carousel
- **"sr_description"** (string) (default: '') screen reader description of the carousel
- **"sr_role"** (string) (default: 'carousel') screen reader localized role for the carousel
- **"sr_slide_role"** (string) (default: 'slide') screen reader localized role for the slides
-- **"sr_previous"** (string) (default: 'Previous slides') screen reader label for previous button
-- **"sr_next"** (string) (default: 'Next slides') screen reader label for next button
- **"sr_navigation"** (string) (default: 'Go to slide %d') screen reader label for navigation buttons
- **"sr_play"** (string) (default: 'Play carousel') screen reader label for the play button
- **"sr_pause"** (string) (default: 'Pause carousel') screen reader label for the pause button
diff --git a/src/implementations/twig/components/carousel/__snapshots__/carousel.test.js.snap b/src/implementations/twig/components/carousel/__snapshots__/carousel.test.js.snap
index 47e9a96c71c..237430eced1 100644
--- a/src/implementations/twig/components/carousel/__snapshots__/carousel.test.js.snap
+++ b/src/implementations/twig/components/carousel/__snapshots__/carousel.test.js.snap
@@ -95,31 +95,6 @@ exports[`Carousel Default renders correctly 1`] = `
-
@@ -393,31 +368,6 @@ exports[`Carousel Default renders correctly 1`] = `
-
`;
@@ -519,31 +469,6 @@ exports[`Carousel Default renders correctly with extra attributes 1`] = `
-
@@ -817,31 +742,6 @@ exports[`Carousel Default renders correctly with extra attributes 1`] = `
-
`;
@@ -941,31 +841,6 @@ exports[`Carousel Default renders correctly with extra class names 1`] = `
-
@@ -1239,31 +1114,6 @@ exports[`Carousel Default renders correctly with extra class names 1`] = `
-
`;
diff --git a/src/implementations/twig/components/carousel/carousel.html.twig b/src/implementations/twig/components/carousel/carousel.html.twig
index 55d9a979dd8..6b7ce66e355 100644
--- a/src/implementations/twig/components/carousel/carousel.html.twig
+++ b/src/implementations/twig/components/carousel/carousel.html.twig
@@ -8,8 +8,6 @@
- "sr_description" (string) (default: '') screen reader description of the carousel
- "sr_role" (string) (default: 'carousel') screen reader localized role for the carousel
- "sr_slide_role" (string) (default: 'slide') screen reader localized role for the slides
- - "sr_previous" (string) (default: 'Previous slides') screen reader label for previous button
- - "sr_next" (string) (default: 'Next slides') screen reader label for next button
- "sr_navigation" (string) (default: 'Go to slide %d') screen reader label for navigation buttons
- "sr_play" (string) (default: 'Play carousel') screen reader label for the play button
- "sr_pause" (string) (default: 'Pause carousel') screen reader label for the pause button
@@ -33,8 +31,6 @@
{% set _sr_description = sr_description|default('') %}
{% set _sr_role = sr_role|default('carousel') %}
{% set _sr_slide_role = sr_slide_role|default('slide') %}
-{% set _sr_previous = sr_previous|default('Previous slides') %}
-{% set _sr_next = sr_next|default('Next slides') %}
{% set _sr_navigation = sr_navigation|default('Go to slide %d') %}
{% set _sr_play = sr_play|default('Play carousel') %}
{% set _sr_pause = sr_pause|default('Pause carousel') %}
@@ -114,20 +110,6 @@
- {% include '@ecl/button/button.html.twig' with {
- hide_label: true,
- label: _sr_previous,
- type: 'button',
- variant: 'ghost',
- extra_classes: 'ecl-carousel__prev',
- icon: {
- path: _icon_path,
- name: 'corner-arrow',
- size: 'm',
- transform: 'rotate-270',
- },
- } only %}
-
{% for item in _items %}
@@ -144,20 +126,6 @@
{% endfor %}
-
- {% include '@ecl/button/button.html.twig' with {
- hide_label: true,
- label: _sr_next,
- type: 'button',
- variant: 'ghost',
- extra_classes: 'ecl-carousel__next',
- icon: {
- path: _icon_path,
- name: 'corner-arrow',
- size: 'm',
- transform: 'rotate-90',
- },
- } only %}
{% endif %}
diff --git a/src/implementations/vanilla/components/carousel/carousel.js b/src/implementations/vanilla/components/carousel/carousel.js
index 5204062f420..9973f2e2017 100644
--- a/src/implementations/vanilla/components/carousel/carousel.js
+++ b/src/implementations/vanilla/components/carousel/carousel.js
@@ -4,8 +4,6 @@ import { queryOne, queryAll } from '@ecl/dom-utils';
* @param {HTMLElement} element DOM element for component instantiation and scope
* @param {Object} options
* @param {String} options.toggleSelector Selector for toggling element
- * @param {String} options.prevSelector Selector for prev element
- * @param {String} options.nextSelector Selector for next element
* @param {String} options.contentClass Selector for the content container
* @param {String} options.slidesClass Selector for the slides container
* @param {String} options.slideClass Selector for the slide items
@@ -33,8 +31,6 @@ export class Carousel {
{
playSelector = '.ecl-carousel__play',
pauseSelector = '.ecl-carousel__pause',
- prevSelector = '.ecl-carousel__prev',
- nextSelector = '.ecl-carousel__next',
containerClass = '.ecl-carousel__container',
slidesClass = '.ecl-carousel__slides',
slideClass = '.ecl-carousel__slide',
@@ -57,8 +53,6 @@ export class Carousel {
// Options
this.playSelector = playSelector;
this.pauseSelector = pauseSelector;
- this.prevSelector = prevSelector;
- this.nextSelector = nextSelector;
this.containerClass = containerClass;
this.slidesClass = slidesClass;
this.slideClass = slideClass;
@@ -73,8 +67,6 @@ export class Carousel {
this.slides = null;
this.btnPlay = null;
this.btnPause = null;
- this.btnPrev = null;
- this.btnNext = null;
this.index = 1;
this.total = 0;
this.allowShift = true;
@@ -126,8 +118,6 @@ export class Carousel {
this.btnPlay = queryOne(this.playSelector, this.element);
this.btnPause = queryOne(this.pauseSelector, this.element);
- this.btnPrev = queryOne(this.prevSelector, this.element);
- 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);
@@ -141,12 +131,6 @@ export class Carousel {
// If only one slide, don't initialize carousel and hide controls
if (this.total <= 1) {
- if (this.btnNext) {
- this.btnNext.style.display = 'none';
- }
- if (this.btnPrev) {
- this.btnPrev.style.display = 'none';
- }
if (this.controls) {
this.controls.style.display = 'none';
}
@@ -197,18 +181,6 @@ export class Carousel {
if (this.btnPlay) {
this.btnPlay.addEventListener('keydown', this.handleKeyboardOnPlay);
}
- if (this.attachClickListener && this.btnNext) {
- this.btnNext.addEventListener(
- 'click',
- this.shiftSlide.bind(this, 'next', true),
- );
- }
- if (this.attachClickListener && this.btnPrev) {
- this.btnPrev.addEventListener(
- 'click',
- this.shiftSlide.bind(this, 'prev', true),
- );
- }
if (this.slidesContainer) {
// Mouse events
@@ -249,12 +221,6 @@ export class Carousel {
if (this.btnPause) {
this.btnPause.replaceWith(this.btnPause.cloneNode(true));
}
- if (this.btnNext) {
- this.btnNext.replaceWith(this.btnNext.cloneNode(true));
- }
- if (this.btnPrev) {
- this.btnPrev.replaceWith(this.btnPrev.cloneNode(true));
- }
if (this.slidesContainer) {
this.slidesContainer.removeEventListener(
'mouseover',
diff --git a/src/implementations/vanilla/components/gallery/gallery.scss b/src/implementations/vanilla/components/gallery/gallery.scss
index 10307b2ee5c..064ec18a318 100644
--- a/src/implementations/vanilla/components/gallery/gallery.scss
+++ b/src/implementations/vanilla/components/gallery/gallery.scss
@@ -377,6 +377,8 @@ $_image-height-mobile: 260px;
&:focus-visible {
background-color: map.get($theme, 'color', 'white');
+ outline: 2px solid map.get($theme, 'color', 'white');
+ outline-offset: 0;
}
}
diff --git a/src/implementations/vanilla/components/site-header/site-header-ec.scss b/src/implementations/vanilla/components/site-header/site-header-ec.scss
index d251ed157a3..699759b7c34 100644
--- a/src/implementations/vanilla/components/site-header/site-header-ec.scss
+++ b/src/implementations/vanilla/components/site-header/site-header-ec.scss
@@ -276,7 +276,6 @@ $menu-top: calc(44px + 2 * var(--s-xs));
.ecl-site-header__login-toggle,
.ecl-site-header__search-toggle,
.ecl-site-header__language-selector {
- background: map.get($site-header, 'background-color');
font-size: 0;
line-height: 0;
padding: var(--s-xs) 0;
diff --git a/src/implementations/vanilla/components/site-header/site-header-eu.scss b/src/implementations/vanilla/components/site-header/site-header-eu.scss
index a1751191a35..1fa745db7f0 100644
--- a/src/implementations/vanilla/components/site-header/site-header-eu.scss
+++ b/src/implementations/vanilla/components/site-header/site-header-eu.scss
@@ -36,6 +36,10 @@ $language-list: null !default;
margin-bottom: 8px;
}
+ .ecl-menu__open:not(:hover, :focus-visible) {
+ color: map.get($theme, 'color', 'white');
+ }
+
&:not(.ecl-site-header--has-menu) {
box-shadow: var(--sh-2);
}
diff --git a/src/themes/ec/variables/_button.scss b/src/themes/ec/variables/_button.scss
index ea817117558..d5dacccb312 100644
--- a/src/themes/ec/variables/_button.scss
+++ b/src/themes/ec/variables/_button.scss
@@ -40,9 +40,9 @@ $button: (
focus-shadow: none,
),
tertiary: (
- background: map.get($color, 'white'),
+ background: transparent,
color: var(--c-d),
- border-color: map.get($color, 'white'),
+ border-color: transparent,
background-hover: var(--c-p-20),
color-hover: var(--c-d),
border-color-hover: var(--c-d-80),
diff --git a/src/themes/eu/variables/_button.scss b/src/themes/eu/variables/_button.scss
index 49f9bc85018..60170a57bb2 100644
--- a/src/themes/eu/variables/_button.scss
+++ b/src/themes/eu/variables/_button.scss
@@ -40,9 +40,9 @@ $button: (
focus-shadow: 0 0 0 4px var(--c-p) inset,
),
tertiary: (
- background: map.get($color, 'white'),
+ background: transparent,
color: var(--c-d-80),
- border-color: map.get($color, 'white'),
+ border-color: transparent,
background-hover: map.get($color, 'white'),
color-hover: var(--c-d-80),
border-color-hover: map.get($color, 'white'),