diff --git a/packages/ui-top-nav-bar/src/TopNavBar/README.md b/packages/ui-top-nav-bar/src/TopNavBar/README.md index 5640525339..9b293a9481 100644 --- a/packages/ui-top-nav-bar/src/TopNavBar/README.md +++ b/packages/ui-top-nav-bar/src/TopNavBar/README.md @@ -633,6 +633,9 @@ class PlaygroundExample extends React.Component { renderHiddenItemsMenuTriggerLabel={( hiddenChildrenCount ) => `${hiddenChildrenCount} More`} + renderHiddenItemsMenuTriggerAriaLabel={( + hiddenChildrenCount + ) => `${hiddenChildrenCount} more menu items`} > {navItems.map(item => ( `${hiddenChildrenCount} More`} + renderHiddenItemsMenuTriggerAriaLabel={( + hiddenChildrenCount + ) => `${hiddenChildrenCount} more menu items`} > {Array.from(Array(4)).map((_item, idx) => ( `${hiddenChildrenCount} More`} + renderHiddenItemsMenuTriggerAriaLabel={( + hiddenChildrenCount + ) => `${hiddenChildrenCount} more menu items`} > {Array.from(Array(14)).map((_item, idx) => ( `${hiddenChildrenCount} More`} + renderHiddenItemsMenuTriggerAriaLabel={( + hiddenChildrenCount + ) => `${hiddenChildrenCount} more menu items`} > `${hiddenChildrenCount} More`} + renderHiddenItemsMenuTriggerAriaLabel={( + hiddenChildrenCount + ) => `${hiddenChildrenCount} more menu items`} > `${hiddenChildrenCount} More`} + renderHiddenItemsMenuTriggerAriaLabel={( + hiddenChildrenCount + ) => `${hiddenChildrenCount} more menu items`} > `${hiddenChildrenCount} More`} + renderHiddenItemsMenuTriggerAriaLabel={( + hiddenChildrenCount + ) => `${hiddenChildrenCount} more menu items`} > `${hiddenChildrenCount} More`} + renderHiddenItemsMenuTriggerAriaLabel={( + hiddenChildrenCount + ) => `${hiddenChildrenCount} more menu items`} > ', () => { }) }) + describe('renderHiddenItemsMenuTriggerAriaLabel prop', () => { + it('should set the aria-label for the trigger item of the hidden list items menu', () => { + const { container } = render( +
+ {getMenuItems({ + menuItemsCount: 6, + menuItemsProps: { + renderHiddenItemsMenuTriggerLabel: (hiddenChildrenCount) => + `${hiddenChildrenCount} More`, + renderHiddenItemsMenuTriggerAriaLabel: (hiddenChildrenCount) => + `${hiddenChildrenCount} more menu items` + } + })} +
+ ) + const triggerItem = container.querySelector( + '[id*="-hiddenMenuItemsMenuTrigger"]' + ) + + expect(triggerItem).toHaveAttribute('aria-label', '6 more menu items') + }) + }) + describe('currentPageId prop', () => { it('should set the item with id as active', async () => { const { container } = render( diff --git a/packages/ui-top-nav-bar/src/TopNavBar/TopNavBarMenuItems/index.tsx b/packages/ui-top-nav-bar/src/TopNavBar/TopNavBarMenuItems/index.tsx index dcedeecc9c..f8b0d849f4 100644 --- a/packages/ui-top-nav-bar/src/TopNavBar/TopNavBarMenuItems/index.tsx +++ b/packages/ui-top-nav-bar/src/TopNavBar/TopNavBarMenuItems/index.tsx @@ -138,7 +138,11 @@ class TopNavBarMenuItems extends Component< } renderHiddenItemsMenu(hiddenItems: ItemChild[]) { - const { renderHiddenItemsMenuTriggerLabel, currentPageId } = this.props + const { + currentPageId, + renderHiddenItemsMenuTriggerLabel, + renderHiddenItemsMenuTriggerAriaLabel + } = this.props if (!hiddenItems.length) { return @@ -157,6 +161,11 @@ class TopNavBarMenuItems extends Component< return ( React.ReactNode + /** + * The screenreader label (`aria-label`) used for the overflow dropdown button. + * By default, screenreaders will read the button text (e.g. "4 More"), but + * this is usually not descriptive enough for screenreader users. One should + * specify a more descriptive label for the button, such as "4 more menu items". + */ + renderHiddenItemsMenuTriggerAriaLabel?: ( + hiddenChildrenCount: number + ) => string /** * In __desktop__ mode, 'aria-label' for the `
    ` container. */ @@ -101,6 +110,7 @@ const allowedProps: AllowedPropKeys = [ 'children', 'currentPageId', 'renderHiddenItemsMenuTriggerLabel', + 'renderHiddenItemsMenuTriggerAriaLabel', 'listLabel', 'elementRef' ]