🎨 Palette: 편집기 저장 버튼 접근성 개선 및 에러 피드백 추가 by seonghobae · Pull Request #639 · ContextualWisdomLab/scopeweave

seonghobae · 2026-08-30T14:04:16Z

💡 무엇을

WBS 편집기 내 저장 버튼의 기본 disabled 속성을 aria-disabled="true"로 변경했습니다.
에러가 있어 저장이 불가능한 상태에서 버튼 클릭(또는 Enter 키) 시, 사용자에게 에러 상황을 알리는 토스트 피드백을 추가했습니다.

🎯 왜

기본 disabled 속성을 사용하면 탭 이동 시 요소가 건너뛰어져 스크린 리더나 키보드 사용자가 해당 버튼이 왜 비활성화되었는지 파악하기 어렵습니다.
aria-disabled로 변경하면 포커스는 유지되면서 클릭을 가로챌 수 있어, "입력값을 올바르게 수정해야 저장할 수 있습니다."라는 명확한 피드백을 제공할 수 있습니다.

📸 변경 전/후

(변경 전) 에러 발생 시 저장 버튼이 완전히 무시되어 포커스할 수 없고, 클릭해도 아무 반응이 없음.
(변경 후) 에러 발생 시에도 탭으로 저장 버튼으로 이동할 수 있으며, 클릭 시 하단에 피드백 토스트가 나타남. 기존 CSS([aria-disabled="true"])에 의해 시각적인 비활성화 스타일은 그대로 유지됨.

♿ 접근성

키보드 내비게이션 연속성 유지 (Focusable Disabled State).
오류 발생 시 명시적인 role="status"(토스트) 피드백 제공으로 스크린 리더 사용성 향상.

PR created automatically by Jules for task 7881213588789520844 started by @seonghobae

Summary by CodeRabbit

개선 사항
- 유효성 검사 오류가 있어도 저장 버튼이 포커스 가능한 상태로 유지됩니다.
- 저장이 차단되면 토스트 알림으로 오류 상황을 즉시 안내합니다.
- 저장 버튼의 접근성 상태가 더 명확하게 전달됩니다.
문서
- 저장 차단 및 접근성 관련 학습 안내가 추가되었습니다.

- 저장 버튼의 기본 disabled 속성을 aria-disabled로 교체하여 탭 포커스 유지 - 유효성 검사 실패 시 토스트 메시지를 통해 명확한 에러 피드백 제공 - CSS의 :not(:disabled):not([aria-disabled="true"])와 연동되어 시각적 비활성화 상태 유지 - 스크린 리더 사용자가 비활성화된 이유를 명확히 인지할 수 있도록 개선

google-labs-jules · 2026-08-30T14:04:17Z

👋 Jules, reporting for duty! I'm here to lend a hand with this pull request.

When you start a review, I'll add a 👀 emoji to each comment to let you know I've read it. I'll focus on feedback directed at me and will do my best to stay out of conversations between you and other bots or reviewers to keep the noise down.

I'll push a commit with your requested changes shortly after. Please note there might be a delay between these steps, but rest assured I'm on the job!

For more direct control, you can switch me to Reactive Mode. When this mode is on, I will only act on comments where you specifically mention me with @jules. You can find this option in the Pull Request section of your global Jules UI settings. You can always switch back!

New to Jules? Learn more at jules.google/docs.

For security, I will only act on instructions from the user who triggered this task.

coderabbitai · 2026-08-30T14:04:26Z

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro Plus

Run ID: b103480c-0317-437f-a66d-7fdc0e7ef9ea

📥 Commits

Reviewing files that changed from the base of the PR and between 0c51408 and 01a95f1.

📒 Files selected for processing (1)

.jules/palette.md

🚧 Files skipped from review as they are similar to previous changes (1)

.jules/palette.md

Included review availability: Your plan provides up to 1 included review per hour; 0 remain after this review.

📝 Walkthrough

Walkthrough

저장 버튼은 disabled 대신 aria-disabled를 사용합니다. 유효성 오류로 저장을 중단하면 토스트 알림을 표시합니다. 관련 접근성 학습 기록을 추가했습니다.

Changes

접근성 저장 피드백

Layer / File(s)	Summary
저장 유효성 및 피드백 `app.js`, `.jules/palette.md`	저장 버튼의 `disabled` 값을 항상 `false`로 설정하고, 유효성 오류에 따라 `aria-disabled`를 설정하거나 제거합니다. 저장을 중단하면 `showToast`를 호출합니다. 관련 접근성 학습 기록의 날짜를 고정하고 새 항목을 추가합니다.

Estimated code review effort: 2 (Simple) | ~10 minutes

Merge Risk: ⚪ Minimal · up to 01a95

