A simple log to track notes, decisions and questions for Front-End Challenges Club challenges.
Challenge Info 🔗
Figma Prototype 🔗
Figma Project 🔗
Challenge Submission 🔗
Challenge Repository 🔗
Challenge Solution 🔗 (for paying subscribers only)
After spending several hours researching JS approaches I decided to use Tabby by Chris Ferdinandi. Admittedly this feels like cheating, but my JS skills are pretty novice and all the examples I found were too complex for me to understand enough to try to write them on my own. So instead of just copy and pasting someone else's code (which was tempting!) I decided to use a library. I'll await the solution since it will include an explanation geared towards learning rather than implementation (and no knock on all the great stuff I found, one just needs a better a grasp of JS than I currently have).
I originally included role="tab", aria-selected="true or false", role="tabpanel" and aria-expanded="true or false" but removed them since Tabby dynamically applies them (well, all but aria-expanded, that's handled using the hidden attribute).
For keyboard users the selected state also doubles as focus state because Tabby navigates the user to the next tab when using the arrow keys. Depending on how you look at it, it's either nice that a click is saved (arrow to tab and the content is displayed or read aloud) or it's an unwanted surprise because the user would expect to also have to select the tab to view the content (arrow to tab, enter to display or read content aloud). Something one would want to test in a real world scenario!
I added a responsive state and used Heydon Pickering's Inclusive Components article and Codepen on Tabbed Interfaces as inspiration for the responsive aesthetic (borders and an arrow to indicate focus, which is a nice touch).