Desserts!...now I'm hungry

Community feedback

• 

  P

  Teodor Jenkler•3,820

  @TedJenklerPosted 3 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

  Marked as helpful

  1

  ---

  

  Edwin Cheng•360

  @edwinc73Posted 3 months ago

  @TedJenkler, Thanks for your comment. In the future projects I will the 2nd approach. Currently I just removed the unnessesary divs within the button

  1
• 

  Svitlana Suslenkova•5,360

  @SvitlanaSuslenkovaPosted 3 months ago

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

  Marked as helpful

  0

  ---

  

  Edwin Cheng•360

  @edwinc73Posted 3 months ago

  @SvitlanaSuslenkova Thank you! I have fixed this now by just removing the divs and moving the styling to the buttons instead. I seems like i make this error a lot. I have also fixed the issue of nested buttons.

  0