@astryxdesign/core 0.7.1 → 0.7.2-canary.07f97c6

package/locales/pseudo.json

@@ -395,6 +395,63 @@
   "@astryx.listInput.announceAlreadyAtBoundary": {
     "defaultMessage": "⟦Ţĥíš {itemName} íš àłřéàðý {boundary, select, first {first} last {last} other {}}.⟧"
   },
+  "@astryx.diffViewer.label": {
+    "defaultMessage": "⟦Ð탃⟧"
+  },
+  "@astryx.diffViewer.renamedPath": {
+    "defaultMessage": "⟦{oldPath} → {newPath}⟧"
+  },
+  "@astryx.diffViewer.statusAdded": {
+    "defaultMessage": "⟦Àððéð⟧"
+  },
+  "@astryx.diffViewer.statusDeleted": {
+    "defaultMessage": "⟦Ðéłéţéð⟧"
+  },
+  "@astryx.diffViewer.statusRenamed": {
+    "defaultMessage": "⟦Řéñàɱéð⟧"
+  },
+  "@astryx.diffViewer.addedCount": {
+    "defaultMessage": "⟦+{count, number}⟧"
+  },
+  "@astryx.diffViewer.removedCount": {
+    "defaultMessage": "⟦−{count, number}⟧"
+  },
+  "@astryx.diffViewer.stats": {
+    "defaultMessage": "⟦{added, plural, one {# line added} other {# lines added}}, {removed, plural, one {# line removed} other {# lines removed}}⟧"
+  },
+  "@astryx.diffViewer.added": {
+    "defaultMessage": "⟦Àððéð⟧"
+  },
+  "@astryx.diffViewer.removed": {
+    "defaultMessage": "⟦Řéɱóṽéð⟧"
+  },
+  "@astryx.diffViewer.lineNumberButton": {
+    "defaultMessage": "⟦{side, select, old {Original line {line, number}} other {Changed line {line, number}}}⟧"
+  },
+  "@astryx.diffViewer.columnOldLine": {
+    "defaultMessage": "⟦Óříĝíñàł łíñé ñúɱƀéř⟧"
+  },
+  "@astryx.diffViewer.columnNewLine": {
+    "defaultMessage": "⟦Çĥàñĝéð łíñé ñúɱƀéř⟧"
+  },
+  "@astryx.diffViewer.columnChange": {
+    "defaultMessage": "⟦Çĥàñĝé⟧"
+  },
+  "@astryx.diffViewer.columnCode": {
+    "defaultMessage": "⟦Çóðé⟧"
+  },
+  "@astryx.diffViewer.columnOldCode": {
+    "defaultMessage": "⟦Óříĝíñàł çóðé⟧"
+  },
+  "@astryx.diffViewer.columnNewCode": {
+    "defaultMessage": "⟦Çĥàñĝéð çóðé⟧"
+  },
+  "@astryx.diffViewer.binary": {
+    "defaultMessage": "⟦Ɓíñàřý ƒíłé ñóţ šĥóŵñ⟧"
+  },
+  "@astryx.diffViewer.noChanges": {
+    "defaultMessage": "⟦Ñó çóñţéñţ çĥàñĝéš⟧"
+  },
   "@astryx.markdownHeadingLinks.copied": {
     "defaultMessage": "⟦Łíñķ çóþíéð⟧"
   },
