From 2cd1b71e118d7c51b14510f76dbc3e30d6d4b36b Mon Sep 17 00:00:00 2001
From: seonghobae <8172694+seonghobae@users.noreply.github.com>
Date: Wed, 29 Jul 2026 21:28:10 +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=EC=97=85=EB=AC=B4=20=EA=B7=B8=EB=A3=B9=20?=
 =?UTF-8?q?=EC=83=89=EC=83=81=20=EC=84=A0=ED=83=9D=EA=B8=B0=EC=9D=98=20rad?=
 =?UTF-8?q?iogroup=20=EC=A0=91=EA=B7=BC=EC=84=B1=20=EA=B0=9C=EC=84=A0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- `GroupModal.tsx`의 색상 선택기(swatch) 버튼들이 `<div role="radiogroup">` 내부에 위치함에도 불구하고 `aria-pressed`를 사용하던 문제를 수정했습니다.
- 하위 버튼에 `role="radio"`와 `aria-checked` 속성을 명시하여 스크린 리더에서 라디오 버튼으로 올바르게 인식되도록 수정했습니다.
- 변경된 접근성 속성에 맞춰 `ModalCoverage.test.tsx`의 쿼리를 `getAllByRole('radio', ...)`로 업데이트하여 테스트 통과를 보장했습니다.
---
 .Jules/palette.md                                     | 3 +++
 frontend/src/components/modals/GroupModal.tsx         | 3 ++-
 frontend/src/components/modals/ModalCoverage.test.tsx | 2 +-
 3 files changed, 6 insertions(+), 2 deletions(-)

diff --git a/.Jules/palette.md b/.Jules/palette.md
index 7577a1ca..ed580474 100644
--- a/.Jules/palette.md
+++ b/.Jules/palette.md
@@ -56,3 +56,6 @@
 ## 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-05-18 - Color Swatch Radiogroup Accessibility
+**Learning:** Using a custom color swatch component with `role="radiogroup"` requires its children to use `role="radio"` and `aria-checked` rather than generic buttons with `aria-pressed`. `aria-pressed` inside a radiogroup creates a mismatched role structure that confuses screen readers.
+**Action:** When building custom radio groups (like color swatches), always ensure the children explicitly use `role="radio"` and `aria-checked` to perfectly simulate native radio button semantics.
diff --git a/frontend/src/components/modals/GroupModal.tsx b/frontend/src/components/modals/GroupModal.tsx
index 6db512a8..9c78a301 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 aa9dac53..1deafcab 100644
--- a/frontend/src/components/modals/ModalCoverage.test.tsx
+++ b/frontend/src/components/modals/ModalCoverage.test.tsx
@@ -260,7 +260,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: '추가' }))
     fireEvent.click(screen.getByRole('button', { name: 'Billing 그룹 삭제' }))
     fireEvent.change(screen.getByRole('combobox'), { target: { value: '' } })