diff --git a/src/__tests__/__snapshots__/documenter.test.ts.snap b/src/__tests__/__snapshots__/documenter.test.ts.snap index 449219fc16..c4e26cd512 100644 --- a/src/__tests__/__snapshots__/documenter.test.ts.snap +++ b/src/__tests__/__snapshots__/documenter.test.ts.snap @@ -3559,6 +3559,7 @@ The following properties are supported across all types: - \`disabled\` (boolean) - whether the item is disabled. Disabled items are not clickable, but they can be highlighted with the keyboard to make them accessible. - \`disabledReason\` (string) - (Optional) Displays text near the \`text\` property when item is disabled. Use to provide additional context. - \`description\` (string) - additional data that will be passed to a \`data-description\` attribute. +- \`ariaLabel\` (string) - (Optional) - ARIA label of the item element. ### action diff --git a/src/button-dropdown/__tests__/button-dropdown-accessibility.test.tsx b/src/button-dropdown/__tests__/button-dropdown-accessibility.test.tsx index 028f7d9424..a277b7067a 100644 --- a/src/button-dropdown/__tests__/button-dropdown-accessibility.test.tsx +++ b/src/button-dropdown/__tests__/button-dropdown-accessibility.test.tsx @@ -18,7 +18,7 @@ const renderWithTrigger = (props: ButtonDropdownProps, triggerName: string) => { }; const items: ButtonDropdownProps.Items = [ - { id: 'i1', text: 'item1', description: 'Item 1 description' }, + { id: 'i1', text: 'item1', description: 'Item 1 description', ariaLabel: 'item1 (aria)' }, { id: 'i2', text: 'item2', description: 'Item 2 description', checked: true, itemType: 'checkbox' }, { text: 'category1', @@ -164,6 +164,14 @@ it('can set ariaLabel', () => { expect(wrapper.findNativeButton().getElement()).toHaveAttribute('aria-label', 'Some dropdown'); }); +it('can set item ariaLabel', () => { + const wrapper = renderButtonDropdown({ items }); + wrapper.openDropdown(); + + expect(wrapper.findItems()[0].find('[role="menuitem"]')!.getElement().textContent).toBe('item1'); + expect(wrapper.findItems()[0].find('[role="menuitem"]')!.getElement()).toHaveAccessibleName('item1 (aria)'); +}); + it('a11y: default', async () => { const { container } = render(Open dropdown); await expect(container).toValidateA11y(); diff --git a/src/button-dropdown/interfaces.ts b/src/button-dropdown/interfaces.ts index ea00c24dd2..788f47bee0 100644 --- a/src/button-dropdown/interfaces.ts +++ b/src/button-dropdown/interfaces.ts @@ -24,6 +24,7 @@ export interface ButtonDropdownProps extends BaseComponentProps, ExpandToViewpor * - `disabled` (boolean) - whether the item is disabled. Disabled items are not clickable, but they can be highlighted with the keyboard to make them accessible. * - `disabledReason` (string) - (Optional) Displays text near the `text` property when item is disabled. Use to provide additional context. * - `description` (string) - additional data that will be passed to a `data-description` attribute. + * - `ariaLabel` (string) - (Optional) - ARIA label of the item element. * * ### action * @@ -144,6 +145,7 @@ export namespace ButtonDropdownProps { itemType?: ItemType; id: string; text: string; + ariaLabel?: string; lang?: string; disabled?: boolean; disabledReason?: string; diff --git a/src/button-dropdown/item-element/index.tsx b/src/button-dropdown/item-element/index.tsx index 75ca02d479..2c510dd83e 100644 --- a/src/button-dropdown/item-element/index.tsx +++ b/src/button-dropdown/item-element/index.tsx @@ -115,6 +115,7 @@ function MenuItem({ item, disabled, highlighted }: MenuItemProps) { const isDisabledWithReason = disabled && item.disabledReason; const { targetProps, descriptionEl } = useHiddenDescription(item.disabledReason); const menuItemProps: React.HTMLAttributes = { + 'aria-label': item.ariaLabel, className: clsx(styles['menu-item'], analyticsLabels['menu-item']), lang: item.lang, ref: menuItemRef,