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,