Skip to content

🎨 Palette: λΉ„μƒν˜Έμž‘μš© μš”μ†Œμ˜ 툴팁 μ ‘κ·Όμ„± κ°œμ„  #584

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: λΉ„μƒν˜Έμž‘μš© μš”μ†Œμ˜ 툴팁 μ ‘κ·Όμ„± κ°œμ„  #584

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-22 - λΉ„μƒν˜Έμž‘μš© μš”μ†Œ 툴팁 μ ‘κ·Όμ„±
**Learning:** divλ‚˜ span 같은 λΉ„μƒν˜Έμž‘μš© μš”μ†Œμ— title μ†μ„±λ§Œ μ œκ³΅ν•˜λ©΄ ν‚€λ³΄λ“œλ‚˜ 슀크린 리더 μ‚¬μš©μžκ°€ 툴팁 정보에 μ ‘κ·Όν•  수 μ—†μŠ΅λ‹ˆλ‹€. 이 λ•Œ λ‹¨μˆœνžˆ tabindex="0"만 μΆ”κ°€ν•˜λŠ” 것은 μ ‘κ·Όμ„± μ•ˆν‹°νŒ¨ν„΄μž…λ‹ˆλ‹€.
**Action:** νˆ΄νŒμ„ μ œκ³΅ν•˜λŠ” λΉ„μƒν˜Έμž‘μš© μš”μ†Œμ—λŠ” λ°˜λ“œμ‹œ tabindex="0"κ³Ό μ μ ˆν•œ ARIA role(예: role="note")을 ν•¨κ»˜ λΆ€μ—¬ν•˜κ³ , ν‚€λ³΄λ“œ 탐색을 μœ„ν•œ :focus-visible μŠ€νƒ€μΌμ„ μΆ”κ°€ν•΄μ•Ό ν•©λ‹ˆλ‹€.
2 changes: 2 additions & 0 deletions app.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -999,6 +999,8 @@ function createStatusCellContent(progressState) {
if (progressState.description) {
badge.title = progressState.description;
badge.setAttribute('aria-label', `${progressState.label} - ${progressState.description}`);
badge.tabIndex = 0;
badge.setAttribute('role', 'note');
Comment on lines +1002 to +1003

@devin-ai-integration devin-ai-integration Bot Aug 22, 2026

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

πŸ“ Info: Status badges add a focus stop per row

Each .status-badge with a description now gets tabIndex = 0 (app.js), adding one keyboard tab stop per table row. In dense tables this lengthens keyboard traversal noticeably. It matches the documented palette.md convention, so it appears intentional.

Open in Devin Review

Was this helpful? React with πŸ‘ or πŸ‘Ž to provide feedback.

}
return badge;
}
Expand Down
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
4 changes: 3 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,9 @@ button {
.secondary-button:focus-visible,
input:focus-visible,
select:focus-visible,
.gantt-bar:focus-visible {
.gantt-bar:focus-visible,
.meta-value-card:focus-visible,
.status-badge:focus-visible {
outline: 3px solid rgba(37, 99, 235, 0.5);
outline-offset: 2px;
}
Expand Down
Loading