From 7e6abe1f030c123efbe500963550d0cc9c3e2928 Mon Sep 17 00:00:00 2001
From: "Chuma Mcphoy (We Ahead)" <chuma.mcphoy@scandichotels.com>
Date: Wed, 9 Apr 2025 09:52:56 +0000
Subject: [PATCH] Merged in fix/SW-2166-fix-filtercheckbox-focus-state (pull
 request #1765)

fix(SW-2166): enhance FilterCheckbox accessibility

* fix(SW-2166): enhance FilterCheckbox accessibility

- Added cursor pointer to the checkbox container.
- Introduced focus outline for when the checkbox is focused.
- Wrapped checkbox name in Typography component.


Approved-by: Christian Andolf
---
 .../HotelFilter/FilterCheckbox/filterCheckbox.module.css   | 7 ++++++-
 .../SelectHotel/HotelFilter/FilterCheckbox/index.tsx       | 5 ++++-
 2 files changed, 10 insertions(+), 2 deletions(-)

diff --git a/apps/scandic-web/components/HotelReservation/SelectHotel/HotelFilter/FilterCheckbox/filterCheckbox.module.css b/apps/scandic-web/components/HotelReservation/SelectHotel/HotelFilter/FilterCheckbox/filterCheckbox.module.css
index 0105c4cfb..3d1fb7ec7 100644
--- a/apps/scandic-web/components/HotelReservation/SelectHotel/HotelFilter/FilterCheckbox/filterCheckbox.module.css
+++ b/apps/scandic-web/components/HotelReservation/SelectHotel/HotelFilter/FilterCheckbox/filterCheckbox.module.css
@@ -2,13 +2,18 @@
   display: flex;
   flex-direction: column;
   color: var(--text-color);
+  cursor: pointer;
 }
 
 .container[data-selected] .checkbox {
-  border: none;
+  border: var(--UI-Input-Controls-Fill-Selected);
   background: var(--UI-Input-Controls-Fill-Selected);
 }
 
+.container:focus-within .checkbox {
+  outline: 2px solid var(--UI-Input-Controls-Fill-Selected);
+}
+
 .checkboxContainer {
   display: flex;
   align-items: center;
diff --git a/apps/scandic-web/components/HotelReservation/SelectHotel/HotelFilter/FilterCheckbox/index.tsx b/apps/scandic-web/components/HotelReservation/SelectHotel/HotelFilter/FilterCheckbox/index.tsx
index e46f69c5b..b8cfb0572 100644
--- a/apps/scandic-web/components/HotelReservation/SelectHotel/HotelFilter/FilterCheckbox/index.tsx
+++ b/apps/scandic-web/components/HotelReservation/SelectHotel/HotelFilter/FilterCheckbox/index.tsx
@@ -3,6 +3,7 @@
 import { Checkbox as AriaCheckbox } from "react-aria-components"
 
 import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
+import { Typography } from "@scandic-hotels/design-system/Typography"
 
 import styles from "./filterCheckbox.module.css"
 
@@ -28,7 +29,9 @@ export default function FilterCheckbox({
                 <MaterialIcon icon="check" color="Icon/Inverted" />
               )}
             </span>
-            {name}
+            <Typography variant="Body/Paragraph/mdRegular">
+              <span>{name}</span>
+            </Typography>
           </span>
         </>
       )}