From 310eb1219bd58452f5a9bc459f50e25327bfaa87 Mon Sep 17 00:00:00 2001
From: Marco Ciampini <marco.ciampo@gmail.com>
Date: Wed, 22 Nov 2023 11:11:21 +0100
Subject: [PATCH] Allow disabled items to be keyboard focusable / accessible

---
 packages/components/src/dropdown-menu-v2-ariakit/index.tsx | 3 +++
 packages/components/src/dropdown-menu-v2-ariakit/styles.ts | 4 +++-
 2 files changed, 6 insertions(+), 1 deletion(-)

diff --git a/packages/components/src/dropdown-menu-v2-ariakit/index.tsx b/packages/components/src/dropdown-menu-v2-ariakit/index.tsx
index aac8a8844f6ed..b3e0557b441f8 100644
--- a/packages/components/src/dropdown-menu-v2-ariakit/index.tsx
+++ b/packages/components/src/dropdown-menu-v2-ariakit/index.tsx
@@ -54,6 +54,7 @@ export const DropdownMenuItem = forwardRef<
 		<Styled.DropdownMenuItem
 			ref={ ref }
 			{ ...props }
+			accessibleWhenDisabled
 			hideOnClick={ hideOnClick }
 			store={ dropdownMenuContext?.store }
 		>
@@ -87,6 +88,7 @@ export const DropdownMenuCheckboxItem = forwardRef<
 		<Styled.DropdownMenuCheckboxItem
 			ref={ ref }
 			{ ...props }
+			accessibleWhenDisabled
 			hideOnClick={ hideOnClick }
 			store={ dropdownMenuContext?.store }
 		>
@@ -131,6 +133,7 @@ export const DropdownMenuRadioItem = forwardRef<
 		<Styled.DropdownMenuRadioItem
 			ref={ ref }
 			{ ...props }
+			accessibleWhenDisabled
 			hideOnClick={ hideOnClick }
 			store={ dropdownMenuContext?.store }
 		>
diff --git a/packages/components/src/dropdown-menu-v2-ariakit/styles.ts b/packages/components/src/dropdown-menu-v2-ariakit/styles.ts
index 55d8ab5a40de9..36263a3dbf77b 100644
--- a/packages/components/src/dropdown-menu-v2-ariakit/styles.ts
+++ b/packages/components/src/dropdown-menu-v2-ariakit/styles.ts
@@ -158,7 +158,9 @@ const baseItem = css`
 	}
 
 	/* Hover */
-	&[data-active-item]:not( [data-focus-visible] ) {
+	&[data-active-item]:not( [data-focus-visible] ):not(
+			[aria-disabled='true']
+		) {
 		background-color: ${ COLORS.theme.accent };
 		color: ${ COLORS.white };
 	}