Skip to content

🎨 Palette: ν‚€λ³΄λ“œ 접근성을 μœ„ν•œ 툴팁 포컀슀 κ°œμ„  #450

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 4 commits into from
Closed

🎨 Palette: ν‚€λ³΄λ“œ 접근성을 μœ„ν•œ 툴팁 포컀슀 κ°œμ„  #450

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
c854ddd
feat: add focus accessibility to tooltips on non-interactive elements
seonghobae Aug 7, 2026
9ccbc45
feat: add focus accessibility to tooltips on non-interactive elements
seonghobae Aug 7, 2026
6a20338
feat: add focus accessibility to tooltips on non-interactive elements
seonghobae Aug 7, 2026
3b40a66
feat: add focus accessibility to tooltips on non-interactive elements
seonghobae Aug 7, 2026
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
4 changes: 4 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,7 @@
## $(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-07 - Non-interactive element tooltips
**Learning:** Adding a `title` to a non-interactive element like a `div` or `span` is not enough for keyboard accessibility.
**Action:** Always add `tabindex="0"` and a valid ARIA role (e.g., `role="region"`) to non-interactive elements with tooltips, and ensure they have a visible `:focus-visible` style.
Comment on lines +119 to +121

@coderabbitai coderabbitai Bot Aug 7, 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.

🎯 Functional Correctness | 🟑 Minor | ⚑ Quick win

role="region"을 툴팁 μš”μ†Œμ˜ κΈ°λ³Έ μ—­ν• λ‘œ μ‚¬μš©ν•˜μ§€ λ§ˆμ„Έμš”.

region은 λžœλ“œλ§ˆν¬ μ—­ν• μž…λ‹ˆλ‹€. μš”μ•½ μΉ΄λ“œμ™€ 각 μž‘μ—… ν–‰μ˜ μƒνƒœ 배지λ₯Ό λͺ¨λ‘ region으둜 λ§Œλ“€λ©΄ λžœλ“œλ§ˆν¬ λͺ©λ‘μ΄ λΆˆν•„μš”ν•˜κ²Œ μ»€μ§‘λ‹ˆλ‹€. ν‚€λ³΄λ“œ ν¬μ»€μŠ€μ—λŠ” role="region"이 ν•„μš”ν•˜μ§€ μ•ŠμŠ΅λ‹ˆλ‹€. 각 μš”μ†Œμ˜ μ‹€μ œ μ˜λ―Έμ— λ§žλŠ” λΉ„-λžœλ“œλ§ˆν¬ 역할을 μ„ νƒν•˜κ±°λ‚˜ 역할을 μ œκ±°ν•˜μ„Έμš”.

  • .jules/palette.md#L119-L121: role="region"을 일반 μ˜ˆμ‹œλ‘œ λ¬Έμ„œν™”ν•˜μ§€ 말고, μ˜λ―Έμ— λ§žλŠ” μ—­ν•  선택을 μš”κ΅¬ν•˜μ„Έμš”.
  • index.html#L31-L42: μš”μ•½ μΉ΄λ“œμ—μ„œ region을 μ œκ±°ν•˜κ±°λ‚˜ group λ“± μ μ ˆν•œ λΉ„-λžœλ“œλ§ˆν¬ 의미λ₯Ό μ‚¬μš©ν•˜μ„Έμš”.
  • app.js#L1002-L1003: μƒνƒœ λ°°μ§€λ§ˆλ‹€ region을 μƒμ„±ν•˜μ§€ 말고, μƒνƒœ λ°°μ§€μ˜ μ˜λ―Έμ— λ§žλŠ” 역할을 μ‚¬μš©ν•˜μ„Έμš”.
πŸ“ Affects 3 files
  • .jules/palette.md#L119-L121 (this comment)
  • index.html#L31-L42
  • app.js#L1002-L1003
πŸ€– Prompt for AI Agents 
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In @.jules/palette.md around lines 119 - 121, Replace the generic role="region"
guidance in .jules/palette.md lines 119-121 with instructions to choose a
context-appropriate non-landmark role or omit the role. In index.html lines
31-42, remove region from summary cards or use an appropriate role such as
group; in app.js lines 1002-1003, stop assigning region to every status badge
and use the role matching each badge’s meaning.

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.setAttribute('tabindex', '0');
badge.setAttribute('role', 'region');
}
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 @@ -28,18 +28,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="region">
<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="region">
<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="region">
<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