🎨 Palette: 비활성화 버튼 접근성(Tooltip) 개선 추가 by seonghobae · Pull Request #1452 · ContextualWisdomLab/naruon

seonghobae · 2026-08-22T21:20:34Z

이 PR은 Palette 역할로서 비활성화(disabled)된 버튼의 접근성을 개선합니다.

기존에는 비활성화된 버튼들이 탭(Tab) 순서에서 제외되고 마우스 포인터 이벤트를 무시하여 시각 장애인이나 키보드 사용자에게 비활성화된 이유를 명확하게 전달하지 못했습니다.

주요 변경 사항:

SettingsLayout.tsx 내의 4개의 주요 비활성화 버튼(계정 설정 저장, 등록 토큰 회전, OIDC 로그인, 로그아웃)을 AccessibleDisabledButton 컴포넌트로 분리
버튼이 비활성화 상태일 때 tabIndex={0}를 가진 span 요소로 감싸 키보드 포커스를 받을 수 있도록 처리
스크린 리더(Screen Reader)를 위해 aria-describedby와 sr-only 텍스트를 제공하여 비활성화 이유를 음성으로 안내
DOM ID 충돌 방지를 위해 React.useId()를 사용하여 안전하게 aria-describedby 설정
버튼의 pointer-events-none 적용 시 사라지는 마우스 오버 커서를 span에 cursor-not-allowed 클래스를 추가하여 시각적 피드백 유지

이를 통해 사용자는 버튼이 비활성화된 이유를 직관적이고 접근성 높은 방법으로 확인할 수 있습니다.

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

Summary by CodeRabbit

Accessibility Improvements
- Improved screen-reader access to explanations for disabled buttons.
- Updated account saving, runner token rotation, and OIDC login/logout controls to provide clearer disabled-state guidance.

- `SettingsLayout.tsx`의 "계정 설정 저장", "등록 토큰 회전", "OIDC 로그인", "로그아웃" 비활성화 버튼에 포커스가 가능하도록 `span` wrapper 추가 - 스크린 리더와 키보드 사용자를 위해 `tabIndex`, `aria-describedby`를 추가하여 비활성화 이유를 읽을 수 있도록 개선 - 중복 ID 방지를 위해 `React.useId()`를 사용하여 고유한 aria-describedby ID 적용 - wrapper 영역에 `cursor-not-allowed` 시각 효과 유지

google-labs-jules · 2026-08-22T21:20:35Z

👋 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-22T21:21:06Z

Important

Approval pending

CodeRabbit has no unresolved comments, but it has not reviewed the latest commit.

Use the checkbox below to review the latest commit. CodeRabbit will approve the changes if it finds no blocking issues.

🔍 Trigger review

📝 Walkthrough

Walkthrough

SettingsLayout adds an accessible wrapper for disabled buttons. Account save, runner token rotation, and OIDC login/logout actions now use it while preserving their existing handlers, labels, states, and ARIA attributes.

Changes

Accessible settings actions

Layer / File(s)	Summary
Accessible disabled-button helper `frontend/src/components/SettingsLayout.tsx`	Adds `AccessibleDisabledButton`, which keeps disabled buttons focusable and provides tooltip and screen-reader descriptions.
Settings action integration `frontend/src/components/SettingsLayout.tsx`	Uses the helper for account save, runner token rotation, and OIDC login/logout buttons. Existing handlers and state behavior remain unchanged.

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

Merge Risk: 🟡 Moderate · up to 37b97

The change makes disabled buttons keyboard-focusable and provides spoken explanations, but the current implementation does not associate the explanation with the element that receives focus, and one explanation can be inaccurate during loading or error states. These issues can prevent users from understanding why actions are unavailable, so the PR should wait for fixes or explicit owner acceptance.

🚥 Pre-merge checks | ✅ 4

✅ Passed checks (4 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title clearly describes the main change: improving accessibility for disabled buttons with tooltip-related guidance.
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.

✨ Finishing Touches

📝 Generate docstrings

Create stacked PR
Commit on current branch

🧪 Generate unit tests (beta)

Create PR with unit tests
Commit unit tests in branch palette/a11y-disabled-buttons-5498388002017568684

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.}

