fix(ui-shell): set aria-current when current class styling added (#19348)

* fix(ui-shell): set aria-current as true when current class styling added

* fix(ui-shell): add test for aria-current state

* fix(ui-shell): update storybook docs

---------

Co-authored-by: Nikhil Tomar <[email protected]>

Author: warrenmblood

packages/react/src/components/UIShell/HeaderMenuItem.tsx

@@ -60,18 +60,19 @@ const HeaderMenuItem = forwardRef(function HeaderMenuItem<
   if (isCurrentPage) {
     isActive = isCurrentPage;
   }
+  // We set the current class only if `isActive` is passed in and we do
+  // not have an `aria-current="page"` set for the breadcrumb item. When this
+  // class is added we also set `aria-current` as `true`
+  const hasCurrentClass = isActive && ariaCurrent !== 'page';
   const linkClassName = cx({
     [`${prefix}--header__menu-item`]: true,
-    // We set the current class only if `isActive` is passed in and we do
-    // not have an `aria-current="page"` set for the breadcrumb item
-    [`${prefix}--header__menu-item--current`]:
-      isActive && ariaCurrent !== 'page',
+    [`${prefix}--header__menu-item--current`]: hasCurrentClass,
   });
   return (
     <li className={className} role={role}>
       <Link
         {...(rest as LinkProps<E>)}
-        aria-current={ariaCurrent}
+        aria-current={hasCurrentClass ? true : ariaCurrent}
         className={linkClassName}
         ref={ref}
         tabIndex={tabIndex}>
@@ -101,7 +102,7 @@ HeaderMenuItem.propTypes = {
   className: PropTypes.string,
 
   /**
-   * Applies selected styles to the item if a user sets this to true and `aria-current !== 'page'`.
+   * If `true` and `aria-current !== 'page'`, applies selected styles to the item and sets `aria-current="true"`.
    */
   isActive: PropTypes.bool,
 

packages/react/src/components/UIShell/__tests__/HeaderMenuItem-test.js

@@ -10,7 +10,7 @@ import React from 'react';
 import { HeaderMenuItem } from '../';
 
 describe('HeaderMenuItem', () => {
-  it('should set the current class based on isActive', () => {
+  it('should set the current class and aria-current based on isActive', () => {
     render(
       <HeaderMenuItem data-testid="test" isActive>
         test
@@ -19,6 +19,7 @@ describe('HeaderMenuItem', () => {
     expect(screen.getByTestId('test')).toHaveClass(
       'cds--header__menu-item--current'
     );
+    expect(screen.getByTestId('test')).toHaveAttribute('aria-current', 'true');
   });
 
   it('should support a custom `className` prop on the outermost element', () => {