From de542b78edf78c884019429582402b909f0b0691 Mon Sep 17 00:00:00 2001
From: seonghobae <8172694+seonghobae@users.noreply.github.com>
Date: Thu, 6 Aug 2026 21:44:56 +0000
Subject: [PATCH] =?UTF-8?q?=F0=9F=8E=A8=20Palette:=20[UX=20improvement]=20?=
 =?UTF-8?q?=EC=BB=A4=EC=8A=A4=ED=85=80=20=EB=9D=BC=EB=94=94=EC=98=A4=20?=
 =?UTF-8?q?=EA=B7=B8=EB=A3=B9=20=EC=A0=91=EA=B7=BC=EC=84=B1=20=EA=B0=9C?=
 =?UTF-8?q?=EC=84=A0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

💡 What: `GroupModal`의 색상 선택 스와치 버튼들에 `role="radio"`와 `aria-checked` 속성을 추가하고, 이에 맞춰 CSS 선택자와 테스트 쿼리를 업데이트했습니다.
🎯 Why: `role="radiogroup"` 내부에 위치한 요소들이 제네릭 버튼(`role="button"`)과 `aria-pressed`를 사용하고 있어 스크린 리더와 같은 보조 기기에서 올바른 라디오 버튼 그룹으로 인식되지 않는 문제가 있었습니다.
📸 Before/After: 시각적 변경 없음.
♿ Accessibility: 라디오 그룹 내 자식 요소들의 역할을 명확히 하여 접근성 트리 구조를 올바르게 수정했습니다.
---
 .Jules/palette.md                                     | 4 ++++
 frontend/src/components/modals/GroupModal.tsx         | 3 ++-
 frontend/src/components/modals/ModalCoverage.test.tsx | 2 +-
 frontend/src/styles.css                               | 2 +-
 4 files changed, 8 insertions(+), 3 deletions(-)

diff --git a/.Jules/palette.md b/.Jules/palette.md
index 7577a1ca7..6eaa2bf9c 100644
--- a/.Jules/palette.md
+++ b/.Jules/palette.md
@@ -56,3 +56,7 @@
 ## 2024-07-14 - Native Keyboard Submission with Forms for Modals
 **Learning:** Modals designed with plain `<div>` elements as wrappers instead of `<form>` lack native keyboard submission support, forcing users to switch from keyboard to mouse to confirm actions like "Save".
 **Action:** When designing modals or popups containing inputs, always use a `<form>` element to wrap the content, handle the `onSubmit` event (calling `e.preventDefault()`), and set the primary confirmation button to `type="submit"` to enable seamless Enter-key submission for keyboard users.
+
+## 2024-08-06 - [radiogroup 역할에 대한 올바른 자식 역할 부여]
+**Learning:** `role="radiogroup"`을 사용하여 커스텀 라디오 그룹(예: 색상 선택 스와치)을 만들 때, 자식 요소들은 `role="radio"`와 `aria-checked`를 명시적으로 사용해야 합니다. 기존처럼 제네릭 버튼에 `aria-pressed`를 사용하면 역할 구조가 일치하지 않아 접근성이 저하됩니다.
+**Action:** 관련된 React Testing Library 쿼리도 'button' 역할 대신 '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 그룹 삭제' }))
diff --git a/frontend/src/styles.css b/frontend/src/styles.css
index 3605ce9fb..49a5747a9 100644
--- a/frontend/src/styles.css
+++ b/frontend/src/styles.css
@@ -943,7 +943,7 @@ button:disabled {
   box-shadow: 0 0 0 1px var(--color-border);
 }
 
-.groupManager__swatch[aria-pressed="true"] {
+.groupManager__swatch[aria-checked="true"] {
   box-shadow: 0 0 0 3px var(--color-text-strong);
 }