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

Merged in feat/BOOK-119-accessibility-replace-radiogroup (pull request #3081)

Browse Source 
feat(BOOK-119): replace radio group on select rate with buttons and make them accessible

* feat(BOOK-119): replace radio group on select rate with buttons and make them accessible

* feat(BOOK-119): update roomNR

* feat(BOOK-119): update onpress and buttonOverlay name change


Approved-by: Erik Tiekstra
This commit is contained in:
Bianca Widstam
2025-11-06 11:46:59 +00:00
parent 0a5d3ef7c3
commit 873174dcc3
11 changed files with 483 additions and 436 deletions
Download Patch File Download Diff File Expand all files Collapse all files

46
packages/design-system/lib/components/RateCard/rate-card.module.css
View File

@@ -1,15 +1,3 @@
.radio {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
.checkIcon {
--size: 32px;
width: var(--size);
@@ -33,23 +21,30 @@
background-color: var(--Scandic-Grey-00);
border: 1px solid transparent;
border-radius: var(--Corner-radius-md);
padding: 0;
}
.rateCard:hover {
.buttonOverlay {
position: absolute;
inset: 0;
background: transparent;
border: none;
padding: 0;
margin: 0;
border-radius: var(--Corner-radius-md);
z-index: 1;
cursor: pointer;
&:focus-visible {
outline: 2px solid var(--Border-Interactive-Focus);
}
}
.rateCard:hover {
background-color: var(--Scandic-Grey-10);
}
.radio:checked ~ .rateCard {
border: 1px solid var(--Scandic-Peach-80, 'black');
}
.radio:focus-visible ~ .rateCard {
outline: 2px solid var(--Border-Interactive-Focus);
}
label:not(:has(.radio:checked)) .checkIcon {
display: none;
.rateCard.selected {
border-color: var(--Border-Interactive-Active);
}
.banner {
@@ -67,8 +62,13 @@ label:not(:has(.radio:checked)) .checkIcon {
flex-direction: column;
gap: var(--Space-x1);
padding: var(--Space-x1) var(--Space-x15) var(--Space-x15);
position: relative;
}
.triggerButton {
cursor: pointer;
z-index: 2;
}
.container > * {
padding-bottom: var(--Space-x1);
border-bottom: 2px solid var(--Neutral-Opacity-Black-5);