From 16efce3a43c2591d3a2c11948eec9a809571f202 Mon Sep 17 00:00:00 2001
From: Christian Andolf <christian.andolf@scandichotels.com>
Date: Thu, 22 May 2025 16:28:58 +0200
Subject: [PATCH] fix(SW-2170): add outline for chip for keyboard focus

add nonmodal prop to booking code rates dropdown to ensure booking widgets stays sticky when opened
---
 .../SelectHotel/BookingCodeFilter/index.tsx                 | 2 +-
 .../lib/components/ChipButton/chip-button.module.css        | 6 ++++++
 2 files changed, 7 insertions(+), 1 deletion(-)

diff --git a/apps/scandic-web/components/HotelReservation/SelectHotel/BookingCodeFilter/index.tsx b/apps/scandic-web/components/HotelReservation/SelectHotel/BookingCodeFilter/index.tsx
index d966b5d3d..564a3f896 100644
--- a/apps/scandic-web/components/HotelReservation/SelectHotel/BookingCodeFilter/index.tsx
+++ b/apps/scandic-web/components/HotelReservation/SelectHotel/BookingCodeFilter/index.tsx
@@ -68,7 +68,7 @@ export default function BookingCodeFilter() {
           />
         </ChipButton>
         {displayAsPopover ? (
-          <Popover placement="bottom end">
+          <Popover placement="bottom end" isNonModal>
             <Dialog className={styles.dialog}>
               {({ close }) => {
                 function handleChangeFilterValue(value: string) {
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 56fcfbe0c..b16163c3c 100644
--- a/packages/design-system/lib/components/ChipButton/chip-button.module.css
+++ b/packages/design-system/lib/components/ChipButton/chip-button.module.css
@@ -29,3 +29,9 @@
 .Outlined:active {
   border-color: var(--Border-Interactive-Selected);
 }
+
+.Default:focus,
+.Outlined:focus {
+  outline-offset: 4px;
+  outline-color: var(--Border-Interactive-Focus);
+}