Skip to content

🎨 Palette: ν† μŠ€νŠΈ μ•Œλ¦Ό 및 μƒνƒœ λ©”μ‹œμ§€ μ ‘κ·Όμ„± κ°œμ„  #532

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
seonghobae wants to merge 1 commit into from
Closed

🎨 Palette: ν† μŠ€νŠΈ μ•Œλ¦Ό 및 μƒνƒœ λ©”μ‹œμ§€ μ ‘κ·Όμ„± κ°œμ„  #532

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 3 additions & 0 deletions .jules/palette.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -115,3 +115,6 @@
## $(date +%Y-%m-%d) - 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-08-16 - Add role="status" and aria-atomic="true" to dynamic status messages
**Learning:** Toast notifications and dynamic status text using only `aria-live="polite"` might not be reliably announced in full by all screen readers when the text changes. Adding `role="status"` and `aria-atomic="true"` ensures that assistive technologies understand the element's purpose and announce the complete updated content, not just the changed portion.
**Action:** Always include `role="status"` and `aria-atomic="true"` alongside `aria-live="polite"` when implementing toast notifications or dynamic status messages.
4 changes: 2 additions & 2 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -44,7 +44,7 @@ <h1>ScopeWeave Planner</h1>
<strong data-testid="summary-actual-progress" id="summary-actual-progress">0.00%</strong>
</div>
<div class="sync-panel">
<span id="sync-status" aria-live="polite" aria-atomic="true">λΈŒλΌμš°μ € 둜컬 μžλ™μ €μž₯ μ‚¬μš© 쀑</span>
<span id="sync-status" role="status" aria-live="polite" aria-atomic="true">λΈŒλΌμš°μ € 둜컬 μžλ™μ €μž₯ μ‚¬μš© 쀑</span>
<button id="connect-json-sync" type="button" class="secondary-button">wbs.json μžλ™μ €μž₯ μ—°κ²°</button>
</div>
</div>
Expand Down Expand Up @@ -95,7 +95,7 @@ <h1>ScopeWeave Planner</h1>

<input id="csv-file-input" type="file" accept=".csv,text/csv" hidden />

<div id="toast" class="toast" aria-live="polite"></div>
<div id="toast" class="toast" role="status" aria-live="polite" aria-atomic="true"></div>

<div id="gantt-modal" class="modal hidden" role="dialog" aria-modal="true" aria-labelledby="gantt-title" tabindex="-1">
<div class="modal-backdrop" data-close-modal="true"></div>
Expand Down
Loading