I am trying to pass the aria attribute aria-current to the Material UI component <ListItem>.
<ListItem
aria-current={href === location.pathname ? 'page' : ''}
aria-label={href === location.pathname ? 'page' : ''}
component={RouterLink}
data-testid={dataTestId}
key={href}
role='menuitem'
selected={href === location.pathname}
sx={listItemStyle}
to={href}
>
The aria-label attribute works fine, but aria-current does not. I get the following error when trying to do so:
Compiled with problems:
ERROR in src/components/NavBar/NavBar.tsx:58:13
TS2769: No overload matches this call.
The last overload gave the following error.
Type '{ children: Element; "aria-current": "" | "page"; "aria-label": string; component: ForwardRefExoticComponent<LinkProps & RefAttributes<HTMLAnchorElement>>; ... 5 more ...; to: string; }' is not assignable to type 'IntrinsicAttributes & { button?: false | undefined; } & ListItemBaseProps & { components?: { Root?: ElementType<any> | undefined; } | undefined; componentsProps?: { ...; } | undefined; } & CommonProps & Omit<...>'.
Property 'component' does not exist on type 'IntrinsicAttributes & { button?: false | undefined; } & ListItemBaseProps & { components?: { Root?: ElementType<any> | undefined; } | undefined; componentsProps?: { ...; } | undefined; } & CommonProps & Omit<...>'. Did you mean 'components'?
56 | aria-current={href === location.pathname ? 'page' : ''}
57 | aria-label={href === location.pathname ? 'page' : ''} // TODO: Figure out aria-current fix
> 58 | component={RouterLink}
| ^^^^^^^^^
59 | data-testid={dataTestId}
60 | key={href}
61 | role='menuitem'
When removing the aria-current line, the code runs with no errors, but when adding it, it complains about the component attribute that runs fine without it. I thought it would be safe to pass any ARIA attributes, but it appears otherwise.