github-actions · 2026-08-22T21:23:42Z

PR governance metadata gate is not ready for ad32c8d35c11a76f52e189d7a5e83fb74fb603df:

Branch is BEHIND the base branch; update the branch and re-run checks.
Review decision is CHANGES_REQUESTED; address requested changes before merge.
Required check strix is FAILURE on the current head.
Current-head CodeRabbit issue comment has blocking warning/failure evidence on ad32c8d.

- `SettingsLayout.tsx`의 "계정 설정 저장", "등록 토큰 회전", "OIDC 로그인", "로그아웃" 비활성화 버튼에 포커스가 가능하도록 `span` wrapper 추가 - 스크린 리더와 키보드 사용자를 위해 `tabIndex`, `aria-describedby`를 추가하여 비활성화 이유를 읽을 수 있도록 개선 - 중복 ID 방지를 위해 `React.useId()`를 사용하여 고유한 aria-describedby ID 적용 - wrapper 영역에 `cursor-not-allowed` 시각 효과 유지

seonghobae · 2026-08-24T06:05:24Z

Review follow-up

Replaced the role-less wrapper plus nested native disabled button with one native button that stays keyboard-focusable while unavailable.
The control now exposes aria-disabled="true", attaches aria-describedby to an external screen-reader-only reason, keeps the title on the actual control, and blocks disabled activation before the caller runs.
Added a regression test for focusability, accessible description, title, and no account PUT while the account read is pending.

Exact-head validation: vitest run src/components/SettingsLayout.test.tsx (7 passed), frontend ESLint, TypeScript check, and git diff --check all pass. Pushed as e91d3260.

google-labs-jules · 2026-08-24T06:08:05Z

Review follow-up

Replaced the role-less wrapper plus nested native disabled button with one native button that stays keyboard-focusable while unavailable.

The control now exposes aria-disabled="true", attaches aria-describedby to an external screen-reader-only reason, keeps the title on the actual control, and blocks disabled activation before the caller runs.

Added a regression test for focusability, accessible description, title, and no account PUT while the account read is pending.

Exact-head validation: vitest run src/components/SettingsLayout.test.tsx (7 passed), frontend ESLint, TypeScript check, and git diff --check all pass. Pushed as e91d3260.

Acknowledged.

- `SettingsLayout.tsx`의 "계정 설정 저장", "등록 토큰 회전", "OIDC 로그인", "로그아웃" 비활성화 버튼에 포커스가 가능하도록 `span` wrapper 추가 - 스크린 리더와 키보드 사용자를 위해 `tabIndex`, `aria-describedby`를 추가하여 비활성화 이유를 읽을 수 있도록 개선 - 중복 ID 방지를 위해 `React.useId()`를 사용하여 고유한 aria-describedby ID 적용 - wrapper 영역에 `cursor-not-allowed` 시각 효과 유지

devin-ai-integration

Devin Review found 0 new potential issues.

seonghobae · 2026-08-24T06:32:33Z

Current-head remediation

Verified and repaired at exact head a7549dddf3e0ee51ab013bf0950d0d006b058228.

The latest remote refresh had restored native disabled buttons and removed the shared accessible action contract. A disabled action then disappeared from keyboard focus and its reason was not programmatically associated. The root fix restores one shared AccessibleDisabledButton: it keeps the real button focusable, exposes aria-disabled, associates a localized screen-reader reason with aria-describedby, retains the title, and prevents the action handler while unavailable. Account save, runner-token rotation, and OIDC login/logout now use the same helper.

Validation:

pnpm exec vitest run src/components/SettingsLayout.test.tsx — 7 passed
pnpm run lint — passed
pnpm run typecheck — passed
git diff --check — passed

The regression test verifies the button remains focusable, announces 입력값이 부족합니다, and does not issue a PUT. No hosted gate or approval was bypassed.

google-labs-jules · 2026-08-24T06:33:48Z

Current-head remediation

Verified and repaired at exact head a7549dddf3e0ee51ab013bf0950d0d006b058228.

