🎨 Palette: [접근성] 업무 그룹 색상 선택기의 radiogroup 접근성 개선

.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.

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)}

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: '' } })