From a29cc19c0f201e6050d9ecf9cb844d35b5e138e8 Mon Sep 17 00:00:00 2001 From: seonghobae <8172694+seonghobae@users.noreply.github.com> Date: Wed, 5 Aug 2026 13:49:05 +0000 Subject: [PATCH 01/10] =?UTF-8?q?feat:=20=EB=B9=84=EB=8C=80=ED=99=94?= =?UTF-8?q?=ED=98=95=20=EC=9A=94=EC=86=8C=20=ED=88=B4=ED=8C=81=20=ED=82=A4?= =?UTF-8?q?=EB=B3=B4=EB=93=9C=20=EC=A0=91=EA=B7=BC=EC=84=B1=20=EA=B0=9C?= =?UTF-8?q?=EC=84=A0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 비대화형 요소(`div`, `span` 등)에 제공된 `title`이나 `aria-label` 툴팁이 키보드 사용자에게 노출되지 않는 접근성 이슈를 해결합니다. - `index.html`: 프로젝트 전체일수 및 진척률을 표시하는 `.meta-value-card` 3곳에 `tabindex="0"` 추가 - `app.js`: 툴팁(description)이 존재하는 `.status-badge`에 `tabIndex = 0` 동적 추가 - `styles.css`: `:focus-visible` 선택자에 위 두 요소를 추가하여 명확한 포커스 표시 렌더링 - `.jules/palette.md`: 비대화형 요소 툴팁 접근성 관련 인사이트 기록 --- .jules/palette.md | 3 +++ app.js | 1 + index.html | 6 +++--- styles.css | 4 +++- 4 files changed, 10 insertions(+), 4 deletions(-) diff --git a/.jules/palette.md b/.jules/palette.md index 0bbf5248..27d8b051 100644 --- a/.jules/palette.md +++ b/.jules/palette.md @@ -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-05 - 비대화형 요소의 툴팁 접근성 +**Learning:** 비대화형 요소(`div`, `span` 등)에 `title`이나 `aria-label`로 툴팁을 제공할 때, 키보드 사용자는 탭으로 포커스를 이동할 수 없어 해당 정보를 인지할 수 없는 문제가 발생함. +**Action:** 비대화형 요소라도 툴팁 등 부가 정보가 포함되어 있다면 `tabindex="0"`을 추가하여 포커스를 받을 수 있도록 하고, `:focus-visible`을 통해 명확한 시각적 피드백을 제공해야 함. diff --git a/app.js b/app.js index a04aae71..d2a4b55e 100644 --- a/app.js +++ b/app.js @@ -999,6 +999,7 @@ function createStatusCellContent(progressState) { if (progressState.description) { badge.title = progressState.description; badge.setAttribute('aria-label', `${progressState.label} - ${progressState.description}`); + badge.tabIndex = 0; } return badge; } diff --git a/index.html b/index.html index a7f4b49c..6efce0eb 100644 --- a/index.html +++ b/index.html @@ -28,18 +28,18 @@