From 5a4a65ec336793b28d6f8e72b2939d991a2d0693 Mon Sep 17 00:00:00 2001 From: Erik Tiekstra Date: Mon, 26 Jan 2026 06:45:23 +0000 Subject: [PATCH] fix: issue with focus states in safari, fixed multiple focus states accross the application Approved-by: Anton Gunnarsson --- .../shortcutsListItems.module.css | 2 +- .../components/Carousel/carousel.module.css | 4 ---- .../MainMenuButton/menuButton.module.css | 5 ----- .../Header/MainMenu/MenuLink/menuLink.module.css | 5 ----- .../bookingCodeFilter.module.css | 2 +- .../components/ChipButton/chip-button.module.css | 7 ------- .../ContentCard/contentCard.module.css | 16 ++++++++++++++++ packages/design-system/lib/normalize.css | 2 +- packages/design-system/package.json | 4 ++-- 9 files changed, 21 insertions(+), 26 deletions(-) diff --git a/apps/scandic-web/components/Blocks/ShortcutsList/ShortcutsListItems/shortcutsListItems.module.css b/apps/scandic-web/components/Blocks/ShortcutsList/ShortcutsListItems/shortcutsListItems.module.css index 081dbe3ff..0fc9a0e9e 100644 --- a/apps/scandic-web/components/Blocks/ShortcutsList/ShortcutsListItems/shortcutsListItems.module.css +++ b/apps/scandic-web/components/Blocks/ShortcutsList/ShortcutsListItems/shortcutsListItems.module.css @@ -22,6 +22,6 @@ } .link:focus-visible { - outline: 2px auto var(--Border-Interactive-Focus); + outline: 2px solid var(--Border-Interactive-Focus); outline-offset: -4px; } diff --git a/apps/scandic-web/components/Carousel/carousel.module.css b/apps/scandic-web/components/Carousel/carousel.module.css index 459cb69c9..9634a85e7 100644 --- a/apps/scandic-web/components/Carousel/carousel.module.css +++ b/apps/scandic-web/components/Carousel/carousel.module.css @@ -17,10 +17,6 @@ min-width: 0; } -.item:focus-visible { - outline: 2px auto var(--Border-Interactive-Focus); - outline-offset: 1px; -} .buttonWrapper { position: absolute; top: 50%; diff --git a/apps/scandic-web/components/Header/MainMenu/MainMenuButton/menuButton.module.css b/apps/scandic-web/components/Header/MainMenu/MainMenuButton/menuButton.module.css index 552ca4d6c..fe9ede858 100644 --- a/apps/scandic-web/components/Header/MainMenu/MainMenuButton/menuButton.module.css +++ b/apps/scandic-web/components/Header/MainMenu/MainMenuButton/menuButton.module.css @@ -10,11 +10,6 @@ border-width: 0; padding: var(--Space-x05) 0; - &:focus-visible { - outline: 2px auto var(--Border-Interactive-Focus); - outline-offset: 1px; - } - &.loading { cursor: progress; } diff --git a/apps/scandic-web/components/Header/MainMenu/MenuLink/menuLink.module.css b/apps/scandic-web/components/Header/MainMenu/MenuLink/menuLink.module.css index 484b2d85b..e06d78384 100644 --- a/apps/scandic-web/components/Header/MainMenu/MenuLink/menuLink.module.css +++ b/apps/scandic-web/components/Header/MainMenu/MenuLink/menuLink.module.css @@ -12,11 +12,6 @@ background-color: var(--Surface-Primary-Hover); } - &:focus-visible { - outline: 2px auto var(--Border-Interactive-Focus); - outline-offset: 1px; - } - &:not(:hover) .arrowIcon { opacity: 0; } diff --git a/packages/booking-flow/lib/components/BookingCodeFilter/bookingCodeFilter.module.css b/packages/booking-flow/lib/components/BookingCodeFilter/bookingCodeFilter.module.css index fecbaaca0..b8e6739f0 100644 --- a/packages/booking-flow/lib/components/BookingCodeFilter/bookingCodeFilter.module.css +++ b/packages/booking-flow/lib/components/BookingCodeFilter/bookingCodeFilter.module.css @@ -24,7 +24,7 @@ cursor: pointer; } .radio[data-focus-visible]::before { - outline: 1px auto var(--Border-Interactive-Focus); + outline: 1px solid var(--Border-Interactive-Focus); } .radio { diff --git a/packages/design-system/lib/components/ChipButton/chip-button.module.css b/packages/design-system/lib/components/ChipButton/chip-button.module.css index 56c5ea66f..3a9b8e917 100644 --- a/packages/design-system/lib/components/ChipButton/chip-button.module.css +++ b/packages/design-system/lib/components/ChipButton/chip-button.module.css @@ -61,10 +61,3 @@ .medium { height: 32px; } - -.Default:focus, -.Outlined:focus, -.FilterRounded:focus { - outline-offset: 4px; - outline-color: var(--Border-Interactive-Focus); -} diff --git a/packages/design-system/lib/components/ContentCard/contentCard.module.css b/packages/design-system/lib/components/ContentCard/contentCard.module.css index 1e0f7e1d6..ffe51991b 100644 --- a/packages/design-system/lib/components/ContentCard/contentCard.module.css +++ b/packages/design-system/lib/components/ContentCard/contentCard.module.css @@ -47,6 +47,22 @@ } .link { + display: block; text-decoration: none; color: inherit; + position: relative; + + &:focus-visible { + outline: none; + + &::before { + content: ""; + position: absolute; + inset: 0px; + border: 2px solid var(--Border-Interactive-Focus); + border-radius: var(--Corner-Radius-md); + pointer-events: none; + z-index: 1; + } + } } diff --git a/packages/design-system/lib/normalize.css b/packages/design-system/lib/normalize.css index d8711edde..02e262723 100644 --- a/packages/design-system/lib/normalize.css +++ b/packages/design-system/lib/normalize.css @@ -21,7 +21,7 @@ ul { } *:focus-visible { - outline-color: var(--Border-Interactive-Focus); + outline: 2px solid var(--Border-Interactive-Focus); outline-offset: 2px; } diff --git a/packages/design-system/package.json b/packages/design-system/package.json index cce822a0e..04abe414e 100644 --- a/packages/design-system/package.json +++ b/packages/design-system/package.json @@ -228,8 +228,8 @@ "dependencies": { "@material-symbols/svg-400": "0.40.2", "@scandic-hotels/common": "workspace:*", - "sonner": "^2.0.3", - "class-variance-authority": "^0.7.1" + "class-variance-authority": "^0.7.1", + "sonner": "^2.0.3" }, "peerDependencies": { "@babel/core": "^7.27.4",