ECHOES-1284 A11y: Render the focus ring outside combined primary buttons

[david-cho-lerat-sonarsource]

---

Summary by Gitar

• Accessibility enhancements:
  • Render the focus ring outside combined primary buttons by adding isolation: isolate and z-index: 1 in ButtonGroup.tsx

_{This will update automatically on new commits.}

Visuals

Combined primary buttons, with the first button keyboard-focused.

Before echoes-react.netlify.app	After deploy-preview-778--echoes-react.netlify.app

[netlify]

✅ Deploy Preview for echoes-react ready!

Name	Link
🔨 Latest commit	fe0d621
🔍 Latest deploy log	https://app.netlify.com/projects/echoes-react/deploys/6ab689b8ece2f400088c4475
😎 Deploy Preview	https://deploy-preview-778--echoes-react.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.
🤖 Make changes	Run an agent on this branch

---

To edit notification comments on pull requests, go to your Netlify project configuration.

[hashicorp-vault-sonar-prod]

ECHOES-1284

[gitar-bot]

Code Review ✅ Approved

🟡 Medium risk · Combined primary buttons now layer visible focus rings above adjacent buttons.

Adds isolation: isolate and z-index: 1 styling to combined primary buttons in ButtonGroup.tsx to render the focus ring outside the button group, improving focus indicator visibility and contrast. No issues found.

Review coverage

🧪 Functional validation 2 of 2 objectives covered

📋 Rules No rules evaluated

Cross-repo inspection is incomplete. Unread code may contain additional impacts.

🤖 Auto-approval Not enabled · Set up

Implementation Status ✅ 2 of 2 objectives covered

✅ ECHOES-1284 - 2 of 2 objectives covered

This PR covers the rendering of the focus ring outside combined primary buttons and ensuring the focus indicator contrast.

✅ 2 covered here

• ✅ Render the focus ring outside combined primary buttons
• ✅ Ensure the focus indicator reaches at least 3:1 contrast against adjacent colors for combined primary buttons

Options

Auto-apply is off → Gitar will not commit updates to this branch.
Display: compact → Counting what did not apply, without listing it.

Comment with these commands to change the behavior for this request:

Auto-apply	Compact
gitar auto-apply:on	gitar display:verbose

_{Was this helpful? React with 👍 / 👎 | Gitar}

[sonarqube-next]

Quality Gate passed

Issues
0 New issues
0 Fixed issues
0 Accepted issues

Measures
0 Security Hotspots
0 Dependency risks
No data about Coverage
0.0% Duplication on New Code

See analysis details on SonarQube