🎨 Palette: aria-disabled 속성을 활용한 저장 버튼 접근성 개선 및 안전한 폼 제출 보호

.jules/palette.md

@@ -108,10 +108,14 @@
 **Learning:** [When an element is removed from the DOM, focus naturally resets to the document body, breaking the keyboard navigation flow. It is critical to calculate the next logical focus target prior to deletion and programmatically restore focus post-render.]
 **Action:** [In future components involving item deletion within lists or tables, proactively incorporate index calculations before removing items to manage focus restoration correctly.]
 
-## $(date +%Y-%m-%d) - Add Confirmation Dialog for CSV Import
+## 2026-07-28 - Add Confirmation Dialog for CSV Import
 **Learning:** File import actions that completely overwrite existing application state can lead to severe data loss if triggered accidentally. In a WBS planner where users invest significant time building task hierarchies, destructive imports need explicit user confirmation.
 **Action:** Always add a confirmation dialog (`window.confirm` or custom modal) for any import or sync action that wipes out the current in-memory or persisted state, especially when there's no undo mechanism.
 
-## $(date +%Y-%m-%d) - Prevent accidental data loss in inline editors
+## 2026-07-28 - Prevent accidental data loss in inline editors
 **Learning:** Forms that take a long time to fill out (like a WBS editor) are prone to accidental closure by users pressing `Escape` or clicking cancel. This causes immediate data loss without any warning, resulting in frustration.
 **Action:** When working on editors that can be dismissed, track whether the user has modified any fields compared to their initial state. If there are changes, intercept the close action and present a confirmation dialog (`window.confirm`) to ensure they really want to discard their edits. Bypass this for intentional saves or explicit data overrides.
+
+## 2026-07-28 - Replace disabled with aria-disabled on submit buttons
+**Learning:** Native `disabled` attributes on submit buttons prevent focus and block clicks for keyboard and screen-reader users, making the reason for the disabled state inaccessible. However, replacing it with `aria-disabled="true"` will cause the button to trigger native form submission.
+**Action:** When replacing `disabled` with `aria-disabled="true"` on a submit button, ensure the form's `submit` event listener explicitly checks for the `aria-disabled` attribute and calls `event.preventDefault()` to block unintended execution.

app.js

@@ -408,6 +408,13 @@ function bindTableEvents(renderDraftValidation, updateEditorDraftFromEvent) {
       return;
     }
     event.preventDefault();
+
+    const submitBtn = form.querySelector('button[type="submit"]');
+    if (submitBtn && submitBtn.getAttribute('aria-disabled') === 'true') {
+      showToast(submitBtn.title || '현재 사용할 수 없는 기능입니다.');
+      return;
+    }
+
     renderDraftValidation.flush();
     saveEditor();
   });
@@ -1047,7 +1054,11 @@ function renderEditorValidation() {
 
   const saveButton = form.querySelector('button[type="submit"]');
   if (saveButton) {
-    saveButton.disabled = errors.length > 0;
+    if (errors.length > 0) {
+      saveButton.setAttribute('aria-disabled', 'true');
+    } else {
+      saveButton.removeAttribute('aria-disabled');
+    }
     saveButton.title = errors.length > 0 ? '입력값을 올바르게 수정해야 저장할 수 있습니다.' : '저장 (Enter)';
   }
 

patch_spec.cjs

@@ -0,0 +1,5 @@
+const fs = require('fs');
+let content = fs.readFileSync('tests/e2e/scopeweave.spec.js', 'utf8');
+content = content.replace('});\n});\n\n  test(\'ScopeWeave Planner - Palette UX Enhancements - blocks form submission when save button is aria-disabled\'', '  test(\'ScopeWeave Planner - Palette UX Enhancements - blocks form submission when save button is aria-disabled\'');
+content += '});\n';
+fs.writeFileSync('tests/e2e/scopeweave.spec.js', content);

tests/e2e/scopeweave.spec.js

@@ -1333,4 +1333,53 @@ test.describe('ScopeWeave Planner - Palette UX Enhancements', () => {
     await expect(backBtn).toHaveAttribute('title', '작업 목록으로 돌아가기 (Esc)');
     await expect(backBtn).toHaveAttribute('aria-keyshortcuts', 'Escape');
   });
+  test('ScopeWeave Planner - Palette UX Enhancements - blocks form submission when save button is aria-disabled', async ({ page }) => {
+  // Inject seed data to edit
+  await page.evaluate(() => {
+    localStorage.setItem('scopeweave:planner-state:v1', JSON.stringify({
+      projectName: 'ScopeWeave Planner',
+      baseDate: '2026-07-10',
+      tasks: [{
+        id: 'task-1',
+        phase: 'P1',
+        depth: 1,
+        expanded: true
+      }]
+    }));
+  });
+  await page.reload();
+
+  // Open editor for the task
+  await page.locator('tr[data-task-id="task-1"] [data-action="edit"]').click();
+
+  // Clear the required phase field to trigger validation errors
+  const phaseInput = page.locator('[data-testid="editor-phase"]');
+  await phaseInput.fill('');
+
+  // Wait for the save button to become aria-disabled
+  const saveBtn = page.locator('.editor-actions button[type="submit"]');
+  await expect(saveBtn).toHaveAttribute('aria-disabled', 'true');
+
+  // Ensure form is visible
+  const form = page.locator('form[data-editor-form="true"]');
+  await expect(form).toBeVisible();
+
+  // Click the submit button
+  await saveBtn.click();
+
+  // Check that toast shows the error message
+  const toast = page.locator('#toast');
+  await expect(toast).toContainText('입력값을 올바르게 수정해야 저장할 수 있습니다.');
+
+  // Form should still be visible because submission was prevented
+  await expect(form).toBeVisible();
+
+  // Fill it back and save to ensure normal submission works
+  await phaseInput.fill('Valid Phase');
+  await expect(saveBtn).not.toHaveAttribute('aria-disabled', 'true');
+  await saveBtn.click();
+
+  // Editor should close
+  await expect(form).not.toBeVisible();
+  });
 });