From f6b769c758b20de55e45d8791ce627845e253852 Mon Sep 17 00:00:00 2001 From: Kai Hao Date: Mon, 29 Nov 2021 18:08:49 +0800 Subject: [PATCH] Add aria-current="page" to active navigation item --- packages/components/src/navigation/item/index.js | 12 ++++++++++-- 1 file changed, 10 insertions(+), 2 deletions(-) diff --git a/packages/components/src/navigation/item/index.js b/packages/components/src/navigation/item/index.js index a2ac076ea2ee10..69a8cc41aae001 100644 --- a/packages/components/src/navigation/item/index.js +++ b/packages/components/src/navigation/item/index.js @@ -52,8 +52,10 @@ export default function NavigationItem( props ) { return null; } + const isActive = item && activeItem === item; + const classes = classnames( className, { - 'is-active': item && activeItem === item, + 'is-active': isActive, } ); const onItemClick = ( event ) => { @@ -67,7 +69,13 @@ export default function NavigationItem( props ) { const baseProps = children ? props : { ...props, onClick: undefined }; const itemProps = isText ? restProps - : { as: Button, href, onClick: onItemClick, ...restProps }; + : { + as: Button, + href, + onClick: onItemClick, + 'aria-current': isActive ? 'page' : undefined, + ...restProps, + }; return (