feat: add a11y properites

freenowtech · Aug 16, 2023 · 42556e2 · 42556e2
1 parent cc587d3
commit 42556e2
Showing 1 changed file with 8 additions and 6 deletions.
diff --git a/src/components/Breadcrumbs/Breadcrumbs.tsx b/src/components/Breadcrumbs/Breadcrumbs.tsx
@@ -46,11 +46,13 @@ const Breadcrumbs = ({ children, inverted }: BreadcrumbsProps): JSX.Element => {
  <BreadcrumbsList>
  {Children.map(arrayChildren, (child, index) => (
  <BreadcrumbsListItem>
- {cloneElement(child as ReactElement, {
- inverted
- })}
+ <nav aria-label="breadcrumbs">
+ {cloneElement(child as ReactElement, {
+ inverted
+ })}
+ </nav>
  {index < arrayChildren.length - 1 ? (
- <Box mx="0.25rem" height={16} mt="0.125rem">
+ <Box height={16} mt="0.125rem">
  <ChevronRightIcon size={16} color={Colors.AUTHENTIC_BLUE_350} />
  </Box>
  ) : // eslint-disable-next-line unicorn/no-null
@@ -68,8 +70,8 @@ const Link = styled.a.attrs({ theme })<LinkProps>`
  line-height: 1.4;
  font-family: ${get('fonts.normal')};
  font-size: ${get('fontSizes.1')};
- font-weight: ${get('fontWeights.semibold')};
  text-decoration: none;
+ padding: 0 0.25rem 0 0.25rem;
 
  &:hover,
  &:active {
@@ -81,7 +83,7 @@ const Link = styled.a.attrs({ theme })<LinkProps>`
 const Item = styled(Text).attrs(({ inverted }: ItemProps) => ({
  secondary: inverted,
  fontSize: 'small',
- fontWeight: 'semibold'
+ padding: '0 0.25rem 0 0.25rem'
 }))<ItemProps>``;
 
 Breadcrumbs.Item = Item;