From 9b61af0306b422acf1e7cdde278e517740f667c5 Mon Sep 17 00:00:00 2001
From: Eric Liu <ericyl.us@gmail.com>
Date: Sun, 23 Mar 2025 10:46:25 -0700
Subject: [PATCH] fix(list-box): set `aria-disabled` if `disabled` (#2125)
 (#2138)

Re-apply #2125 (reverted in #2130) to preserve `disabled` attribute.

Carbon styles depend on the `[disabled]` attribute. However, the `disabled`
attribute is not valid markup when applied to `div role="option"`. This PR
preserves the existing `disabled` attribute while also setting `aria-disabled`
to maintain accessibility.
---
 src/ListBox/ListBoxMenuItem.svelte | 1 +
 tests/ComboBox/ComboBox.test.ts    | 1 +
 2 files changed, 2 insertions(+)

diff --git a/src/ListBox/ListBoxMenuItem.svelte b/src/ListBox/ListBoxMenuItem.svelte
index dd2ff422..c804ed73 100644
--- a/src/ListBox/ListBoxMenuItem.svelte
+++ b/src/ListBox/ListBoxMenuItem.svelte
@@ -25,6 +25,7 @@
   class:bx--list-box__menu-item--active={active}
   class:bx--list-box__menu-item--highlighted={highlighted || active}
   aria-selected={active}
+  aria-disabled={disabled ? true : undefined}
   disabled={disabled ? true : undefined}
   {...$$restProps}
   on:click
diff --git a/tests/ComboBox/ComboBox.test.ts b/tests/ComboBox/ComboBox.test.ts
index f14fd581..c7bb0c48 100644
--- a/tests/ComboBox/ComboBox.test.ts
+++ b/tests/ComboBox/ComboBox.test.ts
@@ -166,6 +166,7 @@ describe("ComboBox", () => {
     const disabledOption = screen.getByText(/Fax/).closest('[role="option"]');
     assert(disabledOption);
     expect(disabledOption).toHaveAttribute("disabled", "true");
+    expect(disabledOption).toHaveAttribute("aria-disabled", "true");
 
     await user.click(disabledOption);
     expect(screen.getByRole("textbox")).toHaveValue("");