@CyrusKabir
Posted
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. ☻
Marked as helpful
@dannxvc
Posted
@CyrusKabir Hi! I hadn't noticed that, thank you so much, I will check that out and read about it, I will let you know. If you find something related to this do not hesitate leaving a comment. Thank you about the css code as well, it looks cleaner, thank you so much!! I will definitely update it.
@CyrusKabir
Posted
@dannxvc your welcome, I am glad that was helpful.