Add the role=button to search #7594
Conversation
![greptile-apps[bot]](https://avatars.githubusercontent.com/in/867647?s=60&v=4){kind=small}
There was a problem hiding this comment.
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
| @@ -185,6 +187,7 @@ export const NavigationDrawerItem = ({ | |||
| as={to ? Link : 'div'} | |||
| to={to ? to : undefined} | |||
| indentationLevel={indentationLevel} | |||
| role={role} | |||
There was a problem hiding this comment.
style: Ensure role is only applied when it's a non-empty string
| @@ -185,6 +187,7 @@ export const NavigationDrawerItem = ({ | |||
| as={to ? Link : 'div'} | |||
There was a problem hiding this comment.
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.
|
Ok I will work on that |
This reverts commit efd7d9e.
Devessier
force-pushed
the
add-role-button-7575
branch
from
4e06ddb
to
9fa5f78
Compare
|
Awarding DivyanshuLohani: 150 points 🕹️ Well done! Check out your new contribution on oss.gg/DivyanshuLohani |
In this PR:
<NavigationDrawerItem />component render a<button>by default instead of a<div><div>by<span>inside the<NavigationDrawerItem />as<button>and<a>HTML elements only accept phrasing content.Fixes #7575