Skip to content

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

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

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
85d418d
🎨 Palette: λΉ„μƒν˜Έμž‘μš© μš”μ†Œμ˜ 툴팁 μ ‘κ·Όμ„± κ°œμ„ 
seonghobae Aug 12, 2026
d56a12d
🎨 Palette: λΉ„μƒν˜Έμž‘μš© μš”μ†Œμ˜ 툴팁 μ ‘κ·Όμ„± κ°œμ„ 
seonghobae Aug 12, 2026
8d4cb20
🎨 Palette: λΉ„μƒν˜Έμž‘μš© μš”μ†Œμ˜ 툴팁 μ ‘κ·Όμ„± κ°œμ„ 
seonghobae Aug 12, 2026
75b5379
🎨 Palette: λΉ„μƒν˜Έμž‘μš© μš”μ†Œμ˜ 툴팁 μ ‘κ·Όμ„± κ°œμ„ 
seonghobae Aug 12, 2026
d67194d
🎨 Palette: λΉ„μƒν˜Έμž‘μš© μš”μ†Œμ˜ 툴팁 μ ‘κ·Όμ„± κ°œμ„ 
seonghobae Aug 12, 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
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-12 - λΉ„μƒν˜Έμž‘μš© μš”μ†Œμ˜ 툴팁 μ ‘κ·Όμ„± κ°œμ„ 
**Learning:** divλ‚˜ span 같은 λΉ„μƒν˜Έμž‘μš© μš”μ†Œμ— title 속성을 μΆ”κ°€ν•˜μ—¬ νˆ΄νŒμ„ μ œκ³΅ν•  λ•Œ, ν‚€λ³΄λ“œ μ‚¬μš©μžλŠ” μ ‘κ·Όν•  수 μ—†λŠ” λ¬Έμ œκ°€ λ°œμƒν•  수 μžˆμŒμ„ ν™•μΈν–ˆμŠ΅λ‹ˆλ‹€.
**Action:** λΉ„μƒν˜Έμž‘μš© μš”μ†Œμ— νˆ΄νŒμ„ μ œκ³΅ν•  λ•ŒλŠ” 항상 tabindex="0"을 μΆ”κ°€ν•˜κ³ , μ μ ˆν•œ ARIA role(예: role="note")을 λΆ€μ—¬ν•˜λ©°, :focus-visible μŠ€νƒ€μΌμ„ μ •μ˜ν•˜μ—¬ 슀크린 리더와 ν‚€λ³΄λ“œ μ‚¬μš©μž λͺ¨λ‘ μ ‘κ·Όν•  수 μžˆλ„λ‘ ν•΄μ•Ό ν•©λ‹ˆλ‹€.
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="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">
Comment on lines +31 to +42

@coderabbitai coderabbitai Bot Aug 12, 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 | 🟠 Major | πŸ—οΈ Heavy lift

🧩 Analysis chain

🏁 Script executed:

#!/bin/bash
set -eu

printf '%s\n' '--- index.html target and script order ---'
nl -ba index.html | sed -n '1,65p'
printf '%s\n' '--- palette learning ---'
nl -ba .jules/palette.md | sed -n '105,130p'
printf '%s\n' '--- related tooltip/focus/description patterns ---'
rg -n -i 'tooltip|aria-describedby|role="tooltip"|role="note"|focus-visible|tabindex="0"|meta-value-card|summary-total-days|summary-planned-progress' --glob '!node_modules/**' .

Repository: ContextualWisdomLab/scopeweave

Length of output: 2761

🌐 Web query:

W3C WAI ARIA APG tooltip role note title attribute keyboard focus aria-describedby tooltip guidance

πŸ’‘ Result:

To create an accessible tooltip, the W3C WAI ARIA Authoring Practices Guide (APG) provides specific guidance to ensure compatibility with screen readers and keyboard navigation [1][2]. Key requirements for an accessible tooltip include: Role and Association: Use role="tooltip" on the tooltip container element [1][3]. The triggering element must reference the tooltip container using the aria-describedby attribute [1][4]. Keyboard Focus: Tooltips do not receive focus themselves [1][3]. Focus remains on the triggering element while the tooltip is visible [1][5]. The tooltip must appear when the trigger receives focus and disappear when the trigger loses focus (onBlur) [1][6]. Dismissal: The Escape key should be implemented to dismiss the tooltip [1][3][7]. If triggered by hover, it should disappear on mouse-out [1][3]. To meet WCAG 1.4.13 requirements, tooltips must be dismissible without moving the pointer, and if triggered by hover, they should remain visible when the pointer moves from the trigger to the tooltip itself [3][7]. Avoid the title Attribute: You should avoid using the HTML title attribute for tooltips [8][5]. It is not reliably accessible, cannot be styled, is often not triggered by keyboard focus, and is frequently ignored by screen readers [3][8]. Implementation Note: The tooltip pattern is considered a work in progress by the WAI, and developers are encouraged to follow the latest APG recommendations for specific keyboard and focus management [1]. For content that is complex or interactive, consider using a different pattern, such as a popover or modal dialog, as tooltips are intended for short, non-interactive contextual information [1][3].

