Skip to content

🎨 Palette: ν‚€λ³΄λ“œ μ ‘κ·Όμ„± κ°œμ„  (λΉ„λŒ€ν™”ν˜• μš”μ†Œ 툴팁) #813

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

Open
seonghobae wants to merge 1 commit into
base: develop
Choose a base branch
from
Open

🎨 Palette: ν‚€λ³΄λ“œ μ ‘κ·Όμ„± κ°œμ„  (λΉ„λŒ€ν™”ν˜• μš”μ†Œ 툴팁) #813

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-10-10 - Make non-interactive tooltips keyboard accessible
**Learning:** Tooltips on non-interactive elements like div must have both tabindex=0 and a semantic ARIA role (like role=note) to be accessible to screen readers, along with focus-visible styles.
**Action:** Add tabindex=0 and role=note to elements with title attributes, and ensure they have a visible focus outline.
6 changes: 3 additions & 3 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,18 +29,18 @@ <h1>ScopeWeave Planner</h1>
<span>기쀀일</span>
<input data-testid="base-date-input" id="base-date" type="date" />
</label>
<div class="meta-value-card" title="ν”„λ‘œμ νŠΈμ˜ μž‘μ—… κΈ°κ°„(일수) ν•©κ³„μž…λ‹ˆλ‹€.">
<div class="meta-value-card" title="ν”„λ‘œμ νŠΈμ˜ μž‘μ—… κΈ°κ°„(일수) ν•©κ³„μž…λ‹ˆλ‹€." tabindex="0" role="note">
<span class="meta-label">μ „μ²΄μΌμˆ˜</span>
<strong data-testid="summary-total-days" id="summary-total-days">0일</strong>
</div>
</div>

<div class="meta-grid meta-grid-secondary">
<div class="meta-value-card accent-card plan-card" title="κΈ°κ°„(일수) κ°€μ€‘μΉ˜κ°€ 반영된 ν”„λ‘œμ νŠΈ 전체 κ³„νš 진척λ₯ μž…λ‹ˆλ‹€.">
<div class="meta-value-card accent-card plan-card" title="κΈ°κ°„(일수) κ°€μ€‘μΉ˜κ°€ 반영된 ν”„λ‘œμ νŠΈ 전체 κ³„νš 진척λ₯ μž…λ‹ˆλ‹€." tabindex="0" role="note">
<span class="meta-label">κ³„νšμ§„μ²™λ₯ (λˆ„μ )</span>
<strong data-testid="summary-planned-progress" id="summary-planned-progress">0.00%</strong>
</div>
<div class="meta-value-card accent-card actual-card" title="κΈ°κ°„(일수) κ°€μ€‘μΉ˜κ°€ 반영된 ν”„λ‘œμ νŠΈ 전체 싀적 진척λ₯ μž…λ‹ˆλ‹€.">
<div class="meta-value-card accent-card actual-card" title="κΈ°κ°„(일수) κ°€μ€‘μΉ˜κ°€ 반영된 ν”„λ‘œμ νŠΈ 전체 싀적 진척λ₯ μž…λ‹ˆλ‹€." tabindex="0" role="note">
<span class="meta-label">싀적진척λ₯ (λˆ„μ )</span>
<strong data-testid="summary-actual-progress" id="summary-actual-progress">0.00%</strong>
</div>
Expand Down
3 changes: 2 additions & 1 deletion styles.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -360,7 +360,8 @@ button {
.secondary-button:focus-visible,
input:focus-visible,
select:focus-visible,
.gantt-bar:focus-visible {
.gantt-bar:focus-visible,
.meta-value-card:focus-visible {
outline: 3px solid rgba(37, 99, 235, 0.5);
outline-offset: 2px;
}
Expand Down
Loading