🎨 Palette: [UX improvement] Add accessible disabled states to submit buttons

.jules/palette.md

@@ -54,3 +54,6 @@
 ## 2024-07-13 - [Table Node Accessibility]
 **Learning:** Adding `aria-hidden="true"` inside `abbr` elements with `aria-label` prevents screen readers from redundantly announcing short abbreviations like "PK" or "NN" along with their full label.
 **Action:** When creating short, domain-specific abbreviations with tooltips, use `aria-label` on the wrapper and hide the visual text from screen readers using `aria-hidden="true"` to create a cleaner auditory experience.
+## 2024-05-18 - [Add aria-disabled and tooltip to disabled buttons]
+**Learning:** In React, replacing the native `disabled` attribute with `aria-disabled="true"` correctly announces the disabled state to screen readers and keeps the element focusable to display tooltips on hover/focus. However, unlike native `disabled`, `aria-disabled` does not block click events or form submissions. For form submit buttons, when the native `disabled` attribute is removed, pressing "Enter" in an input field will trigger a form submission.
+**Action:** When converting a button to use `aria-disabled`, you must explicitly intercept the click/submit action by adding an `onClick` handler that calls `e.preventDefault()` when the button is logically disabled (e.g., `onClick={(e) => { if (!isValid) e.preventDefault(); }}`).

frontend/src/components/modals/AddTableModal.tsx

@@ -78,11 +78,13 @@ export function AddTableModal({
           <button type="button" onClick={onAddTableCancel}>취소</button>
           <button
             type="submit"
-            disabled={!newTableName.trim()}
+            aria-disabled={!newTableName.trim()}
+            title={!newTableName.trim() ? "테이블 이름을 입력하세요" : undefined}
+            onClick={(e) => { if (!newTableName.trim()) e.preventDefault(); }}
             style={
-              newTableName.trim()
-                ? { background: "#034ea2", color: "#fff" }
-                : undefined
+              !newTableName.trim()
+                ? { opacity: 0.5, cursor: "not-allowed" }
+                : { background: "#034ea2", color: "#fff" }
             }
           >
             저장

frontend/src/components/modals/GroupModal.tsx

@@ -86,7 +86,10 @@ export function GroupModal({
           </div>
           <button
             type="submit"
-            disabled={!newGroupName.trim()}
+            aria-disabled={!newGroupName.trim()}
+            title={!newGroupName.trim() ? "그룹 이름을 입력하세요" : undefined}
+            onClick={(e) => { if (!newGroupName.trim()) e.preventDefault(); }}
+            style={!newGroupName.trim() ? { opacity: 0.5, cursor: "not-allowed" } : undefined}
           >
             추가
           </button>

frontend/src/components/modals/ModalCoverage.test.tsx

@@ -83,7 +83,7 @@ describe('modal behavior coverage', () => {
     )
     fireEvent.submit(screen.getByRole('dialog'))
     expect(onSubmit).toHaveBeenCalledOnce()
-    expect(screen.getByRole('button', { name: '저장' })).toBeEnabled()
+    expect(screen.getByRole('button', { name: '저장' })).toHaveAttribute('aria-disabled', 'false')
   })
 
   it('covers EditEdgeModal visibility and actions', () => {
@@ -242,7 +242,7 @@ describe('modal behavior coverage', () => {
       />,
     )
     expect(screen.getByText('등록된 그룹이 없습니다.')).toBeInTheDocument()
-    expect(screen.getByRole('button', { name: '추가' })).toBeDisabled()
+    expect(screen.getByRole('button', { name: '추가' })).toHaveAttribute('aria-disabled', 'true')
 
     rerender(
       <GroupModal