Hi @dannxvc, you did a good job on this challenge. your card have some problems both in code and accessibility.
1.Accessibility:
at first I just try to test accessibility with just tab key and I didn't know for radio groups we should use tab + arrow keys. one hidden and weird bug is when some one want select rating number 1 at first with just keyboard it's hard I mean first tab key just can select our radio groups then we should iterate with arrow keys and if some one hit tab key at first for rating number 1
and then hit enter in thank you card there is no rating selected
2.CSS:
you have some duplicates code in rating buttons implementing. like adding pseudo elements to label for just creating hover effects and for button itself. you can do all of them in label itself. one another duplicates is two different rules for .options label and both of them have position: relative. I changed some duplicated codes and here is the result :
.options input[type="radio"] {
opacity: 0;
position: absolute;
}
.options input[type="radio"]:checked + label {
background-color: var(--primary);
}
.options input[type="radio"]:checked + label span,
.options input[type="radio"]:focus + label span{
color: var(--white);
}
.options input[type="radio"]:focus + label{
outline: rgb(59, 153, 252) auto 5px;
}
.options label:nth-of-type(1){
margin-left: 0;
}
.options label:hover{
transition: .3s ease-in-out;
background-color: var(--gray);
color: var(--white);
}
.options label{
position: relative;
display: inline-block;
height: 3rem;
width: 3rem;
background: var(--blue-light);
border-radius: 50%;
padding: 0.5rem;
cursor: pointer;
justify-content: center;
margin-left: 1rem;
}
span{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 1;
color: inherit;
font-size: 0.8rem;
}
I still haven't found a solution for accessibility problem. but at all you did good job on having good accessibility with those radio buttons also I learned about how we should interact with radio buttons with keyboard. hope I could help you. good luck. ☻
