Hey @vanzasetia lovely job here! 🙌 Looks great and functions really nicely with the keyboard.
Did you consider using the details-summary tag here? If so I'd be keen to know why you opted not to use it. I just ask as it might have made your mark-up easier and require less aria attributes.
** Hang on I think I missed the link to your other solution without JS - did you just add this?
My only small suggestion would be to make the focus styles a bit easier to see, perhaps a bit thicker –using outline-offset with a small value can also help making it look nice. But this is really a small point!
Lovely job!! 👍
Cheers 👋
Dave
PS If you were concerned about the "FAQ" you could perhaps try aria-label, I'd need to check but I think this will stop readers accessing the content and read the content of the label, so you could try aria-label="frequently asked questions" - I'd need to test this to be sure though.
Marked as helpful
@vanzasetia
Posted
@dwhenson Thanks for your kind words! 😄
I was added the non JavaScript version after several hours I submitted the solution 😀. How did you notice it?
I already had outline-offset: 0.09em to give space between the text and the outline. I have made the outline a little bit thicker 😉.
About the aria-label, I'm not going to use it, since aria-label is not translatable. Instead, I added the sr-only that tells what FAQ stands for, which is Frequently Asked Questions. I think this is useful since not all people know what FAQ stands for, especially for those of them who are not native English. So, when they try to translate the page, it will translate the Frequently Asked Questions words to their native language 😉.
@vanzasetia oh, good point. I had not thought about aria label not being translatable. I didn't know that and will keep it in mind. Shame about that.
