Desserts!...now I'm hungry

Community feedback

• 

  Teodor Jenkler•4,040

  @TedJenkler

  Posted 9 months ago

  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

  11

  Marked as helpful
• 

  Svitlana Suslenkova•5,340

  @SvitlanaSuslenkova

  Posted 9 months ago

  You can just add grid to the button and not create div inside it.

  01

  Marked as helpful