diff --git a/packages/core/src/components/dropdown-button/dropdown-button.ct.ts b/packages/core/src/components/dropdown-button/dropdown-button.ct.ts index b419a608a14..3463e84d1d5 100644 --- a/packages/core/src/components/dropdown-button/dropdown-button.ct.ts +++ b/packages/core/src/components/dropdown-button/dropdown-button.ct.ts @@ -57,3 +57,48 @@ regressionTest('submenu', async ({ mount, page }) => { await expect(subItem).toBeVisible(); }); + +regressionTest( + 'should reflect aria-disabled on disabled dropdown button', + async ({ page, mount }) => { + await mount(` + + + + + + + `); + + 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(` + + + + `); + + 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'); + } +); diff --git a/packages/core/src/components/dropdown-button/dropdown-button.tsx b/packages/core/src/components/dropdown-button/dropdown-button.tsx index d54d7abb92b..d93c12be152 100644 --- a/packages/core/src/components/dropdown-button/dropdown-button.tsx +++ b/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 ( this.emitItemClick()} aria-label={this.ariaLabelButton} + disabled={this.disabled} > {!this.suppressChecked ? (