This localized accessibility change keeps the save control reachable and adds error feedback without any actionable merge-blocking risk remaining.

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%. Docstring coverage is scoped to functions touched by this diff. Analyzed 2 functions across 1 files. (1 skipped: 1 …	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	제목은 편집기 저장 버튼의 접근성 개선과 오류 피드백 추가를 명확하게 요약합니다. 변경 내용의 주요 목적과 일치합니다.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

Full details: Docstring Coverage

Explanation

Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%. Docstring coverage is scoped to functions touched by this diff. Analyzed 2 functions across 1 files. (1 skipped: 1 unsupported.)

Fix all pre-merge checks with AI

✨ Finishing Touches

🧪 Generate unit tests (beta)

Create PR with unit tests
Commit unit tests in branch palette-save-button-a11y-7881213588789520844

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

_{Comment @coderabbitai help to get the list of available commands.}

- 저장 버튼의 기본 disabled 속성을 aria-disabled로 교체하여 탭 포커스 유지 - 유효성 검사 실패 시 토스트 메시지를 통해 명확한 에러 피드백 제공 - CSS의 :not(:disabled):not([aria-disabled="true"])와 연동되어 시각적 비활성화 상태 유지 - 스크린 리더 사용자가 비활성화된 이유를 명확히 인지할 수 있도록 개선

- 저장 버튼의 기본 disabled 속성을 확실히 해제하고 aria-disabled로 교체하여 탭 포커스 유지 - 유효성 검사 실패 시 토스트 메시지를 통해 명확한 에러 피드백 제공 - CSS의 :not(:disabled):not([aria-disabled="true"])와 연동되어 시각적 비활성화 상태 유지 - 스크린 리더 사용자가 비활성화된 이유를 명확히 인지할 수 있도록 개선

The editor form's native `required` attributes silently blocked the `submit` event before saveEditor()/validateDraft() ran, so clicking Save (or pressing Enter) on an empty required field showed no feedback at all -- the aria-disabled save button gave no explanation. Set form.noValidate so the existing custom validation path always runs; required/aria-required stay for screen-reader semantics. Also update editor tests for the aria-disabled (not native disabled) save button and add a regression test for the click-through case. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>

- 저장 버튼의 기본 disabled 속성을 확실히 해제하고 aria-disabled로 교체하여 탭 포커스 유지 - 유효성 검사 실패 시 토스트 메시지를 통해 명확한 에러 피드백 제공 - CSS의 :not(:disabled):not([aria-disabled="true"])와 연동되어 시각적 비활성화 상태 유지 - 스크린 리더 사용자가 비활성화된 이유를 명확히 인지할 수 있도록 개선

opencode-agent

Pull request overview

OpenCode reviewed the current-head product diff. Coverage is a separate gate.

Changed files

.jules/palette.md — repository behavior
app.js — TypeScript or JavaScript runtime

Changed behavior

flowchart LR
  PR["PR changed files"] --> Evidence["OpenCode bounded evidence"]
  Evidence --> S1["Repository file: palette.md"]
  S1 --> I1["repository behavior"]
  I1 --> R1["Review risk: Repository file: palette.md"]
  R1 --> V1["required checks"]
  Evidence --> S2["TypeScript/JavaScript: app.js"]
  S2 --> I2["TypeScript or JavaScript runtime"]
  I2 --> R2["Review risk: TypeScript/JavaScript: app.js"]
  R2 --> V2["package test plus coverage"]

Findings

No source-backed product finding is synthesized from the coverage gate. A coverage miss belongs in the status comment.

Head SHA: a5891c9b4b6796b4c36024c8812d32b77223be43
Workflow run: 33414279348
Workflow attempt: 1
Coverage gate: failure

Review outcome

Coverage is a gate, not the review. This body reviews the changed product files.

Changed-File Evidence Map

flowchart LR
  PR["PR changed files"] --> Evidence["OpenCode bounded evidence"]
  Evidence --> S1["Repository file: palette.md"]
  S1 --> I1["repository behavior"]
  I1 --> R1["Review risk: Repository file: palette.md"]
  R1 --> V1["required checks"]
  Evidence --> S2["TypeScript/JavaScript: app.js"]
  S2 --> I2["TypeScript or JavaScript runtime"]
  I2 --> R2["Review risk: TypeScript/JavaScript: app.js"]
  R2 --> V2["package test plus coverage"]

opencode-agent · 2026-08-31T18:54:46Z

OpenCode Review Overview

Head SHA: a5891c9b4b6796b4c36024c8812d32b77223be43
Workflow run: 33414279348
Workflow attempt: 1
Gate result: COVERAGE_BLOCKED
Coverage gate: failure
Model pool: unknown
Verdict: COVERAGE_BLOCKED
Formal review: 🎨 Palette: 편집기 저장 버튼 접근성 개선 및 에러 피드백 추가 #639 (review)

Coverage evidence did not pass, so approval is blocked. The formal pull-request review is the source-backed diff review, not this status comment.

Navigation Menu

Uh oh!

🎨 Palette: 편집기 저장 버튼 접근성 개선 및 에러 피드백 추가 - #639

🎨 Palette: 편집기 저장 버튼 접근성 개선 및 에러 피드백 추가#639
seonghobae wants to merge 8 commits into
developfrom
palette-save-button-a11y-7881213588789520844

seonghobae commented Aug 30, 2026 •

edited by coderabbitai Bot

Loading

Uh oh!

google-labs-jules Bot commented Aug 30, 2026

Uh oh!

coderabbitai Bot commented Aug 30, 2026 •

edited

Loading

Walkthrough

Changes

❌ Failed checks (1 warning)

Uh oh!

This comment was marked as resolved.

Uh oh!

This comment was marked as resolved.

Uh oh!

opencode-agent Bot left a comment

Uh oh!

opencode-agent Bot commented Aug 31, 2026 •

edited

Loading

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

Uh oh!

Conversation

seonghobae commented Aug 30, 2026 • edited by coderabbitai Bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary by CodeRabbit

Uh oh!

google-labs-jules Bot commented Aug 30, 2026

Uh oh!

coderabbitai Bot commented Aug 30, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Walkthrough

Changes

❌ Failed checks (1 warning)

Uh oh!

This comment was marked as resolved.

Uh oh!

This comment was marked as resolved.

Uh oh!

opencode-agent Bot left a comment

Choose a reason for hiding this comment

Pull request overview

Changed files

Changed behavior

Findings

Review outcome

Changed-File Evidence Map

Uh oh!

opencode-agent Bot commented Aug 31, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

OpenCode Review Overview

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

seonghobae commented Aug 30, 2026 •

edited by coderabbitai Bot

Loading

coderabbitai Bot commented Aug 30, 2026 •

edited

Loading

opencode-agent Bot commented Aug 31, 2026 •

edited

Loading