fix(core/dropdown|dropdown-button): reflect disabled attribute in DOM when disabled property changes and support aria-disabled

packages/core/src/components/dropdown-button/dropdown-button.ct.ts

@@ -57,3 +57,51 @@ regressionTest('submenu', async ({ mount, page }) => {
 
   await expect(subItem).toBeVisible();
 });
+
+regressionTest(
+  'should reflect aria-disabled on disabled dropdown button',
+  async ({ page, mount }) => {
+    await mount(`
+    <ix-dropdown-button id="disabled-button" label="Disabled" disabled>
+      <ix-dropdown-item label="Item 1"></ix-dropdown-item>
+    </ix-dropdown-button>
+    <ix-dropdown-button id="enabled-button" label="Enabled">
+      <ix-dropdown-item label="Item 1"></ix-dropdown-item>
+    </ix-dropdown-button>
+  `);
+
+    const disabledButton = page.locator('#disabled-button');
+    const enabledButton = page.locator('#enabled-button');
+
+    await expect(disabledButton).toHaveAttribute('aria-disabled', 'true');
+    await expect(enabledButton).toHaveAttribute('aria-disabled', 'false');
+  }
+);
+
+regressionTest(
+  'should reflect disabled attribute in DOM when changed dynamically',
+  async ({ page, mount }) => {
+    await mount(`
+      <ix-dropdown-button id="static-disabled" label="Always Disabled" disabled="true">
+        <ix-dropdown-item label="Item 1"></ix-dropdown-item>
+      </ix-dropdown-button>
+      <ix-dropdown-button id="dynamic-disabled" label="Dynamic Disabled">
+        <ix-dropdown-item label="Item 1"></ix-dropdown-item>
+      </ix-dropdown-button>
+    `);
+
+    const dynamicButton = page.locator('#dynamic-disabled');
+
+    await expect(dynamicButton).not.toHaveAttribute('disabled');
+
+    await dynamicButton.evaluate((element: any) => {
+      element.disabled = true;
+    });
+    await expect(dynamicButton).toHaveAttribute('disabled');
+
+    await dynamicButton.evaluate((element: any) => {
+      element.disabled = false;
+    });
+    await expect(dynamicButton).not.toHaveAttribute('disabled');
+  }
+);

packages/core/src/components/dropdown-button/dropdown-button.tsx

@@ -15,6 +15,7 @@ import {
 } from '@siemens/ix-icons/icons';
 import { makeRef } from '../utils/make-ref';
 import type { DropdownButtonVariant } from './dropdown-button.types';
+import { a11yBoolean } from '../utils/a11y';
 
 @Component({
   tag: 'ix-dropdown-button',
@@ -32,7 +33,7 @@ export class DropdownButton {
   /**
    * Disable button
    */
-  @Prop() disabled = false;
+  @Prop({ reflect: true }) disabled = false;
 
   /**
    * Set label
@@ -86,6 +87,7 @@ export class DropdownButton {
   render() {
     return (
       <Host
+        aria-disabled={a11yBoolean(this.disabled)}
         class={{
           disabled: this.disabled,
         }}

packages/core/src/components/dropdown-item/dropdown-item.tsx

@@ -22,6 +22,7 @@ import {
   iconChevronRightSmall,
   iconSingleCheck,
 } from '@siemens/ix-icons/icons';
+import { a11yBoolean } from '../utils/a11y';
 
 @Component({
   tag: 'ix-dropdown-item',
@@ -62,7 +63,7 @@ export class DropdownItem implements DropdownItemWrapper {
   /**
    * Disable item and remove event listeners
    */
-  @Prop() disabled = false;
+  @Prop({ reflect: true }) disabled = false;
 
   /**
    * Whether the item is checked or not. If true a checkmark will mark the item as checked.
@@ -101,6 +102,7 @@ export class DropdownItem implements DropdownItemWrapper {
   render() {
     return (
       <Host
+        aria-disabled={a11yBoolean(this.disabled)}
         class={{
           hover: this.hover,
           'icon-only': this.isIconOnly(),

packages/core/src/components/dropdown/test/dropdown.ct.ts

@@ -836,3 +836,50 @@ regressionTest(
     await expect(lastItem).toBeVisible();
   }
 );
+regressionTest(
+  'should reflect aria-disabled on disabled dropdown item',
+  async ({ page, mount }) => {
+    await mount(`
+    <ix-button id="trigger">Open</ix-button>
+    <ix-dropdown trigger="trigger">
+      <ix-dropdown-item id="disabled-item" label="Disabled Item" disabled></ix-dropdown-item>
+      <ix-dropdown-item id="enabled-item" label="Enabled Item"></ix-dropdown-item>
+    </ix-dropdown>
+  `);
+
+    const disabledItem = page.locator('#disabled-item');
+    const enabledItem = page.locator('#enabled-item');
+
+    await expect(disabledItem).toHaveAttribute('aria-disabled', 'true');
+    await expect(enabledItem).toHaveAttribute('aria-disabled', 'false');
+  }
+);
+regressionTest(
+  'should reflect disabled attribute in DOM when changed dynamically',
+  async ({ page, mount }) => {
+    await mount(`
+      <ix-button id="trigger">Open</ix-button>
+      <ix-dropdown trigger="trigger">
+        <ix-dropdown-item id="static-disabled" label="Always Disabled" disabled="true"></ix-dropdown-item>
+        <ix-dropdown-item id="dynamic-disabled" label="Dynamic Disabled"></ix-dropdown-item>
+        <ix-dropdown-item id="toggle-trigger" label="Toggle Disabled"></ix-dropdown-item>
+      </ix-dropdown>
+    `);
+
+    const dynamicItem = page.locator('#dynamic-disabled');
+
+    await expect(dynamicItem).not.toHaveAttribute('disabled');
+
+    await dynamicItem.evaluate((element: any) => {
+      element.disabled = true;
+    });
+
+    await expect(dynamicItem).toHaveAttribute('disabled');
+
+    await dynamicItem.evaluate((element: any) => {
+      element.disabled = false;
+    });
+
+    await expect(dynamicItem).not.toHaveAttribute('disabled');
+  }
+);