scandic/web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merged in fix/SW-2166-fix-filtercheckbox-focus-state (pull request #1765)

Browse Source 
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
This commit is contained in:
Chuma Mcphoy (We Ahead)
2025-04-09 09:52:56 +00:00
parent d8133fcfb8
commit 7e6abe1f03
2 changed files with 10 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
apps/scandic-web/components/HotelReservation/SelectHotel/HotelFilter/FilterCheckbox/filterCheckbox.module.css
View File

@@ -2,13 +2,18 @@
display: flex; display: flex;
flex-direction: column; flex-direction: column;
color: var(--text-color); color: var(--text-color);
cursor: pointer;
} }
.container[data-selected] .checkbox { .container[data-selected] .checkbox {
border: none; border: var(--UI-Input-Controls-Fill-Selected);
background: 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 { .checkboxContainer {
display: flex; display: flex;
align-items: center; align-items: center;

5
apps/scandic-web/components/HotelReservation/SelectHotel/HotelFilter/FilterCheckbox/index.tsx
View File

@@ -3,6 +3,7 @@
import { Checkbox as AriaCheckbox } from "react-aria-components" import { Checkbox as AriaCheckbox } from "react-aria-components"
import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon" import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
import { Typography } from "@scandic-hotels/design-system/Typography"
import styles from "./filterCheckbox.module.css" import styles from "./filterCheckbox.module.css"
@@ -28,7 +29,9 @@ export default function FilterCheckbox({
<MaterialIcon icon="check" color="Icon/Inverted" /> <MaterialIcon icon="check" color="Icon/Inverted" />
)} )}
</span> </span>
{name} <Typography variant="Body/Paragraph/mdRegular">
<span>{name}</span>
</Typography>
</span> </span>
</> </>
)} )}