@TedJenkler
Posted
Hi @edwinc73,
Nice project! I have some feedback regarding how you can approach button creation:
Okay, so there are two ways to approach this. The first is the hard but fun way: you create a button and then place content inside it using absolute positioning. It’s really enjoyable, but it can be a bit frustrating at times and arguably just a waste of time haha(You will learn a lot trying to solve this but don't use this as a real solution).
The second, and more practical, approach is to create a custom button using <div> elements. To ensure accessibility, you should:
Add role="button" to indicate it's an interactive element.
Use tabindex="0" to make it focusable via keyboard navigation.
Add aria-pressed="false" (or aria-pressed="true", depending on the state) to communicate its state to screen readers. Here's a quick example:
<div role="button" tabindex="0" aria-pressed="false" onclick="handleClick()" onkeydown="if(event.key === 'Enter') handleClick()" style={} Custom Button </div> This approach ensures that your custom button is both functional and accessible. It’s easier to manage and maintain, especially in complex projects. (It is the correct way.)Keep up the great work!
Best, Teodor
Marked as helpful
@edwinc73
Posted
@TedJenkler, Thanks for your comment. In the future projects I will the 2nd approach. Currently I just removed the unnessesary divs within the button
