@happyvertical/smrt-ui 0.33.0 → 0.34.0

package/dist/components/ui/Button.svelte

@@ -63,21 +63,34 @@ const buttonOnlyProps = new Set([
   'formTarget',
 ]);
 
-// Filter out button-specific props for link mode
+// Attributes the disabled link sets itself. `rest` is spread *after* the
+// explicit attributes on the <a>, so without excluding these a caller-supplied
+// `tabindex` / `aria-disabled` in `rest` would win and make a "disabled" link
+// focusable or announced as enabled again (PR #1602 review). Only stripped
+// while disabled, so an enabled link still honors a caller's tabindex.
+const disabledControlledProps = new Set(['tabindex', 'aria-disabled']);
+
+// Filter out button-specific props (always) and the self-controlled disabled
+// attributes (while disabled) for link mode.
 const linkProps = $derived(() => {
   return Object.fromEntries(
-    Object.entries(rest).filter(([key]) => !buttonOnlyProps.has(key)),
+    Object.entries(rest).filter(
+      ([key]) =>
+        !buttonOnlyProps.has(key) &&
+        !(isDisabled && disabledControlledProps.has(key)),
+    ),
   ) as HTMLAnchorAttributes;
 });
 </script>
 
 {#if isLink}
   <a
-    {href}
+    href={isDisabled ? undefined : href}
     class="button {variant} {size} {className}"
     class:disabled={isDisabled}
     class:full-width={fullWidth}
     class:loading
+    tabindex={isDisabled ? -1 : undefined}
     aria-disabled={isDisabled}
     aria-busy={loading}
     onclick={onclick as HTMLAnchorAttributes['onclick']}

package/dist/components/ui/Button.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Button.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/ui/Button.svelte.ts"],"names":[],"mappings":"AAGA;;;;;GAKG;AACH,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AACtC,OAAO,KAAK,EAEV,oBAAoB,EACrB,MAAM,iBAAiB,CAAC;AACzB,OAAO,KAAK,EAAE,UAAU,EAAE,aAAa,EAAE,MAAM,qBAAqB,CAAC;AAGrE,iCAAiC;AACjC,MAAM,WAAW,KAAM,SAAQ,IAAI,CAAC,oBAAoB,EAAE,OAAO,GAAG,MAAM,CAAC;IACzE,qBAAqB;IACrB,OAAO,CAAC,EAAE,aAAa,CAAC;IACxB,mBAAmB;IACnB,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,6CAA6C;IAC7C,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,iCAAiC;IACjC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,wBAAwB;IACxB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,oBAAoB;IACpB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;;;OAIG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAqED,QAAA,MAAM,MAAM,2CAAwC,CAAC;AACrD,KAAK,MAAM,GAAG,UAAU,CAAC,OAAO,MAAM,CAAC,CAAC;AACxC,eAAe,MAAM,CAAC"}
+{"version":3,"file":"Button.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/ui/Button.svelte.ts"],"names":[],"mappings":"AAGA;;;;;GAKG;AACH,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AACtC,OAAO,KAAK,EAEV,oBAAoB,EACrB,MAAM,iBAAiB,CAAC;AACzB,OAAO,KAAK,EAAE,UAAU,EAAE,aAAa,EAAE,MAAM,qBAAqB,CAAC;AAGrE,iCAAiC;AACjC,MAAM,WAAW,KAAM,SAAQ,IAAI,CAAC,oBAAoB,EAAE,OAAO,GAAG,MAAM,CAAC;IACzE,qBAAqB;IACrB,OAAO,CAAC,EAAE,aAAa,CAAC;IACxB,mBAAmB;IACnB,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,6CAA6C;IAC7C,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,iCAAiC;IACjC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,wBAAwB;IACxB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,oBAAoB;IACpB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;;;OAIG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAiFD,QAAA,MAAM,MAAM,2CAAwC,CAAC;AACrD,KAAK,MAAM,GAAG,UAAU,CAAC,OAAO,MAAM,CAAC,CAAC;AACxC,eAAe,MAAM,CAAC"}

package/dist/components/ui/__tests__/Button.test.js

@@ -83,6 +83,50 @@ describe('Button', () => {
         expect(link).toHaveClass('nav-link');
         expect(link).toHaveClass('button');
     });
+    it('is not navigable when disabled in link mode', async () => {
+        const { container } = render(Button, {
+            props: { children: textSnippet('Home'), href: '/home', disabled: true },
+        });
+        // A disabled link-mode Button must be genuinely non-navigable: it drops its
+        // href (no navigation target), leaves the tab order, and is announced as
+        // disabled. Previously it kept a live href + tab stop and only blocked the
+        // mouse via CSS pointer-events, so keyboard/AT users could still activate
+        // it (flagged by the PR #1599 auto-review).
+        const anchor = container.querySelector('a');
+        if (anchor === null)
+            throw new Error('expected a rendered <a> in link mode');
+        expect(anchor).not.toHaveAttribute('href');
+        expect(anchor).toHaveAttribute('tabindex', '-1');
+        expect(anchor).toHaveAttribute('aria-disabled', 'true');
+        // No href => no implicit link role => not reachable as a link by AT.
+        expect(screen.queryByRole('link')).toBeNull();
+        // ...and keyboard focus can't land on it, so Enter can't navigate.
+        await userEvent.tab();
+        expect(anchor).not.toHaveFocus();
+        await expectNoA11yViolations(container);
+    });
+    it('keeps a disabled link non-navigable even when the caller passes tabindex/aria-disabled', async () => {
+        const { container } = render(Button, {
+            props: {
+                children: textSnippet('Home'),
+                href: '/home',
+                disabled: true,
+                // Passthrough props that must NOT win over the disabled semantics:
+                // `rest` is spread after the component's own attributes on the <a>.
+                tabindex: 0,
+                'aria-disabled': false,
+            },
+        });
+        const anchor = container.querySelector('a');
+        if (anchor === null)
+            throw new Error('expected a rendered <a> in link mode');
+        expect(anchor).toHaveAttribute('tabindex', '-1');
+        expect(anchor).toHaveAttribute('aria-disabled', 'true');
+        expect(anchor).not.toHaveAttribute('href');
+        await userEvent.tab();
+        expect(anchor).not.toHaveFocus();
+        await expectNoA11yViolations(container);
+    });
     it('is axe-clean', async () => {
         const { container } = render(Button, {
             props: { children: textSnippet('Accessible') },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@happyvertical/smrt-ui",
-  "version": "0.33.0",
+  "version": "0.34.0",
   "description": "Domain-agnostic Svelte 5 UI runtime for SMRT: primitives, i18n client, theme system, and module UI registry",
   "type": "module",
   "main": "./dist/index.js",
@@ -108,7 +108,7 @@
   },
   "dependencies": {
     "esm-env": "^1.2.2",
-    "@happyvertical/smrt-types": "0.33.0"
+    "@happyvertical/smrt-types": "0.34.0"
   },
   "peerDependencies": {
     "svelte": "^5.18.2"