From fe0d621981ecdcdd28a744f87bacc9d608a58f45 Mon Sep 17 00:00:00 2001
From: David Cho-Lerat <david.cho-lerat@sonarsource.com>
Date: Fri, 25 Sep 2026 16:41:14 +0200
Subject: [PATCH] ECHOES-1284 A11y: Combined primary buttons use a low-contrast
 focus indicatorA11y: Render the focus ring outside combined primary buttons

---
 src/components/buttons/ButtonGroup.tsx        |  4 +-
 .../buttons/__tests__/ButtonGroup-test.tsx    | 42 ++++++++++++++++++-
 2 files changed, 43 insertions(+), 3 deletions(-)

diff --git a/src/components/buttons/ButtonGroup.tsx b/src/components/buttons/ButtonGroup.tsx
index 1e126bd02..f465bf363 100644
--- a/src/components/buttons/ButtonGroup.tsx
+++ b/src/components/buttons/ButtonGroup.tsx
@@ -72,12 +72,12 @@ const StyledButtonGroup = styled.span`
 StyledButtonGroup.displayName = 'StyledButtonGroup';
 
 const StyledCombinedButtonGroup = styled(StyledButtonGroup)`
+  isolation: isolate;
   gap: 0;
 
   & ${ButtonStyled}, ${ButtonIconStyled} {
-    :focus,
     :focus-visible {
-      outline-offset: -2px;
+      z-index: 1;
     }
 
     :first-of-type {
diff --git a/src/components/buttons/__tests__/ButtonGroup-test.tsx b/src/components/buttons/__tests__/ButtonGroup-test.tsx
index c25a0d69d..588a699f3 100644
--- a/src/components/buttons/__tests__/ButtonGroup-test.tsx
+++ b/src/components/buttons/__tests__/ButtonGroup-test.tsx
@@ -18,11 +18,16 @@
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
 
+import { matchers } from '@emotion/jest';
 import { render } from '~common/helpers/test-utils';
-import { Button, ButtonGroup } from '..';
+import { IconMoreVertical } from '../../icons';
+import { Button, ButtonGroup, ButtonIcon, ButtonVariety } from '..';
+import { ButtonIconStyled, ButtonStyled } from '../ButtonStyles';
 
 import { cssVar } from '~utils/design-tokens';
 
+expect.extend(matchers);
+
 const buttons = (
   <>
     <Button>First</Button>
@@ -53,3 +58,38 @@ it('should combine the buttons', () => {
 
   expect(buttonGroup).toHaveStyle('gap: 0');
 });
+
+it('should keep the default focus ring offset and elevate focused combined buttons', () => {
+  const { container } = render(
+    <ButtonGroup className="__test__" isCombined>
+      <Button variety={ButtonVariety.Primary}>Primary action</Button>
+
+      <ButtonIcon
+        Icon={IconMoreVertical}
+        ariaLabel="More actions"
+        variety={ButtonVariety.Primary}
+      />
+    </ButtonGroup>,
+  );
+
+  // eslint-disable-next-line testing-library/no-container
+  const buttonGroup = container.getElementsByClassName('__test__')[0];
+
+  expect(buttonGroup).toHaveStyleRule('isolation', 'isolate');
+
+  expect(buttonGroup).toHaveStyleRule('z-index', '1', {
+    target: `${ButtonStyled}:focus-visible`,
+  });
+
+  expect(buttonGroup).not.toHaveStyleRule('outline-offset', '-2px', {
+    target: `${ButtonStyled}:focus-visible`,
+  });
+
+  expect(buttonGroup).toHaveStyleRule('z-index', '1', {
+    target: `${ButtonIconStyled}:focus-visible`,
+  });
+
+  expect(buttonGroup).not.toHaveStyleRule('outline-offset', '-2px', {
+    target: `${ButtonIconStyled}:focus-visible`,
+  });
+});