diff --git a/core/src/components/button/button.tsx b/core/src/components/button/button.tsx index a1e7f72bf01..59e46bd2a3a 100644 --- a/core/src/components/button/button.tsx +++ b/core/src/components/button/button.tsx @@ -171,6 +171,7 @@ export class Button implements ComponentInterface, AnchorInterface, ButtonInterf @Watch('aria-checked') @Watch('aria-label') @Watch('aria-pressed') + @Watch('aria-description') onAriaChanged(newValue: string, _oldValue: string, propName: string) { this.inheritedAttributes = { ...this.inheritedAttributes, diff --git a/core/src/components/button/test/a11y/button.e2e.ts b/core/src/components/button/test/a11y/button.e2e.ts index 585c0b5853d..fb712c99abe 100644 --- a/core/src/components/button/test/a11y/button.e2e.ts +++ b/core/src/components/button/test/a11y/button.e2e.ts @@ -148,3 +148,32 @@ configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => { }); }); }); + +configs({ directions: ['ltr'] }).forEach(({ title, config }) => { + test.describe(title('button: aria description updates'), () => { + test('native button updates aria-description when host attribute changes', async ({ page }) => { + test.info().annotations.push({ + type: 'issue', + description: 'https://github.com/ionic-team/ionic-framework/issues/30626', + }); + + await page.setContent( + ` + Button + `, + config + ); + + const host = page.locator('ion-button'); + const nativeButton = host.locator('button'); + + await expect(nativeButton).toHaveAttribute('aria-description', '0'); + + await host.evaluate((el) => { + el.setAttribute('aria-description', '1'); + }); + + await expect(nativeButton).toHaveAttribute('aria-description', '1'); + }); + }); +});