While this is a nice exercise and I have certainly done similar stuff it’s naïve to think you can get away without using JS for one simple reason: accessibility.
You cannot ensure any sort of accessible experience to screen reader users without using JS. There’s no way around it.
So yes, this is doable without JS but in the real world this won’t cut it.
Front-end Developer at Realtruck.com, Organizer of Orlando’s Project Code Experience Meetup, Co-Host of the Tech Jr Podcast, and all-around Junior Developer Advocate.
True, however aside from the input checkbox trick, the rest of the CSS is fine as far as accessibility.
You'd be better off using JS for the toggling, and with the popularity of JS frameworks, you're likely to not have a silly restraint like "no JS allowed".
But since I had to do this as coding challenge, I figured it was worth sharing.
Admittedly, I have only looked at the code and not tested this with a screenreader, but I think you're overestimating the accessibility of this markup and CSS. Without JS, there's no changing of ARIA attributes alerting a screenreader user to these interactive elements, the checkbox input isn't labeled, you're treating items that usually don't get focus (like span) as interactive elements, there are no :focus styles, etc.
I know accessibility wasn't the focus of this exercise, but it's not even mentioned in your caveats or things folks get when they add in JS. While I 💯 agree with your closing sentiment, I'm too cognizant that, for some, mastery of CSS is all about trickery and challenges and not functionality and usability.
For further actions, you may consider blocking this person and/or reporting abuse
We're a place where coders share, stay up-to-date and grow their careers.
While this is a nice exercise and I have certainly done similar stuff it’s naïve to think you can get away without using JS for one simple reason: accessibility.
You cannot ensure any sort of accessible experience to screen reader users without using JS. There’s no way around it.
So yes, this is doable without JS but in the real world this won’t cut it.
True, however aside from the input checkbox trick, the rest of the CSS is fine as far as accessibility.
You'd be better off using JS for the toggling, and with the popularity of JS frameworks, you're likely to not have a silly restraint like "no JS allowed".
But since I had to do this as coding challenge, I figured it was worth sharing.
Admittedly, I have only looked at the code and not tested this with a screenreader, but I think you're overestimating the accessibility of this markup and CSS. Without JS, there's no changing of ARIA attributes alerting a screenreader user to these interactive elements, the checkbox input isn't labeled, you're treating items that usually don't get focus (like
span) as interactive elements, there are no:focusstyles, etc.I know accessibility wasn't the focus of this exercise, but it's not even mentioned in your caveats or things folks get when they add in JS. While I 💯 agree with your closing sentiment, I'm too cognizant that, for some, mastery of CSS is all about trickery and challenges and not functionality and usability.