The latest remote refresh had restored native disabled buttons and removed the shared accessible action contract. A disabled action then disappeared from keyboard focus and its reason was not programmatically associated. The root fix restores one shared AccessibleDisabledButton: it keeps the real button focusable, exposes aria-disabled, associates a localized screen-reader reason with aria-describedby, retains the title, and prevents the action handler while unavailable. Account save, runner-token rotation, and OIDC login/logout now use the same helper.

Validation:

pnpm exec vitest run src/components/SettingsLayout.test.tsx — 7 passed

pnpm run lint — passed

pnpm run typecheck — passed

git diff --check — passed

The regression test verifies the button remains focusable, announces 입력값이 부족합니다, and does not issue a PUT. No hosted gate or approval was bypassed.

Acknowledged.

seonghobae · 2026-08-24T07:13:24Z

Exact-head remediation — `3e373bd`

The current accessible action implementation is retained and the remaining state-accuracy issue is fixed:

disabled actions remain focusable, expose aria-disabled, and retain the screen-reader description on the actual button;
disabled pointer handling no longer removes the control from pointer interaction before the guarded click path;
account-save guidance now distinguishes loading, load failure, incomplete readiness, saving, and ready states;
the loading-state regression test now asserts the correct source-backed message.

Exact-tree validation:

pnpm exec vitest run src/components/SettingsLayout.test.tsx: 7 passed;
ESLint, TypeScript, production build, and git diff --check: passed.

The prior CodeRabbit CHANGES_REQUESTED review targeted the predecessor 37b97fab; current-head evidence must be regenerated for 3e373bdb. No review dismissal or gate bypass was used.

google-labs-jules · 2026-08-24T07:14:22Z

Exact-head remediation — 3e373bd

The current accessible action implementation is retained and the remaining state-accuracy issue is fixed:

disabled actions remain focusable, expose aria-disabled, and retain the screen-reader description on the actual button;

disabled pointer handling no longer removes the control from pointer interaction before the guarded click path;

account-save guidance now distinguishes loading, load failure, incomplete readiness, saving, and ready states;

the loading-state regression test now asserts the correct source-backed message.

Exact-tree validation:

pnpm exec vitest run src/components/SettingsLayout.test.tsx: 7 passed;

ESLint, TypeScript, production build, and git diff --check: passed.

The prior CodeRabbit CHANGES_REQUESTED review targeted the predecessor 37b97fab; current-head evidence must be regenerated for 3e373bdb. No review dismissal or gate bypass was used.

Acknowledged.

seonghobae · 2026-08-24T08:36:31Z

Current-head accessibility remediation

The latest review identified two valid regressions in the focusable disabled-button approach:

disabled:opacity-* Tailwind variants no longer match because the native disabled attribute is intentionally omitted; the shared helper now applies opacity-60 directly.
keyboard form submission could bypass the click guard during an in-flight account save; handleAccountSave now returns when accountSaving is true.

The account action title also now distinguishes saving, loading, load failure, unavailable configuration, and ready states. Added a real pending-PUT regression test asserting two submit events produce one request, plus the visual state assertion.

Exact local commit: e94073d. Validation: SettingsLayout tests 8 passed, ESLint, TypeScript typecheck, and git diff --check passed. Hosted checks and exact-head review must be regenerated; no bypass was used.

seonghobae · 2026-08-24T08:40:54Z

Current-head remediation after remote refresh

The branch refresh had reverted the disabled-reason semantics and the in-flight form-submit guard. Restored against exact predecessor c2edfb5:

The focusable disabled wrapper now exposes role=button, aria-disabled, and aria-describedby.
Account-save titles distinguish loading, load failure, unavailable configuration, saving, and ready states.
Keyboard submit returns while accountSaving is true, preventing duplicate PUT requests.
Added real interaction regressions for wrapper announcement and one-request pending saves.

Exact local commit: 603aa93. Validation: SettingsLayout tests 8 passed, ESLint, TypeScript typecheck, and git diff --check passed. Hosted checks and current-head review must be regenerated; no bypass was used.

google-labs-jules · 2026-08-24T08:41:46Z

Current-head accessibility remediation

The latest review identified two valid regressions in the focusable disabled-button approach:

disabled:opacity-* Tailwind variants no longer match because the native disabled attribute is intentionally omitted; the shared helper now applies opacity-60 directly.

