Skip to content

feat(ui-top-nav-bar): allow to set aria-label on TopNavBar's overflow menu button #2384

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
matyasf wants to merge 1 commit into
base: master
Choose a base branch
from
+67 −1
Open

feat(ui-top-nav-bar): allow to set aria-label on TopNavBar's overflow menu button #2384

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
24 changes: 24 additions & 0 deletions packages/ui-top-nav-bar/src/TopNavBar/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -633,6 +633,9 @@ class PlaygroundExample extends React.Component {
renderHiddenItemsMenuTriggerLabel={(
hiddenChildrenCount
) => `${hiddenChildrenCount} More`}
renderHiddenItemsMenuTriggerAriaLabel={(
hiddenChildrenCount
) => `${hiddenChildrenCount} more menu items`}
>
{navItems.map(item => (
<TopNavBar.Item
Expand Down Expand Up @@ -1223,6 +1226,9 @@ type: example
renderHiddenItemsMenuTriggerLabel={(
hiddenChildrenCount
) => `${hiddenChildrenCount} More`}
renderHiddenItemsMenuTriggerAriaLabel={(
hiddenChildrenCount
) => `${hiddenChildrenCount} more menu items`}
>
{Array.from(Array(4)).map((_item, idx) => (
<TopNavBar.Item
Expand Down Expand Up @@ -1271,6 +1277,9 @@ type: example
renderHiddenItemsMenuTriggerLabel={(
hiddenChildrenCount
) => `${hiddenChildrenCount} More`}
renderHiddenItemsMenuTriggerAriaLabel={(
hiddenChildrenCount
) => `${hiddenChildrenCount} more menu items`}
>
{Array.from(Array(14)).map((_item, idx) => (
<TopNavBar.Item
Expand Down Expand Up @@ -1694,6 +1703,9 @@ class LayoutExample extends React.Component {
renderHiddenItemsMenuTriggerLabel={(
hiddenChildrenCount
) => `${hiddenChildrenCount} More`}
renderHiddenItemsMenuTriggerAriaLabel={(
hiddenChildrenCount
) => `${hiddenChildrenCount} more menu items`}
>
<TopNavBar.Item
id="OverviewPage"
Expand Down Expand Up @@ -1981,6 +1993,9 @@ type: example
renderHiddenItemsMenuTriggerLabel={(
hiddenChildrenCount
) => `${hiddenChildrenCount} More`}
renderHiddenItemsMenuTriggerAriaLabel={(
hiddenChildrenCount
) => `${hiddenChildrenCount} more menu items`}
>
<TopNavBar.Item
id="itemSubmenuExample"
Expand Down Expand Up @@ -2018,6 +2033,9 @@ type: example
renderHiddenItemsMenuTriggerLabel={(
hiddenChildrenCount
) => `${hiddenChildrenCount} More`}
renderHiddenItemsMenuTriggerAriaLabel={(
hiddenChildrenCount
) => `${hiddenChildrenCount} more menu items`}
>
<TopNavBar.Item
id="itemTooltipExample"
Expand Down Expand Up @@ -2164,6 +2182,9 @@ class InPlaceDialogExample extends React.Component {
renderHiddenItemsMenuTriggerLabel={(
hiddenChildrenCount
) => `${hiddenChildrenCount} More`}
renderHiddenItemsMenuTriggerAriaLabel={(
hiddenChildrenCount
) => `${hiddenChildrenCount} more menu items`}
>
<TopNavBar.Item
id="Search2"
Expand Down Expand Up @@ -2248,6 +2269,9 @@ type: example
renderHiddenItemsMenuTriggerLabel={(
hiddenChildrenCount
) => `${hiddenChildrenCount} More`}
renderHiddenItemsMenuTriggerAriaLabel={(
hiddenChildrenCount
) => `${hiddenChildrenCount} more menu items`}
>
<TopNavBar.Item
id="OverviewPage"
Expand Down
23 changes: 23 additions & 0 deletions ...ges/ui-top-nav-bar/src/TopNavBar/TopNavBarMenuItems/__tests__/TopNavBarMenuItems.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -253,6 +253,29 @@ describe('<TopNavBarMenuItems />', () => {
})
})

describe('renderHiddenItemsMenuTriggerAriaLabel prop', () => {
it('should set the aria-label for the trigger item of the hidden list items menu', () => {
const { container } = render(
<div style={{ width: '400px' }}>
{getMenuItems({
menuItemsCount: 6,
menuItemsProps: {
renderHiddenItemsMenuTriggerLabel: (hiddenChildrenCount) =>
`${hiddenChildrenCount} More`,
renderHiddenItemsMenuTriggerAriaLabel: (hiddenChildrenCount) =>
`${hiddenChildrenCount} more menu items`
}
})}
</div>
)
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(
Expand Down
11 changes: 10 additions & 1 deletion packages/ui-top-nav-bar/src/TopNavBar/TopNavBarMenuItems/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 <span></span>
Expand All @@ -157,6 +161,11 @@ class TopNavBarMenuItems extends Component<

return (
<TopNavBarItem
aria-label={
renderHiddenItemsMenuTriggerAriaLabel
? renderHiddenItemsMenuTriggerAriaLabel(hiddenItems.length)
: undefined
}
id={this._hiddenMenuItemsMenuTriggerId}
status={hasActiveChild ? 'active' : 'default'}
renderSubmenu={
Expand Down
10 changes: 10 additions & 0 deletions packages/ui-top-nav-bar/src/TopNavBar/TopNavBarMenuItems/props.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -67,6 +67,15 @@ type TopNavBarMenuItemsOwnProps = {
hiddenChildrenCount: number
) => 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 `<ul>` container.
*/
Expand Down Expand Up @@ -101,6 +110,7 @@ const allowedProps: AllowedPropKeys = [
'children',
'currentPageId',
'renderHiddenItemsMenuTriggerLabel',
'renderHiddenItemsMenuTriggerAriaLabel',
'listLabel',
'elementRef'
]
Expand Down
Loading