From 6e500f489871a84ad7c2c6285657c3cc01001135 Mon Sep 17 00:00:00 2001
From: Seongho Bae <seongho@kw.ac.kr>
Date: Sat, 11 Jul 2026 09:06:36 +0900
Subject: [PATCH] feat(ux): add modal form aria labels

---
 .jules/palette.md                                   | 3 +++
 frontend/src/components/modals/CardinalityModal.tsx | 2 ++
 frontend/src/components/modals/GroupModal.tsx       | 1 +
 3 files changed, 6 insertions(+)

diff --git a/.jules/palette.md b/.jules/palette.md
index 4fa55f04..8b8545b6 100644
--- a/.jules/palette.md
+++ b/.jules/palette.md
@@ -46,3 +46,6 @@
 ## 2026-07-05 - Accessible Disabled Buttons
 **Learning:** Adding `aria-describedby` to disabled buttons and explicitly linking them to visible helper text elements allows screen readers to announce the reason for being disabled, significantly improving accessibility for interactive elements that depend on prior state (like selecting a project).
 **Action:** Always pair disabled interactive elements with visible helper text and use `aria-describedby` to semantically link them, ensuring the context is available to assistive technologies.
+## 2026-07-08 - Table-based Form Accessibility
+**Learning:** Table-based form inputs and selects tied to row identities often lack explicit context for screen readers when they don't have a dedicated label element.
+**Action:** Always provide explicit `aria-label`s on inputs and selects inside table lists to give screen readers full context about what the element modifies.
diff --git a/frontend/src/components/modals/CardinalityModal.tsx b/frontend/src/components/modals/CardinalityModal.tsx
index 8d360537..384c4740 100644
--- a/frontend/src/components/modals/CardinalityModal.tsx
+++ b/frontend/src/components/modals/CardinalityModal.tsx
@@ -161,6 +161,7 @@ export function CardinalityModal({
                     </td>
                     <td>
                       <input
+                        aria-label={`${column.column_name} distinct count`}
                         id={inputId}
                         inputMode="numeric"
                         min="1"
@@ -225,6 +226,7 @@ export function CardinalityModal({
                   onClick={() =>
                     onApplyCardinalityRecommendation(recommendation)
                   }
+                  aria-label={`${recommendation.index_name} 추천 ${isApplied ? "적용됨" : "적용"}`}
                 >
                   {isApplied ? "적용됨" : "적용"}
                 </button>
diff --git a/frontend/src/components/modals/GroupModal.tsx b/frontend/src/components/modals/GroupModal.tsx
index 66199beb..58ab46d8 100644
--- a/frontend/src/components/modals/GroupModal.tsx
+++ b/frontend/src/components/modals/GroupModal.tsx
@@ -131,6 +131,7 @@ export function GroupModal({
                   {node.data.title}
                 </span>
                 <select
+                  aria-label={`${node.data.title} 업무 그룹 배정`}
                   value={node.data.businessGroup?.id ?? ""}
                   onChange={(event) =>
                     onAssignBusinessGroup(node.id, event.target.value)