From 1a0b387282aaebfb5bf3bdee1ae6c8e315a0f684 Mon Sep 17 00:00:00 2001
From: DivyanshuLohani <59534359+DivyanshuLohani@users.noreply.github.com>
Date: Mon, 21 Oct 2024 21:51:08 +0530
Subject: [PATCH] Add the role=button to search (#7594)

In this PR:

- Let the `<NavigationDrawerItem />` component render a `<button>` by
default instead of a `<div>`
- Replace `<div>` by `<span>` inside the `<NavigationDrawerItem />` as
`<button>` and `<a>` HTML elements only accept [_phrasing
content_](https://developer.mozilla.org/en-US/docs/Web/HTML/Content_categories#phrasing_content).
- Fix layout issue: the keyboard icon wasn't put on the right of the
button, I put it back

Fixes #7575

---------

Co-authored-by: Devessier <baptiste@devessier.fr>
---
 ...avigationDrawerAnimatedCollapseWrapper.tsx |  4 ++-
 .../components/NavigationDrawerItem.tsx       | 28 ++++++++++++-------
 2 files changed, 21 insertions(+), 11 deletions(-)

diff --git a/packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/NavigationDrawerAnimatedCollapseWrapper.tsx b/packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/NavigationDrawerAnimatedCollapseWrapper.tsx
index 3a4d42541..732da1418 100644
--- a/packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/NavigationDrawerAnimatedCollapseWrapper.tsx
+++ b/packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/NavigationDrawerAnimatedCollapseWrapper.tsx
@@ -5,7 +5,9 @@ import styled from '@emotion/styled';
 import { AnimationControls, motion, TargetAndTransition } from 'framer-motion';
 import { useRecoilValue } from 'recoil';
 
-const StyledAnimatedContainer = styled(motion.div)``;
+const StyledAnimatedContainer = styled(motion.span)`
+  display: block;
+`;
 
 export const NavigationDrawerAnimatedCollapseWrapper = ({
   children,
diff --git a/packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/NavigationDrawerItem.tsx b/packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/NavigationDrawerItem.tsx
index 65944df37..8421df168 100644
--- a/packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/NavigationDrawerItem.tsx
+++ b/packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/NavigationDrawerItem.tsx
@@ -1,8 +1,10 @@
+import { useIsSettingsPage } from '@/navigation/hooks/useIsSettingsPage';
+import { NavigationDrawerAnimatedCollapseWrapper } from '@/ui/navigation/navigation-drawer/components/NavigationDrawerAnimatedCollapseWrapper';
 import { NavigationDrawerItemBreadcrumb } from '@/ui/navigation/navigation-drawer/components/NavigationDrawerItemBreadcrumb';
+import { NAV_DRAWER_WIDTHS } from '@/ui/navigation/navigation-drawer/constants/NavDrawerWidths';
 import { NavigationDrawerSubItemState } from '@/ui/navigation/navigation-drawer/types/NavigationDrawerSubItemState';
 import { isNavigationDrawerExpandedState } from '@/ui/navigation/states/isNavigationDrawerExpanded';
 import { useIsMobile } from '@/ui/utilities/responsive/hooks/useIsMobile';
-import { NavigationDrawerAnimatedCollapseWrapper } from '@/ui/navigation/navigation-drawer/components/NavigationDrawerAnimatedCollapseWrapper';
 import isPropValid from '@emotion/is-prop-valid';
 import { useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
@@ -16,8 +18,6 @@ import {
   TablerIconsProps,
 } from 'twenty-ui';
 import { isDefined } from '~/utils/isDefined';
-import { useIsSettingsPage } from '@/navigation/hooks/useIsSettingsPage';
-import { NAV_DRAWER_WIDTHS } from '@/ui/navigation/navigation-drawer/constants/NavDrawerWidths';
 
 const DEFAULT_INDENTATION_LEVEL = 1;
 
@@ -43,10 +43,11 @@ type StyledItemProps = Pick<
   'active' | 'danger' | 'indentationLevel' | 'soon' | 'to'
 > & { isNavigationDrawerExpanded: boolean };
 
-const StyledItem = styled('div', {
+const StyledItem = styled('button', {
   shouldForwardProp: (prop) =>
     !['active', 'danger', 'soon'].includes(prop) && isPropValid(prop),
 })<StyledItemProps>`
+  box-sizing: content-box;
   align-items: center;
   background: ${(props) =>
     props.active ? props.theme.background.transparent.light : 'inherit'};
@@ -103,19 +104,20 @@ const StyledItem = styled('div', {
   }
 `;
 
-const StyledItemElementsContainer = styled.div`
+const StyledItemElementsContainer = styled.span`
   align-items: center;
   display: flex;
   gap: ${({ theme }) => theme.spacing(2)};
+  width: 100%;
 `;
 
-const StyledItemLabel = styled.div`
+const StyledItemLabel = styled.span`
   font-weight: ${({ theme }) => theme.font.weight.medium};
   text-overflow: ellipsis;
   white-space: nowrap;
 `;
 
-const StyledItemCount = styled.div`
+const StyledItemCount = styled.span`
   align-items: center;
   background-color: ${({ theme }) => theme.color.blue};
   border-radius: ${({ theme }) => theme.border.radius.rounded};
@@ -129,7 +131,7 @@ const StyledItemCount = styled.div`
   width: 16px;
 `;
 
-const StyledKeyBoardShortcut = styled.div`
+const StyledKeyBoardShortcut = styled.span`
   align-items: center;
   border-radius: 4px;
   color: ${({ theme }) => theme.font.color.light};
@@ -140,11 +142,15 @@ const StyledKeyBoardShortcut = styled.div`
   visibility: hidden;
 `;
 
-const StyledNavigationDrawerItemContainer = styled.div`
+const StyledNavigationDrawerItemContainer = styled.span`
   display: flex;
   width: 100%;
 `;
 
+const StyledSpacer = styled.span`
+  flex-grow: 1;
+`;
+
 export const NavigationDrawerItem = ({
   className,
   label,
@@ -191,7 +197,7 @@ export const NavigationDrawerItem = ({
         aria-selected={active}
         danger={danger}
         soon={soon}
-        as={to ? Link : 'div'}
+        as={to ? Link : undefined}
         to={to ? to : undefined}
         indentationLevel={indentationLevel}
         isNavigationDrawerExpanded={isNavigationDrawerExpanded}
@@ -219,6 +225,8 @@ export const NavigationDrawerItem = ({
             <StyledItemLabel>{label}</StyledItemLabel>
           </NavigationDrawerAnimatedCollapseWrapper>
 
+          <StyledSpacer />
+
           {soon && (
             <NavigationDrawerAnimatedCollapseWrapper>
               <Pill label="Soon" />