Add the role=button to search

[DivyanshuLohani]

Add role=button to search on the home page #7575

What does this PR do?

This PR adds role=button to search on the main navigation bar on the homepage
Fixes #7575

How should this be tested?

• Login and go the dashboard
• Inspect the search button

Required

• Filled out the "How to test" section in this PR
• Self-reviewed my own code
• Commented on my code in hard-to-understand bits
• Checked for warnings, there are none
• Removed all console.logs
• Merged the latest changes from main onto my branch with git pull origin main
• My changes don't cause any responsiveness issues

[greptile-apps]

PR Summary

This pull request adds the role='button' attribute to the search item in the main navigation drawer, improving accessibility for screen readers and assistive technologies.

• Added role='button' prop to search item in packages/twenty-front/src/modules/navigation/components/MainNavigationDrawerItems.tsx
• Implemented 'role' prop in packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/NavigationDrawerItem.tsx
• Applied role attribute to StyledItem component in NavigationDrawerItem
• Change addresses issue Add role="button" to navbar search #7575, enhancing navbar search accessibility
• Modification is minimal and doesn't introduce apparent issues or side effects

_{2 file(s) reviewed, 1 comment(s)
Edit PR Review Bot Settings | Greptile}

[greptile-apps]

style: Ensure role is only applied when it's a non-empty string

[Devessier]

Thank you a lot for contributing to Twenty! I wrote a comment to discuss the proposed solution with you and my colleagues 😄

[Devessier]

Setting role=button is half a solution to make that component a button. Instead, we should render a <button> HTML tag when we want to display a button. The as property allows us to choose which component we want to render at the end. We should use it to display a button when we want.

Setting an HTML element's role attribute is a last resort. We should always try to use semantic HTML first, and here, using a button element makes sense.

To make it work with the current code, the NavigationDrawerItem component could take an optional as property which could be 'button' | undefined. We could use it to choose which component to render.

[DivyanshuLohani]

Ok I will work on that