Use 'role' = button for chip navigation (#8011)

Closes #7817
Added role attribute to the div element of the Chip component. This
assigns the role of "button" to the container, which is important for
accessibility. It indicates that this div should be treated as a button
by assistive technologies like screen readers.

---------

Co-authored-by: Félix Malfait <felix.malfait@gmail.com>
Co-authored-by: Félix Malfait <felix@twenty.com>

packages/twenty-ui/src/display/chip/components/AvatarChip.tsx

@@ -8,6 +8,9 @@ import { isDefined } from '@ui/utilities/isDefined';
 import { Nullable } from '@ui/utilities/types/Nullable';
 import { MouseEvent, useContext } from 'react';
 
+// Import Link from react-router-dom instead of UndecoratedLink
+import { Link } from 'react-router-dom';
+
 export type AvatarChipProps = {
   name: string;
   avatarUrl?: string;
@@ -20,6 +23,7 @@ export type AvatarChipProps = {
   className?: string;
   placeholderColorSeed?: string;
   onClick?: (event: MouseEvent) => void;
+  to?: string;
 };
 
 export enum AvatarChipVariant {
@@ -37,6 +41,12 @@ const StyledInvertedIconContainer = styled.div<{ backgroundColor: string }>`
   background-color: ${({ backgroundColor }) => backgroundColor};
 `;
 
+// Ideally we would use the UndecoratedLink component from @ui/navigation
+// but it led to a bug probably linked to circular dependencies, which was hard to solve
+const StyledLink = styled(Link)`
+  text-decoration: none;
+`;
+
 export const AvatarChip = ({
   name,
   avatarUrl,
@@ -48,15 +58,16 @@ export const AvatarChip = ({
   className,
   placeholderColorSeed,
   onClick,
+  to,
   size = ChipSize.Small,
 }: AvatarChipProps) => {
   const { theme } = useContext(ThemeContext);
 
-  return (
+  const chip = (
     <Chip
       label={name}
       variant={
-        isDefined(onClick)
+        isDefined(onClick) || isDefined(to)
           ? variant === AvatarChipVariant.Regular
             ? ChipVariant.Highlighted
             : ChipVariant.Regular
@@ -92,9 +103,17 @@ export const AvatarChip = ({
           />
         )
       }
-      clickable={isDefined(onClick)}
-      onClick={onClick}
+      clickable={isDefined(onClick) || isDefined(to)}
+      onClick={to ? undefined : onClick}
       className={className}
     />
   );
+
+  return to ? (
+    <StyledLink to={to} onClick={onClick}>
+      {chip}
+    </StyledLink>
+  ) : (
+    chip
+  );
 };