Merge branch 'main' into docs/refactor-examples

siemens · May 16, 2024 · 24e9ffa · 24e9ffa
2 parents 7bf4d98 + 4418b8c
commit 24e9ffa
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 1 deletion.
diff --git a/.changeset/giant-ways-wave.md b/.changeset/giant-ways-wave.md
@@ -0,0 +1,5 @@
+---
+"@siemens/ix": patch
+---
+
+fix(core/base-button): set aria disabled
diff --git a/packages/core/src/components/button/base-button.tsx b/packages/core/src/components/button/base-button.tsx
@@ -68,9 +68,14 @@ export type BaseButtonProps = {
 export function BaseButton(props: BaseButtonProps, children) {
   const extraClasses = props.extraClasses ?? {};
 
+  const ariaAttributes = props.ariaAttributes ?? {};
+  if (!ariaAttributes['aria-disabled'] && props.disabled) {
+    ariaAttributes['aria-disabled'] = 'true';
+  }
+
   return (
     <button
-      {...props.ariaAttributes}
+      {...ariaAttributes}
       onClick={(e: Event) => (props.onClick ? props.onClick(e) : undefined)}
       tabindex={props.disabled ? -1 : props.tabIndex ?? 0}
       type={props.type}

diff --git a/packages/core/src/components/button/test/button.ct.ts b/packages/core/src/components/button/test/button.ct.ts
@@ -47,3 +47,15 @@ test('should not fire event when disabled', async ({ mount, page }) => {
   await expect(button).toHaveClass(/hydrated/);
   await expect(button).toHaveCSS('pointer-events', 'none');
 });
+
+test.describe('A11y', () => {
+  test('disabled', async ({ mount, page }) => {
+    await mount('<ix-button disabled>Content</ix-button>');
+    const button = page.locator('button');
+    await expect(button).toHaveAttribute('aria-disabled');
+    await page.locator('ix-button').evaluate((btn: HTMLButtonElement) => {
+      btn.disabled = false;
+    });
+    await expect(button).not.toHaveAttribute('aria-disabled');
+  });
+});