Citations:

🏁 Script executed:

#!/bin/bash
set -eu

printf '%s\n' '--- index.html target ---'
awk '{printf "%5d %s\n", NR, $0}' index.html | sed -n '25,55p'

printf '%s\n' '--- focus styles ---'
awk '{printf "%5d %s\n", NR, $0}' styles.css | sed -n '110,180p;340,375p'

printf '%s\n' '--- tooltip-related test ---'
awk '{printf "%5d %s\n", NR, $0}' tests/e2e/scopeweave.spec.js | sed -n '1280,1325p'

printf '%s\n' '--- all title attributes and note roles ---'
rg -n 'title=|role="note"|aria-describedby|role="tooltip"' --glob '*.html' --glob '*.js' --glob '*.css' --glob '*.md' .

Repository: ContextualWisdomLab/scopeweave

Length of output: 7917

🏁 Script executed:

#!/bin/bash
set -eu

printf '%s\n' '--- relevant architecture and learning guidance files ---'
git ls-files 'ARCHITECTURE.md' 'AGENTS.md' '.jules/*.md'
printf '%s\n' '--- palette file size and surrounding guidance ---'
wc -l .jules/palette.md
awk '{printf "%5d %s\n", NR, $0}' .jules/palette.md | sed -n '105,125p'

Repository: ContextualWisdomLab/scopeweave

Length of output: 2726

🏁 Script executed:

#!/bin/bash
set -eu

python3 - <<'PY'
from html.parser import HTMLParser
from pathlib import Path

class CardParser(HTMLParser):
    def __init__(self):
        super().__init__()
        self.cards = []
        self.in_card = False
        self.current = None

    def handle_starttag(self, tag, attrs):
        attrs = dict(attrs)
        classes = set((attrs.get("class") or "").split())
        if tag == "div" and "meta-value-card" in classes:
            self.in_card = True
            self.current = {"attrs": attrs}
            self.cards.append(self.current)

    def handle_endtag(self, tag):
        if tag == "div" and self.in_card:
            self.in_card = False
            self.current = None

parser = CardParser()
parser.feed(Path("index.html").read_text())
print(f"meta-value-card count: {len(parser.cards)}")
for i, card in enumerate(parser.cards, 1):
    attrs = card["attrs"]
    print(i, {k: attrs.get(k) for k in ("title", "tabindex", "role", "aria-describedby", "id")})

palette = Path(".jules/palette.md").read_text()
print("palette forces tabindex=0:", '항상 tabindex="0"' in palette)
print("palette forces role=note:", 'role="note"' in palette)
print("focus-visible selector exists:",
      ".meta-value-card:focus-visible" in Path("styles.css").read_text())
PY

Repository: ContextualWisdomLab/scopeweave

Length of output: 643

title을 μ ‘κ·Ό κ°€λŠ₯ν•œ 툴팁으둜 μ‚¬μš©ν•˜μ§€ λ§ˆμ„Έμš”.

μ„Έ 개의 .meta-value-card λͺ¨λ‘ titleκ³Ό role="note"만 μ‚¬μš©ν•˜λ©° aria-describedby 연결이 μ—†μŠ΅λ‹ˆλ‹€. λͺ…μ‹œμ  μ„€λͺ… μš”μ†Œλ₯Ό μΆ”κ°€ν•˜κ³ , 포컀슀·마우슀 λ™μž‘κ³Ό μ„€λͺ… ν‘œμ‹œλ₯Ό κ΅¬ν˜„ν•˜μ„Έμš”. κΈ°μ‘΄ .meta-value-card:focus-visible μŠ€νƒ€μΌμ€ μœ μ§€ν•˜μ„Έμš”. .jules/palette.md의 tabindex="0" 및 role="note" μ μš©λ„ ν•„μš”ν•œ 경우둜 μ œν•œν•˜μ„Έμš”. κ΄€λ ¨ E2E ν…ŒμŠ€νŠΈμ—μ„œ μ ‘κ·Ό κ°€λŠ₯ν•œ μ„€λͺ…κ³Ό λ™μž‘μ„ κ²€μ¦ν•˜μ„Έμš”.

πŸ“ Affects 2 files
  • index.html#L31-L42 (this comment)
  • .jules/palette.md#L118-L120
πŸ€– 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 `@index.html` around lines 31 - 42, Replace the inaccessible title-only
tooltips on all three meta-value-card elements in index.html with explicit
description elements connected via aria-describedby, and implement showing and
hiding those descriptions on focus and mouse interaction while preserving the
existing meta-value-card:focus-visible styling. Update related E2E tests to
verify accessible descriptions and interactions. In .jules/palette.md lines
118-120, apply tabindex="0" and role="note" only where the documented
accessibility behavior requires them; update the guidance to match the new
pattern.

Source: Coding guidelines

<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