@pikapikamart
Posted
Hey, awesome work on this one. The layout looks really good, it responds well and the mobile layout is really good. Cards are just bit bigger that's why 4 cards won't span in single row.
First, to be honest, I still find this challenge hard especially choosing semantic elements.
Some suggestions would be:
- For better accessibility, the color theme toggler should be using a
fieldsetas the parent container, and havinglegend:
<fieldset>
<legend> colormode selections </legend>
<label />
<radio />
<label />
<radio />
</fieldset>
The structure would look like that. When screen reader navigates in that, it would read the legend element, informing a user what this set of input does, hence it is for color mode selection.
input type="radio"will be the best element on this, since it is a choices right, radio buttons are intended for those. You can look at my rest-api-challenge, look up the structure of my color modes toggler. If you want a simpler one, like this challenge's color mode selection, you can reply to this feedback and i'll be gladly make a code snippet so that you can use it as your component.- Great adding
sr-onlytext for themainelement.
Aside from those, great work. I still can't make decision what element I would use on this hahaha my first version of this is not really accessible at all. Great work!
Marked as helpful
@A-amon
Posted
@pikamart Thank you so much! Oh, so <fieldset> can be used outside a form? 🤔 Interesting.. Having a <legend> to describe what the toggle is for is an amazing idea! If possible, can I have ur repo link for the REST API challenge? 😀 I wanna try to understand the code. And also the code snippet for this challenge so that I can try using it~😂
@pikapikamart
Posted
@A-amon Yes, fieldset can be used especially nesting radio buttons, and one great use case are the color mode selections.
This is the link for the rest-api-challenge
For the code snippet, let me just create a snippet and I will reply it here after I coded it.
Marked as helpful
@A-amon
Posted
@pikamart Thank you! I still have a lot to learn about HTML tags 😂
@pikapikamart
Posted
@A-amon Hey, sorry it took long hahaha, but here is the link of the sample snippet.
Marked as helpful
@A-amon
Posted
@pikamart Wow, u coded an entire example! 😂 Really appreciate it~ Took me a while to understand it thoroughly. .lightmode label is for the moving circle. And the label that stays as Dark Mode is intentional to let user knows which radio button/direction is for dark mode. 🤔
I gotta go wow again. I didn't know I can use arrow keys to navigate between radio buttons! 😲
Thank you again! I learnt a lot from this short snippet (I am saving it in a notepad for reference! 😀)
@pikapikamart
Posted
@A-amon Not entirely like that.
If you try inspecting the sample, hover to both label. The two have the same height and width. As you may have noticed in the css, I am changing the z-index property.
If darkmode is selected, the z-index goes to z-index: -1, this way, the label for lightmode will be on top of the darkmode. So for the next click you made, you are now clicking on the lightmode label.
Then if the lightmode is now selected, make the the darkmode label be on top of the lightmode label by going back to its default z-index. Then it just goes like that.
Then I am just using the darkmode radio button, checking if I need to move the lightmode circle or not.
Also yep, if there are sets of radio buttons that have the same name property, you can seleck any one of those via arrow keys.
Great that I could help with it hahaha awesome
