DEV Community

Discussion on: Build Accessible React Toggle Buttons

Collapse
 
moopet profile image
Ben Sinclair • Edited

I like this. I didn't know about the audio feedback with aria-pressed before.

Can I add a couple of suggestions?

You can syntax-highlight your code blocks by adding the language (in this case probablu js or css to the triple-backticks you use to start the block. You can also add alt text descriptions to images in Markdown by writing it between the square brackets.

I notice you use font icons on the "previous" and "next" buttons. I'm not 100% sure how it works, but I imagine that in right-to-left reading languages, the concepts of "left" for "go back" are reversed. It might be a good idea to pass through another prop to allow for this.

A final thought: you use semantic HTML for the Button but you then wrap it in an unused div element, introducing non-semantic, er... "stuff"... to the component. It will allow you to add extra styling some time in the future, but I can't imagine anything concerning the button itself you couldn't style with just the button element - so if it's there for future styling then it's probably not ever going to be used, and ditching it would be fine.

Collapse
 
ryanallmad profile image
ryanAllMad

Thanks for your thoughts! I'll take those into consideration!

Collapse
 
ryanallmad profile image
ryanAllMad

Hey, thanks again for your suggestions, I made a couple of tweaks to my post based on your feedback!