@@ -1231,5 +1288,281 @@
   },
   "@astryx.transferListSelector.triggerLabel": {
     "defaultMessage": "⟦{count, number} šéłéçţéð⟧"
+  },
+  "@astryx.emojiPicker.label": {
+    "defaultMessage": "⟦Éɱóĵí⟧"
+  },
+  "@astryx.emojiPicker.searchLabel": {
+    "defaultMessage": "⟦Šéàřçĥ éɱóĵí⟧"
+  },
+  "@astryx.emojiPicker.frequentlyUsed": {
+    "defaultMessage": "⟦Ƒřéɋúéñţłý úšéð⟧"
+  },
+  "@astryx.emojiPicker.searchResults": {
+    "defaultMessage": "⟦Šéàřçĥ řéšúłţš⟧"
+  },
+  "@astryx.emojiPicker.noResults": {
+    "defaultMessage": "⟦Ñó éɱóĵí ɱàţçĥ “{query}”⟧"
+  },
+  "@astryx.emojiPicker.loading": {
+    "defaultMessage": "⟦Łóàðíñĝ éɱóĵí⟧"
+  },
+  "@astryx.emojiPicker.loadFailed": {
+    "defaultMessage": "⟦Ṁóřé éɱóĵí çóúłðñ'ţ ƀé łóàðéð.⟧"
+  },
+  "@astryx.emojiPicker.groupSmileysEmotion": {
+    "defaultMessage": "⟦Šɱíłéýš & éɱóţíóñ⟧"
+  },
+  "@astryx.emojiPicker.groupPeopleBody": {
+    "defaultMessage": "⟦Þéóþłé & ƀóðý⟧"
+  },
+  "@astryx.emojiPicker.groupAnimalsNature": {
+    "defaultMessage": "⟦Àñíɱàłš & ñàţúřé⟧"
+  },
+  "@astryx.emojiPicker.groupFoodDrink": {
+    "defaultMessage": "⟦Ƒóóð & ðříñķ⟧"
+  },
+  "@astryx.emojiPicker.groupTravelPlaces": {
+    "defaultMessage": "⟦Ţřàṽéł & þłàçéš⟧"
+  },
+  "@astryx.emojiPicker.groupActivities": {
+    "defaultMessage": "⟦Àçţíṽíţíéš⟧"
+  },
+  "@astryx.emojiPicker.groupObjects": {
+    "defaultMessage": "⟦Óƀĵéçţš⟧"
+  },
+  "@astryx.emojiPicker.groupSymbols": {
+    "defaultMessage": "⟦Šýɱƀółš⟧"
+  },
+  "@astryx.emojiPicker.groupFlags": {
+    "defaultMessage": "⟦Ƒłàĝš⟧"
+  },
+  "@astryx.comments.retry": {
+    "defaultMessage": "⟦Řéţřý⟧"
+  },
+  "@astryx.commentComposer.placeholder": {
+    "defaultMessage": "⟦Ŵříţé à çóɱɱéñţ…⟧"
+  },
+  "@astryx.commentComposer.noAgents": {
+    "defaultMessage": "⟦Ñó àĝéñţš⟧"
+  },
+  "@astryx.commentComposer.agents": {
+    "defaultMessage": "⟦Àĝéñţš⟧"
+  },
+  "@astryx.commentComposer.uploadFailed": {
+    "defaultMessage": "⟦Íɱàĝéš çóúłðñ'ţ ƀé àððéð⟧"
+  },
+  "@astryx.commentComposer.imagesOnly": {
+    "defaultMessage": "⟦Óñłý íɱàĝé ƒíłéš çàñ ƀé àððéð⟧"
+  },
+  "@astryx.commentComposer.chooseImages": {
+    "defaultMessage": "⟦Çĥóóšé íɱàĝéš⟧"
+  },
+  "@astryx.commentComposer.imageAlt": {
+    "defaultMessage": "⟦Íɱàĝé àţţàçĥɱéñţ⟧"
+  },
+  "@astryx.commentComposer.removeQuote": {
+    "defaultMessage": "⟦Řéɱóṽé ɋúóţéð ţéẋţ⟧"
+  },
+  "@astryx.commentComposer.attachImages": {
+    "defaultMessage": "⟦Àţţàçĥ íɱàĝéš⟧"
+  },
+  "@astryx.commentComposer.addEmoji": {
+    "defaultMessage": "⟦Àðð éɱóĵí⟧"
+  },
+  "@astryx.commentComposer.cancel": {
+    "defaultMessage": "⟦Çàñçéł⟧"
+  },
+  "@astryx.comments.actionsLabel": {
+    "defaultMessage": "⟦Àçţíóñš ƒóř {name}'š çóɱɱéñţ⟧"
+  },
+  "@astryx.comments.addReaction": {
+    "defaultMessage": "⟦Àðð řéàçţíóñ⟧"
+  },
+  "@astryx.comments.agentBadge": {
+    "defaultMessage": "⟦Àĝéñţ⟧"
+  },
+  "@astryx.comments.agentLogo": {
+    "defaultMessage": "⟦{name} łóĝó⟧"
+  },
+  "@astryx.comments.chooseReaction": {
+    "defaultMessage": "⟦Çĥóóšé à řéàçţíóñ⟧"
+  },
+  "@astryx.comments.copyLink": {
+    "defaultMessage": "⟦Çóþý çóɱɱéñţ łíñķ⟧"
+  },
+  "@astryx.comments.currentVersion": {
+    "defaultMessage": "⟦Çúřřéñţ ṽéřšíóñ⟧"
+  },
+  "@astryx.comments.delete": {
+    "defaultMessage": "⟦Ðéłéţé⟧"
+  },
+  "@astryx.comments.deleteDescription": {
+    "defaultMessage": "⟦Ðéłéţé {name}'š çóɱɱéñţ? Ţĥíš àçţíóñ çàññóţ ƀé úñðóñé.⟧"
+  },
+  "@astryx.comments.deleteFailed": {
+    "defaultMessage": "⟦Ţĥíš çóɱɱéñţ çóúłðñ'ţ ƀé ðéłéţéð.⟧"
+  },
+  "@astryx.comments.deleteFailedRetry": {
+    "defaultMessage": "⟦Ţĥíš çóɱɱéñţ çóúłðñ'ţ ƀé ðéłéţéð. Ţřý àĝàíñ.⟧"
+  },
+  "@astryx.comments.deleteTitle": {
+    "defaultMessage": "⟦Ðéłéţé çóɱɱéñţ?⟧"
+  },
+  "@astryx.comments.edit": {
+    "defaultMessage": "⟦Éðíţ⟧"
+  },
+  "@astryx.comments.editFailed": {
+    "defaultMessage": "⟦Ýóúř éðíţ çóúłðñ'ţ ƀé šàṽéð.⟧"
+  },
+  "@astryx.comments.editPlaceholder": {
+    "defaultMessage": "⟦Éðíţ çóɱɱéñţ⟧"
+  },
+  "@astryx.comments.edited": {
+    "defaultMessage": "⟦Éðíţéð⟧"
+  },
+  "@astryx.comments.editingContext": {
+    "defaultMessage": "⟦Éðíţíñĝ çóɱɱéñţ⟧"
+  },
+  "@astryx.comments.hideReplies": {
+    "defaultMessage": "⟦Ĥíðé řéþłíéš⟧"
+  },
+  "@astryx.comments.historyEmptyDescription": {
+    "defaultMessage": "⟦Ţĥíš çóɱɱéñţ ĥàš ñó éàřłíéř ṽéřšíóñš.⟧"
+  },
+  "@astryx.comments.historyEmptyTitle": {
+    "defaultMessage": "⟦Ñó éðíţ ĥíšţóřý⟧"
+  },
+  "@astryx.comments.historyFailed": {
+    "defaultMessage": "⟦Éðíţ ĥíšţóřý çóúłðñ'ţ łóàð⟧"
+  },
+  "@astryx.comments.historyLoadFailed": {
+    "defaultMessage": "⟦Ţĥé çóɱɱéñţ'š éðíţ ĥíšţóřý çóúłðñ'ţ ƀé łóàðéð. Ţřý àĝàíñ.⟧"
+  },
+  "@astryx.comments.historyLoading": {
+    "defaultMessage": "⟦Łóàðíñĝ éðíţ ĥíšţóřý⟧"
+  },
+  "@astryx.comments.historySubtitle": {
+    "defaultMessage": "⟦Çóɱɱéñţ ƀý {name}⟧"
+  },
+  "@astryx.comments.historyTitle": {
+    "defaultMessage": "⟦Éðíţ ĥíšţóřý⟧"
+  },
+  "@astryx.comments.linkCopied": {
+    "defaultMessage": "⟦Çóɱɱéñţ łíñķ çóþíéð⟧"
+  },
+  "@astryx.comments.otherReactors": {
+    "defaultMessage": "⟦{count, plural, one {# other} other {# others}}⟧"
+  },
+  "@astryx.comments.outdated": {
+    "defaultMessage": "⟦Óúţðàţéð⟧"
+  },
+  "@astryx.comments.reactionCelebrate": {
+    "defaultMessage": "⟦Çéłéƀřàţé⟧"
+  },
+  "@astryx.comments.reactionCount": {
+    "defaultMessage": "⟦{reaction}: {count, number}⟧"
+  },
+  "@astryx.comments.reactionFailed": {
+    "defaultMessage": "⟦Ýóúř řéàçţíóñ çóúłðñ'ţ ƀé šàṽéð.⟧"
+  },
+  "@astryx.comments.reactionLaugh": {
+    "defaultMessage": "⟦Ĥàĥà⟧"
+  },
+  "@astryx.comments.reactionLike": {
+    "defaultMessage": "⟦Łíķé⟧"
+  },
+  "@astryx.comments.reactionLove": {
+    "defaultMessage": "⟦Łóṽé⟧"
+  },
+  "@astryx.comments.reactionSad": {
+    "defaultMessage": "⟦Šàð⟧"
+  },
+  "@astryx.comments.reactionWow": {
+    "defaultMessage": "⟦Ŵóŵ⟧"
+  },
+  "@astryx.comments.reopen": {
+    "defaultMessage": "⟦Řéóþéñ⟧"
+  },
+  "@astryx.comments.reopenFailed": {
+    "defaultMessage": "⟦Ţĥíš ţĥřéàð çóúłðñ'ţ ƀé řéóþéñéð.⟧"
+  },
+  "@astryx.comments.reply": {
+    "defaultMessage": "⟦Řéþłý⟧"
+  },
+  "@astryx.comments.replyFailed": {
+    "defaultMessage": "⟦Ýóúř řéþłý çóúłðñ'ţ ƀé þóšţéð.⟧"
+  },
+  "@astryx.comments.replyPlaceholder": {
+    "defaultMessage": "⟦Řéþłý ţó {name}…⟧"
+  },
+  "@astryx.comments.replyingContext": {
+    "defaultMessage": "⟦Řéþłýíñĝ ţó {name}⟧"
+  },
+  "@astryx.comments.resolve": {
+    "defaultMessage": "⟦Ṁàřķ àš řéšółṽéð⟧"
+  },
+  "@astryx.comments.resolveFailed": {
+    "defaultMessage": "⟦Ţĥíš ţĥřéàð çóúłðñ'ţ ƀé řéšółṽéð.⟧"
+  },
+  "@astryx.comments.resolved": {
+    "defaultMessage": "⟦Řéšółṽéð⟧"
+  },
+  "@astryx.comments.resolvedBy": {
+    "defaultMessage": "⟦Řéšółṽéð ƀý {name}⟧"
+  },
+  "@astryx.comments.retryFailed": {
+    "defaultMessage": "⟦Řéţřýíñĝ ðíðñ'ţ ŵóřķ.⟧"
+  },
+  "@astryx.comments.sendFailed": {
+    "defaultMessage": "⟦Çóúłðñ'ţ šéñð ţĥíš çóɱɱéñţ.⟧"
+  },
+  "@astryx.comments.threadLabel": {
+    "defaultMessage": "⟦Ţĥřéàð ƀý {name}⟧"
+  },
+  "@astryx.comments.unread": {
+    "defaultMessage": "⟦Ñéŵ⟧"
+  },
+  "@astryx.comments.unsavedDraft": {
+    "defaultMessage": "⟦Úñšàṽéð ðřàƒţ. Ðíšɱíšš àĝàíñ ţó ðíšçàřð íţ.⟧"
+  },
+  "@astryx.comments.versionAuthor": {
+    "defaultMessage": "⟦ƀý {name}⟧"
+  },
+  "@astryx.comments.viewHistory": {
+    "defaultMessage": "⟦Ṽíéŵ éðíţ ĥíšţóřý⟧"
+  },
+  "@astryx.comments.viewReplies": {
+    "defaultMessage": "⟦Ṽíéŵ {count, plural, one {# reply} other {# replies}}⟧"
+  },
+  "@astryx.comments.commentsLabel": {
+    "defaultMessage": "⟦Ţĥřéàðš íñ {label}⟧"
+  },
+  "@astryx.comments.emptyDescription": {
+    "defaultMessage": "⟦Šţàřţ ţĥé ðíšçúššíóñ ŵíţĥ à çóɱɱéñţ.⟧"
+  },
+  "@astryx.comments.emptyReadOnlyDescription": {
+    "defaultMessage": "⟦Ţĥéřé íš ñó ðíšçúššíóñ óñ ţĥíš íţéɱ.⟧"
+  },
+  "@astryx.comments.emptyTitle": {
+    "defaultMessage": "⟦Ñó çóɱɱéñţš ýéţ⟧"
+  },
+  "@astryx.comments.label": {
+    "defaultMessage": "⟦Çóɱɱéñţš⟧"
+  },
+  "@astryx.comments.loadFailed": {
+    "defaultMessage": "⟦Çóɱɱéñţš çóúłðñ'ţ łóàð⟧"
+  },
+  "@astryx.comments.loadOlder": {
+    "defaultMessage": "⟦Łóàð éàřłíéř çóɱɱéñţš⟧"
+  },
+  "@astryx.comments.loading": {
+    "defaultMessage": "⟦Łóàðíñĝ çóɱɱéñţš⟧"
+  },
+  "@astryx.comments.olderFailed": {
+    "defaultMessage": "⟦Éàřłíéř çóɱɱéñţš çóúłðñ'ţ łóàð⟧"
+  },
+  "@astryx.comments.postFailed": {
+    "defaultMessage": "⟦Ýóúř çóɱɱéñţ çóúłðñ'ţ ƀé þóšţéð.⟧"
   }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@astryxdesign/core",
