From c6314dad1b98399bad1318dfefab6d6d926704c3 Mon Sep 17 00:00:00 2001
From: seonghobae <8172694+seonghobae@users.noreply.github.com>
Date: Mon, 6 Jul 2026 14:05:42 +0000
Subject: [PATCH] =?UTF-8?q?=F0=9F=8E=A8=20Palette:=20Add=20Table=20Modal?=
 =?UTF-8?q?=EC=97=90=20=ED=95=84=EC=88=98=20=ED=91=9C=EC=8B=9C=20=EB=B0=8F?=
 =?UTF-8?q?=20=EC=A0=91=EA=B7=BC=EC=84=B1=20=EA=B0=9C=EC=84=A0=20=EC=B6=94?=
 =?UTF-8?q?=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

AddTableModal에서 '테이블 이름' 라벨에 시각적인 필수 입력 별표(*)를 추가하고, 스크린 리더용 '(필수)' 텍스트를 aria-hidden 속성과 함께 결합하여 접근성을 높였습니다. 또한 입력값이 없을 때 저장 버튼이 비활성화되는 이유를 설명하는 힌트 텍스트를 추가하고, aria-describedby를 통해 스크린 리더와 연결했습니다. 이로 인해 변경된 돔 구조에 맞추어 관련 유닛 테스트도 업데이트되었습니다.
---
 .jules/palette.md                                   |  3 +++
 frontend/src/components/modals/AddTableModal.tsx    | 13 ++++++++++++-
 .../components/modals/DialogAccessibility.test.tsx  |  2 +-
 3 files changed, 16 insertions(+), 2 deletions(-)

diff --git a/.jules/palette.md b/.jules/palette.md
index 32fb11be..f653db3d 100644
--- a/.jules/palette.md
+++ b/.jules/palette.md
@@ -43,3 +43,6 @@
 ## 2024-06-26 - [Abbreviation Comprehension in ERD Nodes]
 **Learning:** Users without deep database administration backgrounds may not immediately recognize domain-specific abbreviations like "PK" or "FK" rendered as minimalist badges inside dense ERD nodes.
 **Action:** Always provide `title` attributes on technical acronym badges (like Primary Key / Foreign Key) to ensure clarity and improve accessibility without cluttering the space-constrained node UI.
+## 2024-07-06 - Accessible Required Indicators and Disabled Button Helper Text
+**Learning:** When using functional forms, adding a visual required indicator (`*`) isn't fully accessible on its own. It should be wrapped in an `aria-hidden="true"` span with a screen-reader-only text (e.g. `(필수)`) to ensure screen readers announce it explicitly. Furthermore, when a submit button is disabled due to invalid/empty inputs, purely disabling the button can leave users (and screen reader users) confused. Providing a visible helper text conditionally and linking it to the disabled button (and the input) using `aria-describedby` provides a much clearer, accessible explanation of why the action is disabled.
+**Action:** Always pair visual required indicators with screen-reader-only labels. For dynamically disabled primary buttons, always display helper text explaining the requirement and link it to the relevant input and button using `aria-describedby`.
diff --git a/frontend/src/components/modals/AddTableModal.tsx b/frontend/src/components/modals/AddTableModal.tsx
index 024bde03..4720b3a2 100644
--- a/frontend/src/components/modals/AddTableModal.tsx
+++ b/frontend/src/components/modals/AddTableModal.tsx
@@ -61,7 +61,11 @@ export function AddTableModal({
       >
         <h3 id="add-table-title">테이블 추가</h3>
         <div className="field">
-          <label htmlFor="new-table-name">테이블 이름</label>
+          <label htmlFor="new-table-name">
+            테이블 이름
+            <span aria-hidden="true" style={{ color: "#ef4444", marginLeft: "4px" }}>*</span>
+            <span className="srOnly"> (필수)</span>
+          </label>
           <input
             id="new-table-name"
             value={newTableName}
@@ -69,8 +73,14 @@ export function AddTableModal({
             placeholder="users"
             autoFocus
             required
+            aria-describedby={!newTableName.trim() ? "add-table-disabled-hint" : undefined}
           />
         </div>
+        {!newTableName.trim() && (
+          <span id="add-table-disabled-hint" className="field-hint">
+            테이블 이름을 입력해야 저장할 수 있습니다.
+          </span>
+        )}
         <div
           className="row"
           style={{ justifyContent: "flex-end", marginTop: 8 }}
@@ -79,6 +89,7 @@ export function AddTableModal({
           <button
             type="submit"
             disabled={!newTableName.trim()}
+            aria-describedby={!newTableName.trim() ? "add-table-disabled-hint" : undefined}
             style={
               newTableName.trim()
                 ? { background: "#034ea2", color: "#fff" }
diff --git a/frontend/src/components/modals/DialogAccessibility.test.tsx b/frontend/src/components/modals/DialogAccessibility.test.tsx
index e74ae5d7..380eb718 100644
--- a/frontend/src/components/modals/DialogAccessibility.test.tsx
+++ b/frontend/src/components/modals/DialogAccessibility.test.tsx
@@ -72,7 +72,7 @@ describe('modal dialog accessibility', () => {
       />,
     );
 
-    const tableNameInput = screen.getByLabelText('테이블 이름');
+    const tableNameInput = screen.getByLabelText(/테이블 이름/);
     const saveButton = screen.getByRole('button', { name: '저장' });
 
     await waitFor(() => expect(tableNameInput).toHaveFocus());