admin/twenty
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

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

Browse Source 
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>
This commit is contained in:
Balaji Krishnamurthy
2024-10-24 17:50:45 +05:30
committed by GitHub
parent 445ab83c14
commit 4e59f00e3f
8 changed files with 49 additions and 37 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
packages/twenty-front/src/modules/object-record/components/RecordChip.tsx
View File

@ -1,4 +1,4 @@
import { AvatarChip, AvatarChipVariant, UndecoratedLink } from 'twenty-ui';
import { AvatarChip, AvatarChipVariant } from 'twenty-ui';
import { getLinkToShowPage } from '@/object-metadata/utils/getLinkToShowPage';
import { useRecordChipData } from '@/object-record/hooks/useRecordChipData';
@ -23,24 +23,20 @@ export const RecordChip = ({
record,
});
const handleClick = (e: MouseEvent<HTMLAnchorElement>) => {
const handleClick = (e: MouseEvent<Element>) => {
e.stopPropagation();
};
return (
<UndecoratedLink
<AvatarChip
placeholderColorSeed={record.id}
name={recordChipData.name}
avatarType={recordChipData.avatarType}
avatarUrl={recordChipData.avatarUrl ?? ''}
className={className}
variant={variant}
onClick={handleClick}
to={getLinkToShowPage(objectNameSingular, record)}
>
<AvatarChip
placeholderColorSeed={record.id}
name={recordChipData.name}
avatarType={recordChipData.avatarType}
avatarUrl={recordChipData.avatarUrl ?? ''}
className={className}
variant={variant}
onClick={() => {}}
/>
</UndecoratedLink>
/>
);
};