-  "version": "0.7.1",
+  "version": "0.7.2-canary.07f97c6",
   "displayName": "Astryx Core",
   "description": "The component library. Accessible, themeable React components with built-in spacing, dark mode, and StyleX styling.",
   "author": "Meta Open Source",
@@ -329,6 +329,11 @@
       "types": "./dist/Divider/index.d.ts",
       "default": "./dist/Divider/index.js"
     },
+    "./Drawer": {
+      "source": "./src/Drawer/index.ts",
+      "types": "./dist/Drawer/index.d.ts",
+      "default": "./dist/Drawer/index.js"
+    },
     "./DropdownMenu": {
       "source": "./src/DropdownMenu/index.ts",
       "types": "./dist/DropdownMenu/index.d.ts",
@@ -787,6 +792,8 @@
     "react-dom": ">=19.0.0"
   },
   "devDependencies": {
+    "@astryxdesign/a11y-spec": "0.7.2-canary.07f97c6",
+    "@astryxdesign/cli": "0.7.2-canary.07f97c6",
     "@babel/cli": "^7.29.7",
     "@babel/core": "^7.29.7",
     "@babel/preset-react": "^7.29.7",
@@ -797,9 +804,7 @@
     "@testing-library/jest-dom": "^6.6.0",
     "@testing-library/react": "^16.3.2",
     "@types/babel__core": "^7.20.5",
-    "tailwindcss": "^4.3.2",
-    "@astryxdesign/a11y-spec": "0.0.0",
-    "@astryxdesign/cli": "0.7.1"
+    "tailwindcss": "^4.3.2"
   },
   "dependencies": {
     "intl-messageformat": "^11.2.9"

package/src/Button/Button.doc.mjs

@@ -138,7 +138,7 @@ export const docs = {
     {
       name: 'isLoading',
       type: 'boolean',
-      description: 'Shows a loading spinner and disables interaction. Announces "Loading" via a live region.',
+      description: 'Shows a loading spinner and blocks re-activation while staying focusable (aria-busy + aria-disabled, not native disabled, so keyboard focus is never dropped mid-action). Announces "Loading" via a live region.',
       default: 'false',
     },
     {
@@ -419,7 +419,7 @@ export const docsDense = {
     displayName: 'HTML name for form submission',
     value: 'HTML value for form submission',
     form: 'associates button with form element by ID',
-    isLoading: 'shows spinner+disables interaction; announces via live region',
+    isLoading: 'shows spinner, blocks re-activation but stays focusable (aria-disabled, not native disabled); announces via live region',
     icon: 'icon element rendered before label text; unsized Astryx Icon defaults to sm for sm/md buttons and md for lg',
     isIconOnly: 'when true, renders square icon-only button; label becomes aria-label',
     width: "Width of button. Numbers=pixels, strings=as-is (e.g. '100%' for full-width). Default: content width, capped at the container; label truncates w/ ellipsis in a narrow row; icon-only stays square.",

package/src/Button/Button.test.tsx

@@ -11,7 +11,13 @@
 
 import {readFileSync} from 'node:fs';
 import {describe, it, expect, vi} from 'vitest';
-import {render, screen, fireEvent, act} from '@testing-library/react';
+import {
+  render,
+  screen,
+  fireEvent,
+  createEvent,
+  act,
+} from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import {Button} from './Button';
 import * as stylex from '@stylexjs/stylex';
@@ -127,8 +133,9 @@ describe('Button', () => {
   it('shows isLoading state with spinner', () => {
     render(<Button label="Submit" isLoading />);
     const button = screen.getByRole('button');
-    // Button should be disabled when loading
-    expect(button).toBeDisabled();
+    // Busy is aria-disabled (focusable), not native disabled — see #4871.
+    expect(button).not.toBeDisabled();
+    expect(button).toHaveAttribute('aria-disabled', 'true');
     expect(button.className).toContain('styles.inactive');
     expect(button.className).not.toContain('styles.disabled');
   });
@@ -143,7 +150,7 @@ describe('Button', () => {
 
   it('sets aria-busy synchronously while clickAction is pending', async () => {
     // The spinner reveal is visually delayed (CSS animation-delay), but the
-    // loading DOM state — aria-busy and disabled — must not be delayed.
+    // loading DOM state — aria-busy and aria-disabled — must not be delayed.
     const user = userEvent.setup();
     let resolveAction: (() => void) | undefined;
     const clickAction = vi.fn(
@@ -157,7 +164,9 @@ describe('Button', () => {
 
     await user.click(button);
     expect(button).toHaveAttribute('aria-busy', 'true');
-    expect(button).toBeDisabled();
+    // Busy is aria-disabled (focusable), not native disabled — see #4871.
+    expect(button).not.toBeDisabled();
+    expect(button).toHaveAttribute('aria-disabled', 'true');
 
     await act(async () => {
       resolveAction?.();
@@ -165,6 +174,7 @@ describe('Button', () => {
     });
     expect(button).not.toHaveAttribute('aria-busy', 'true');
     expect(button).not.toBeDisabled();
+    expect(button).not.toHaveAttribute('aria-disabled');
   });
 
   it('renders the loading spinner with the inherit shade for every variant (#2717)', () => {
@@ -310,9 +320,10 @@ describe('Button', () => {
     );
     // endContent should still be in the DOM
     expect(screen.getByTestId('end')).toBeInTheDocument();
-    // Button should be disabled and have aria-busy
+    // Busy is aria-disabled (focusable), not native disabled — see #4871.
     const button = screen.getByRole('button');
-    expect(button).toBeDisabled();
+    expect(button).not.toBeDisabled();
+    expect(button).toHaveAttribute('aria-disabled', 'true');
     expect(button).toHaveAttribute('aria-busy', 'true');
   });
 
@@ -516,6 +527,111 @@ describe('Button', () => {
     expect(handleKeyDown).toHaveBeenCalledTimes(1);
   });
 
+  it('uses aria-disabled instead of disabled while isLoading, so the button stays focusable (#4871)', () => {
+    render(<Button label="Save" isLoading />);
+    const button = screen.getByRole('button');
+    // Native disabled would move focus to <body> the moment the action
+    // starts, losing the keyboard user's place — busy must stay
+    // aria-disabled + focusable per the "Disabled vs Busy" convention.
+    expect(button).not.toHaveAttribute('disabled');
+    expect(button).toHaveAttribute('aria-disabled', 'true');
+    expect(button).toHaveAttribute('aria-busy', 'true');
+    button.focus();
+    expect(button).toHaveFocus();
+  });
+
+  it('does not fire onClick while aria-disabled via isLoading', async () => {
+    const user = userEvent.setup();
+    const handleClick = vi.fn();
+    render(<Button label="Save" isLoading onClick={handleClick} />);
+    await user.click(screen.getByRole('button'));
+    expect(handleClick).not.toHaveBeenCalled();
+  });
+
+  it('does not let a click on a busy button reach a wrapping ancestor handler', async () => {
+    // A native `disabled` element never dispatches a click, so it never
+    // reaches an ancestor either. aria-disabled (busy-only) is a real,
+    // interactive element that still dispatches one — preventDefault alone
+    // only cancels the button's own default action, not propagation, so
+    // an unrelated wrapper (a clickable row/card/backdrop) would otherwise
+    // still fire.
+    const user = userEvent.setup();
+    const ancestorClick = vi.fn();
+    render(
+      <div onClick={ancestorClick}>
+        <Button label="Save" isLoading />
+      </div>,
+    );
+    await user.click(screen.getByRole('button'));
+    expect(ancestorClick).not.toHaveBeenCalled();
+  });
+
+  it('does not let a click on a busy-only anchor Button reach a wrapping ancestor handler', async () => {
+    const user = userEvent.setup();
+    const ancestorClick = vi.fn();
+    render(
+      <div onClick={ancestorClick}>
+        <Button label="Docs" href="https://example.com" isLoading />
+      </div>,
+    );
+    await user.click(screen.getByRole('link'));
+    expect(ancestorClick).not.toHaveBeenCalled();
+  });
+
+  it('suppresses activation keys but passes other keys while aria-disabled via isLoading', async () => {
+    const user = userEvent.setup();
+    const handleKeyDown = vi.fn();
+    render(<Button label="Save" isLoading onKeyDown={handleKeyDown} />);
+    const button = screen.getByRole('button');
+    button.focus();
+    await user.keyboard('{Enter}');
+    expect(handleKeyDown).not.toHaveBeenCalled();
+
+    await user.keyboard('{Escape}');
+    expect(handleKeyDown).toHaveBeenCalledTimes(1);
+  });
+
+  it('suppresses activation keys but passes other keys on a busy-only anchor Button', async () => {
+    // The button-rendered path suppresses Enter/Space while aria-disabled;
+    // the anchor-rendered path (href set, busy-only) shares the same
+    // handleKeyDown but only wires onClick, so a consumer onKeyDown still
+    // received Enter/Space on a busy link.
+    const user = userEvent.setup();
+    const handleKeyDown = vi.fn();
+    render(
+      <Button
+        label="Docs"
+        href="https://example.com"
+        isLoading
+        onKeyDown={handleKeyDown}
+      />,
+    );
+    const link = screen.getByRole('link');
+    link.focus();
+    await user.keyboard('{Enter}');
+    expect(handleKeyDown).not.toHaveBeenCalled();
+
+    await user.keyboard('{Escape}');
+    expect(handleKeyDown).toHaveBeenCalledTimes(1);
+  });
+
+  it('keeps native disabled (not aria-disabled) when isDisabled and not busy, even without a tooltip', () => {
+    render(<Button label="Save" isDisabled />);
+    const button = screen.getByRole('button');
+    expect(button).toHaveAttribute('disabled');
+    expect(button).not.toHaveAttribute('aria-disabled');
+  });
+
+  it('keeps native disabled when isDisabled and isLoading are both true (isDisabled wins)', () => {
+    render(<Button label="Save" isDisabled isLoading />);
+    const button = screen.getByRole('button');
+    // "isDisabled behavior unchanged: that stays native disabled" — busy-only
+    // aria-disabled is only for the case where busy is the SOLE reason the
+    // button can't be clicked, not when it's also genuinely isDisabled.
+    expect(button).toHaveAttribute('disabled');
+    expect(button).not.toHaveAttribute('aria-disabled');
+  });
+
   it('has a live region that announces loading state', () => {
     const {rerender} = render(<Button label="Submit" />);
     const button = screen.getByRole('button');
@@ -663,8 +779,6 @@ describe('Button', () => {
   });
 
   it('exposes aria-busy on the link-rendered button while loading', () => {
-    // Non-interruptible loading disables the button, which falls back to
-    // <button> rendering — so an anchor only shows loading when interruptible.
     render(
       <Button
         label="Docs"
@@ -682,6 +796,38 @@ describe('Button', () => {
     const link = screen.getByRole('link');
     expect(link).not.toHaveAttribute('aria-busy');
   });
+
+  it('stays an anchor while busy-only, not a disabled <button> fallback (#4871)', () => {
+    // Non-interruptible busy is exactly the isBusyOnlyDisabled case: not
+    // isDisabled, blocked only because a fire-once action is in flight.
+    // Swapping the element to <button disabled> here would drop focus the
+    // same way the native disabled attribute did (credit @AKnassa, #4879).
+    render(<Button label="Docs" href="https://example.com" isLoading />);
+    const link = screen.getByRole('link', {name: 'Docs'});
+    expect(link.tagName).toBe('A');
+    expect(link).toHaveAttribute('href', 'https://example.com');
+    expect(link).toHaveAttribute('aria-busy', 'true');
+    expect(link).toHaveAttribute('aria-disabled', 'true');
+    expect(link).not.toHaveAttribute('disabled');
+  });
+
+  it('keeps a busy-only anchor focusable and guards its navigation', () => {
+    render(<Button label="Docs" href="https://example.com" isLoading />);
+    const link = screen.getByRole('link', {name: 'Docs'});
+    link.focus();
+    expect(link).toHaveFocus();
+
+    const event = createEvent.click(link);
+    fireEvent(link, event);
+    expect(event.defaultPrevented).toBe(true);
+  });
+
+  it('falls back to <button disabled> for a truly disabled href Button', () => {
+    render(<Button label="Docs" href="https://example.com" isDisabled />);
+    expect(screen.queryByRole('link')).not.toBeInTheDocument();
+    const button = screen.getByRole('button', {name: 'Docs'});
+    expect(button).toBeDisabled();
+  });
 });
 
 describe('Button pressed state (touch)', () => {