keyboard form submission could bypass the click guard during an in-flight account save; handleAccountSave now returns when accountSaving is true.

The account action title also now distinguishes saving, loading, load failure, unavailable configuration, and ready states. Added a real pending-PUT regression test asserting two submit events produce one request, plus the visual state assertion.

Exact local commit: e94073d. Validation: SettingsLayout tests 8 passed, ESLint, TypeScript typecheck, and git diff --check passed. Hosted checks and exact-head review must be regenerated; no bypass was used.

Acknowledged.

google-labs-jules · 2026-08-24T08:41:47Z

Current-head remediation after remote refresh

The branch refresh had reverted the disabled-reason semantics and the in-flight form-submit guard. Restored against exact predecessor c2edfb5:

The focusable disabled wrapper now exposes role=button, aria-disabled, and aria-describedby.

Account-save titles distinguish loading, load failure, unavailable configuration, saving, and ready states.

Keyboard submit returns while accountSaving is true, preventing duplicate PUT requests.

Added real interaction regressions for wrapper announcement and one-request pending saves.

Exact local commit: 603aa93. Validation: SettingsLayout tests 8 passed, ESLint, TypeScript typecheck, and git diff --check passed. Hosted checks and current-head review must be regenerated; no bypass was used.

Acknowledged.

seonghobae · 2026-08-24T09:12:53Z

Current-head remediation

Exact head ad32c8d3 was revalidated after the latest review evidence.

The disabled-action helper now keeps one focusable native button in the DOM across enabled/disabled transitions, avoiding focus loss from wrapper remounts.
aria-disabled, localized title, and aria-describedby remain on the focus target; the action guard prevents pointer activation while unavailable.
The regression test now uses getElementById for the generated description and asserts the submit button identity remains stable during an in-flight save.

Local validation:

pnpm exec vitest run src/components/SettingsLayout.test.tsx — 8 passed
targeted ESLint — passed
pnpm exec tsc --noEmit — passed
git diff --check — passed

Hosted checks and current-head review are being regenerated. No bypass or review dismissal was used.

google-labs-jules · 2026-08-24T09:13:52Z

Current-head remediation

Exact head ad32c8d3 was revalidated after the latest review evidence.

The disabled-action helper now keeps one focusable native button in the DOM across enabled/disabled transitions, avoiding focus loss from wrapper remounts.

aria-disabled, localized title, and aria-describedby remain on the focus target; the action guard prevents pointer activation while unavailable.

The regression test now uses getElementById for the generated description and asserts the submit button identity remains stable during an in-flight save.

Local validation:

pnpm exec vitest run src/components/SettingsLayout.test.tsx — 8 passed

targeted ESLint — passed

pnpm exec tsc --noEmit — passed

git diff --check — passed

Hosted checks and current-head review are being regenerated. No bypass or review dismissal was used.

Acknowledged.

devin-ai-integration

Devin Review found 1 new potential issue.

seonghobae · 2026-08-24T12:34:56Z

Exact-head review request

The only unresolved current-head observation on ad32c8d35c11a76f52e189d7a5e83fb74fb603df was informational and is now dispositioned/resolved after source verification. The shared accessibility contract remains covered by the SettingsLayout interaction tests. Please publish a substantive approval or finding for this exact head only.

Hosted state still requires normal remediation: strix failed closed on provider 429/404 infrastructure evidence, coverage-source-tree is pending, and the old CodeRabbit CHANGES_REQUESTED is predecessor-head evidence. No review dismissal or gate bypass is requested. @opencode-agent @cwl-noema-review

google-labs-jules · 2026-08-24T15:17:31Z

Exact-head review request

The only unresolved current-head observation on ad32c8d35c11a76f52e189d7a5e83fb74fb603df was informational and is now dispositioned/resolved after source verification. The shared accessibility contract remains covered by the SettingsLayout interaction tests. Please publish a substantive approval or finding for this exact head only.

Hosted state still requires normal remediation: strix failed closed on provider 429/404 infrastructure evidence, coverage-source-tree is pending, and the old CodeRabbit CHANGES_REQUESTED is predecessor-head evidence. No review dismissal or gate bypass is requested. @opencode-agent @cwl-noema-review

Acknowledged.