🎨 Palette: [UX improvement] Add required indicator and disabled button helper text to Add Table modal

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

frontend/src/components/modals/AddTableModal.tsx

@@ -61,16 +61,26 @@ 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}
             onChange={(e) => setNewTableName(e.target.value)}
             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" }

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());