From 8973924e340275834197c4f6aa72b8ab9aceb495 Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Tue, 30 Dec 2025 20:10:57 +0000
Subject: [PATCH 1/2] Initial plan


From a41d428448275eb2bb4330a35bcb0c16f7a3ba30 Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Tue, 30 Dec 2025 20:17:33 +0000
Subject: [PATCH 2/2] Add TODO comment to useLayoutEffect in ButtonBase.tsx

Co-authored-by: mattcosta7 <8616962+mattcosta7@users.noreply.github.com>
---
 packages/react/src/Button/ButtonBase.tsx | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/packages/react/src/Button/ButtonBase.tsx b/packages/react/src/Button/ButtonBase.tsx
index ec709328470..fa434e8933d 100644
--- a/packages/react/src/Button/ButtonBase.tsx
+++ b/packages/react/src/Button/ButtonBase.tsx
@@ -60,6 +60,11 @@ const ButtonBase = forwardRef(({children, as: Component = 'button', ...props}, f
   const ariaDescribedByIds = loading ? [loadingAnnouncementID, ariaDescribedBy] : [ariaDescribedBy]
 
   // Check if button contains a keyboard shortcut hint and add data attribute for styling
+  // TODO: This useLayoutEffect detects [data-kbd-chord] descendants to set data-has-kbd.
+  // This is a workaround because trailingVisual is opaque and we can't know at render time
+  // if it contains a KeybindingHint. Ideally, we'd have an explicit prop (e.g., hasKeybindingHint)
+  // that consumers set, eliminating the need for this runtime DOM query.
+  // See: https://github.com/primer/react/pull/7402
   React.useLayoutEffect(() => {
     if (innerRef.current) {
       const hasKbd = innerRef.current.querySelector('[data-kbd-chord]') !== null