feat: Adds aria label prop to button dropdown items (#2605)

cloudscape-design · Aug 22, 2024 · 244b3a1 · 244b3a1
1 parent 343bfdf
commit 244b3a1
Show file tree

Hide file tree

Showing 4 changed files with 13 additions and 1 deletion.
diff --git 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
@@ -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(<ButtonDropdown items={items}>Open dropdown</ButtonDropdown>);
   await expect(container).toValidateA11y();

diff --git 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
@@ -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<HTMLSpanElement & HTMLAnchorElement> = {
+    'aria-label': item.ariaLabel,
     className: clsx(styles['menu-item'], analyticsLabels['menu-item']),
     lang: item.lang,
     ref: menuItemRef,