From af8e3561132fc17752a54d5308e522ac20eb482f Mon Sep 17 00:00:00 2001
From: seonghobae <8172694+seonghobae@users.noreply.github.com>
Date: Fri, 14 Aug 2026 21:28:17 +0000
Subject: [PATCH] =?UTF-8?q?=F0=9F=8E=A8=20Palette:=20[=EC=A0=91=EA=B7=BC?=
 =?UTF-8?q?=EC=84=B1]=20=EA=B7=B8=EB=A3=B9=20=EC=83=89=EC=83=81=20?=
 =?UTF-8?q?=EC=84=A0=ED=83=9D=EA=B8=B0=EC=9D=98=20radio=20role=20=EB=B6=80?=
 =?UTF-8?q?=EC=97=AC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

💡 What: `GroupModal.tsx` 내 색상 선택 버튼들에 명시적인 `role="radio"`와 `aria-checked`를 추가하였습니다.
🎯 Why: `role="radiogroup"` 내부 요소가 일반 버튼(`role="button"`, `aria-pressed`)으로 사용되어 발생할 수 있는 스크린 리더 등 보조 기기의 구조적 해석 오류를 방지하기 위함입니다.
♿ Accessibility: 커스텀 라디오 그룹의 자식 요소 역할을 `radio`로 명확히 하여 키보드 및 스크린 리더 접근성을 개선했습니다.
---
 .jules/palette.md                                     | 4 ++++
 frontend/src/components/modals/GroupModal.tsx         | 3 ++-
 frontend/src/components/modals/ModalCoverage.test.tsx | 2 +-
 3 files changed, 7 insertions(+), 2 deletions(-)

diff --git a/.jules/palette.md b/.jules/palette.md
index bd0f73248..426bea594 100644
--- a/.jules/palette.md
+++ b/.jules/palette.md
@@ -57,3 +57,7 @@
 ## 2026-07-30 - Add window.confirm for destructive actions
 **Learning:** Destructive actions like deleting groups and edge relationships previously occurred immediately without user confirmation.
 **Action:** Always wrap delete operations with window.confirm() dialogs and ensure corresponding tests successfully mock window.confirm.
+
+## 2024-08-14 - Custom Radio Group Accessibility
+**Learning:** 커스텀 `role="radiogroup"`을 만들 때, 하위 요소가 일반 버튼이라도 `aria-pressed` 대신 명시적으로 `role="radio"`와 `aria-checked`를 사용해야 구조적 불일치로 인한 접근성 오류를 방지할 수 있습니다.
+**Action:** 색상 선택기와 같은 커스텀 라디오 그룹 컴포넌트를 개발하거나 수정할 때, 하위 버튼의 역할을 반드시 `radio`로 지정하고 상태를 `aria-checked`로 표시하도록 합니다. 관련된 테스트 코드 역시 `role="button"` 대신 `role="radio"`를 찾도록 수정해야 합니다.
diff --git a/frontend/src/components/modals/GroupModal.tsx b/frontend/src/components/modals/GroupModal.tsx
index bd96c21b1..e68be5c79 100644
--- a/frontend/src/components/modals/GroupModal.tsx
+++ b/frontend/src/components/modals/GroupModal.tsx
@@ -75,8 +75,9 @@ export function GroupModal({
             {BUSINESS_GROUP_COLORS.map((color) => (
               <button
                 type="button"
+                role="radio"
                 aria-label={`색상 ${color}`}
-                aria-pressed={newGroupColor === color}
+                aria-checked={newGroupColor === color}
                 className="groupManager__swatch"
                 key={color}
                 onClick={() => setNewGroupColor(color)}
diff --git a/frontend/src/components/modals/ModalCoverage.test.tsx b/frontend/src/components/modals/ModalCoverage.test.tsx
index 8732f7efa..90d327ad9 100644
--- a/frontend/src/components/modals/ModalCoverage.test.tsx
+++ b/frontend/src/components/modals/ModalCoverage.test.tsx
@@ -262,7 +262,7 @@ describe('modal behavior coverage', () => {
       />,
     )
     fireEvent.change(screen.getByLabelText('그룹 이름'), { target: { value: 'New' } })
-    fireEvent.click(screen.getAllByRole('button', { name: /^색상 / })[1]!)
+    fireEvent.click(screen.getAllByRole('radio', { name: /^색상 / })[1]!)
     fireEvent.click(screen.getByRole('button', { name: '추가' }))
     vi.spyOn(window, 'confirm').mockReturnValueOnce(true)
     fireEvent.click(screen.getByRole('button', { name: 'Billing 그룹 삭제' }))