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

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;

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>
         </>
       )}