diff --git a/packages/react-aria-components/src/Breadcrumbs.tsx b/packages/react-aria-components/src/Breadcrumbs.tsx index cb5b3677d8a..750f1cb31bb 100644 --- a/packages/react-aria-components/src/Breadcrumbs.tsx +++ b/packages/react-aria-components/src/Breadcrumbs.tsx @@ -142,7 +142,7 @@ export const Breadcrumb = /*#__PURE__*/ createLeafComponent( let isCurrent = node.nextKey == null; let {isDisabled, onAction} = useSlottedContext(BreadcrumbsContext)!; let linkProps = { - 'aria-current': isCurrent ? 'page' : null, + 'aria-current': isCurrent ? ('page' as const) : undefined, isDisabled: isDisabled || isCurrent, onPress: () => onAction?.(node.key) }; diff --git a/packages/react-aria-components/src/NavigationTree.tsx b/packages/react-aria-components/src/NavigationTree.tsx index e499a6b0b41..443852272f9 100644 --- a/packages/react-aria-components/src/NavigationTree.tsx +++ b/packages/react-aria-components/src/NavigationTree.tsx @@ -445,7 +445,7 @@ function NavigationTreeItemContentInner(props: NavigationTreeItemContentInnerPro // Provide onFocusChange so the link reports its focus up to NavigationTreeItem. let linkContextValue = { ...linkProps, - 'aria-current': isCurrent ? 'page' : undefined, + 'aria-current': isCurrent ? ('page' as const) : undefined, onFocusChange: setLinkFocused, onPress: linkProps.href == null && hasChildItems ? () => state.toggleKey(id) : undefined }; diff --git a/packages/react-aria-components/test/Link.test.js b/packages/react-aria-components/test/Link.test.js index aca49b9be42..cb012c9c4c8 100644 --- a/packages/react-aria-components/test/Link.test.js +++ b/packages/react-aria-components/test/Link.test.js @@ -48,6 +48,12 @@ describe('Link', () => { expect(link).toHaveAttribute('id', 'my-link-id'); }); + it('should support accessibility props', () => { + let {getByRole} = render(Test); + let link = getByRole('link'); + expect(link).toHaveAttribute('aria-current', 'page'); + }); + it('should support render props', async () => { let {getByRole} = render({({isHovered}) => (isHovered ? 'Hovered' : 'Test')}); let link = getByRole('link'); diff --git a/packages/react-aria/src/link/useLink.ts b/packages/react-aria/src/link/useLink.ts index fc2ad403476..2c79d49eb36 100644 --- a/packages/react-aria/src/link/useLink.ts +++ b/packages/react-aria/src/link/useLink.ts @@ -28,7 +28,13 @@ import {usePress} from '../interactions/usePress'; export interface LinkProps extends PressEvents, FocusableProps {} -export interface AriaLinkProps extends LinkProps, LinkDOMProps, AriaLabelingProps {} +export interface AriaLinkProps extends LinkProps, LinkDOMProps, AriaLabelingProps { + /** + * Indicates whether this element represents the current item within a container or set of related + * elements. + */ + 'aria-current'?: boolean | 'true' | 'false' | 'page' | 'step' | 'location' | 'date' | 'time'; +} export interface AriaLinkOptions extends AriaLinkProps { /** Whether the link is disabled. */