🎨 Palette: SettingsLayout 비활성화 버튼 접근성 툴팁 개선

[seonghobae]

💡 무엇을 변경했나요?
SettingsLayout 컴포넌트의 OIDC 로그아웃 버튼과 계정 설정 저장 버튼에 접근성(a11y) 툴팁을 추가했습니다. 비활성화된 버튼을 span 태그로 감싸고 tabIndex와 title을 부여하여 키보드 내비게이션과 마우스 호버 시 툴팁이 올바르게 나타나도록 수정했습니다.

🎯 왜 필요한가요?
기존에는 disabled 속성을 가진 <button> 엘리먼트에 직접 title 속성이 설정되어 있어, 포인터 이벤트가 차단되고 키보드 탭 순서(Tab Order)에서 제외되었습니다. 이로 인해 스크린 리더 사용자와 마우스 사용자 모두 버튼이 비활성화된 이유를 확인할 수 없었습니다.

♿ 접근성(Accessibility) 개선 사항

• 비활성화된 버튼을 포커스 가능한 컨테이너(span)로 래핑하여 키보드 접근성 확보 (tabIndex={0}).
• 시각적인 cursor-not-allowed 피드백을 래퍼로 이동시키고, 내부 버튼에는 pointer-events-none을 적용하여 툴팁이 안정적으로 표시되도록 개선.

---

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

---

Summary by CodeRabbit

• Accessibility Improvements
  • Account, OIDC login, logout, and network relationship controls now provide contextual explanations for unavailable actions.
  • Unavailable controls remain keyboard-focusable, expose appropriate accessibility states, and prevent unintended actions.
  • Loading and session-related restrictions are communicated clearly while preserving focus and navigation.
• Bug Fixes
  • Account forms remain usable after load failures, with retry guidance and error recovery when editing.
  • Save controls correctly recover after failed submissions without retaining stale accessibility messaging.

[google-labs-jules]

👋 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]

Warning

Review limit reached

Next included review available in 45 minutes.

View limit details

Limit details: You’ve used the included review currently available.

You've used all free OSS reviews for now. Wait for the free limit to reset to keep reviewing this public repository.

Learn how review limits work.

Review configuration:

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Team

Run ID: 0ab60bb5-011d-4155-89f3-66f08bd941d3

📥 Commits

Reviewing files that changed from the base of the PR and between 0b3307b and e15c079.

📒 Files selected for processing (2)

• frontend/src/components/SettingsLayout.test.tsx
• frontend/src/components/SettingsLayout.tsx

📝 Walkthrough

Walkthrough

The settings layout now exposes contextual accessibility states for account and OIDC controls. The network graph keeps its unavailable first-relationship action focusable and guarded. Tests cover loading, failure, focus, and blocked-action behavior.

Changes

Settings control accessibility

Layer / File(s)	Summary
Update settings control states frontend/src/components/SettingsLayout.tsx	Settings tracks OIDC session loading, guards account saves, clears load errors during edits, and renders contextual aria-disabled, aria-busy, and aria-describedby states.
Validate settings states frontend/src/components/SettingsLayout.test.tsx	Tests cover pending session detection, account load failures, account save failures, visible guidance, focusability, blocked logout, and cleared accessibility metadata.

Network graph control accessibility

Layer / File(s)	Summary
Guard unavailable relationship selection frontend/src/components/NetworkGraph.tsx	The first-relationship button uses aria-disabled, visible explanatory text, focus styling, and guarded click handling.
Validate unavailable relationship action frontend/src/components/NetworkGraph.test.tsx	The test verifies focusability, visible guidance, accessibility linkage, and blocked selection.

Estimated code review effort: 3 (Moderate) | ~20 minutes

Merge Risk: 🔵 Low · up to 0b330

The PR makes unavailable account and OIDC controls keyboard-focusable, but the requested localized state-specific tooltip titles are still missing, and the inventory documentation contains snapshot and formatting inconsistencies. These are bounded follow-ups without backend or security impact, so the PR is mergeable with explicit owner awareness.

🚥 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 identifies the main change: improving accessibility guidance for disabled controls in SettingsLayout. The emoji and “Palette” prefix add minor noise but do not make the title unclear…
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: Title check

Explanation

The title clearly identifies the main change: improving accessibility guidance for disabled controls in SettingsLayout. The emoji and “Palette” prefix add minor noise but do not make the title unclear or unrelated.

✨ 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-ux-accessible-tooltips-1327323527225576825

---

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

• X
• Mastodon
• Reddit
• LinkedIn

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

[github-actions]

PR governance metadata gate is not ready for a0ce13ee2e665fd06101395999b1ad23bc78c387:

• Review decision is CHANGES_REQUESTED; address requested changes before merge.
• Required check strix is CANCELLED on the current head.

[seonghobae]

Review follow-up

• Replaced the focusable wrapper plus nested disabled button pattern for account save, OIDC login, and OIDC logout with a single focusable native button.
• The actual control now owns its localized title, aria-disabled, and aria-describedby; the reason text remains outside the accessible-name subtree, and disabled activation is guarded before handlers run.
• Preserved the existing loading/error/session-specific guidance and updated regression assertions for the disabled-to-enabled transition.

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

[google-labs-jules]

Review follow-up

• Replaced the focusable wrapper plus nested disabled button pattern for account save, OIDC login, and OIDC logout with a single focusable native button.
• The actual control now owns its localized title, aria-disabled, and aria-describedby; the reason text remains outside the accessible-name subtree, and disabled activation is guarded before handlers run.
• Preserved the existing loading/error/session-specific guidance and updated regression assertions for the disabled-to-enabled transition.

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

I have verified that the updated test SettingsLayout.accessibility.test.tsx fails locally on my branch with AssertionError: expected '입력값이 부족합니다.' to be '계정 설정을 불러오는 중입니다. 잠시 후 다시 시도하세요.' because the sr-only span's message did not exactly map the component's internal accountLoading state expected by the new test.

I have aligned the implementation of SettingsLayout.tsx with the requested single native button pattern (aria-disabled, aria-describedby, and early-return in onClick) for the Account Save, OIDC Login, and OIDC Logout buttons. I also corrected the conditional logic inside the sr-only descriptor to emit exactly "계정 설정을 불러오는 중입니다. 잠시 후 다시 시도하세요." when (!accountConfig || accountLoading) is true, perfectly matching the regression test contract.

I ran vitest run src/components/SettingsLayout.accessibility.test.tsx and all tests now pass, including linting. The fix has been pushed to the branch.

[seonghobae]

Current-head remediation update

• Exact head: 1420e8a318d9780a3397fc9407c7b85c4981c36f
• The remote remediation commit retained the account-load/save retry fix and reset only the OIDC unavailable-state copy. This head restores the actionable customer guidance: ask an administrator to verify OIDC configuration instead of retrying a synchronous, unavailable browser configuration.
• Exact-head checks: targeted SettingsLayout test suite previously passed 9 tests; ESLint, TypeScript typecheck, and git diff --check pass for this copy-only update.

All predecessor review/check evidence is stale after this push; hosted gates must bind to this exact head.

[google-labs-jules]

Review finding disposition — exact head 637acdd77332fccd3efba8de2eb8dfe374bfb84f

• The account-load announcement finding is resolved in the current source: the screen-reader text and title use the load-error branch only when the configuration is absent, and the regression test forces /api/accounts/config to fail.
• The save-retry finding is resolved in the current source: a loaded account remains save-ready after a failed PUT, editing clears the prior save error, and the regression test verifies retry availability.
• The Enter-key double-submit finding is resolved by the shared accountSaving guard in both the submit handler and button click guard.
• The OIDC login copy finding is resolved: unavailable configuration now directs the customer to ask an administrator to verify OIDC setup instead of suggesting a transient retry.
• The duplicate logout availability id is informational and safe because the two spans have mutually exclusive conditions; no code change is required.

Exact-head verification passed:

• corepack pnpm@11.5.3 --dir frontend test --run src/components/SettingsLayout.test.tsx — 9 passed
• corepack pnpm@11.5.3 --dir frontend lint src/components/SettingsLayout.tsx src/components/SettingsLayout.test.tsx — passed
• corepack pnpm@11.5.3 --dir frontend typecheck — passed
• git diff --check — passed

The stale predecessor-head review evidence is not reused; hosted review and checks must bind to this exact head.

Acknowledged. Thanks for confirming that the exact head 637acdd77332fccd3efba8de2eb8dfe374bfb84f resolved all prior findings, including the missing save-retry branch and OIDC login messaging. My check of the new tree shows identical green passing states.

[google-labs-jules]

Current-head remediation update

• Exact head: 1420e8a318d9780a3397fc9407c7b85c4981c36f
• The remote remediation commit retained the account-load/save retry fix and reset only the OIDC unavailable-state copy. This head restores the actionable customer guidance: ask an administrator to verify OIDC configuration instead of retrying a synchronous, unavailable browser configuration.
• Exact-head checks: targeted SettingsLayout test suite previously passed 9 tests; ESLint, TypeScript typecheck, and git diff --check pass for this copy-only update.

All predecessor review/check evidence is stale after this push; hosted gates must bind to this exact head.

Acknowledged. I have reset my local tree to the exact head 1420e8a318d9780a3397fc9407c7b85c4981c36f. The missing actionable guidance string for the missing OIDC setup has been cleanly restored. Tests continue to pass successfully.

[seonghobae]

Current-head review disposition

The remaining Devin note is informational: accountReady intentionally stays true after a save failure while accountConfig remains present, so the user can retry. A load failure still fails closed because accountConfig remains null. The exact-head tests cover both states; no source change is required.

Decision: WAIT_AND_REMEDIATE pending required Checks and an eligible independent approval.

[google-labs-jules]

Current-head review disposition

The remaining Devin note is informational: accountReady intentionally stays true after a save failure while accountConfig remains present, so the user can retry. A load failure still fails closed because accountConfig remains null. The exact-head tests cover both states; no source change is required.

Decision: WAIT_AND_REMEDIATE pending required Checks and an eligible independent approval.

Acknowledged. Standing by for required Checks and independent approval.

[seonghobae]

Canonical accessibility consolidation is pushed at 78b313534a44cdf143542f140dee2f9686492255, including a normal merge of current develop (042b0c70531b229af3acbd0421a2f23098d848b3).

• Replaced title-only/screen-reader-only disabled explanations with visible customer-operable reasons referenced by aria-describedby; the buttons remain focusable through aria-disabled, and guarded click/submit paths prevent unavailable actions.
• Clarified recovery guidance for account-load failure, OIDC setup, session loading, and logged-out state.
• Transplanted only the valid NetworkGraph focusable aria-disabled guarded-button behavior; the unavailable relationship reason is visibly rendered for touch and sighted keyboard users.
• Preserved gpt-5.4; no backend fixtures, smoke scripts, E2E helpers, or .Jules changes from 🎨 Palette: 비활성화 버튼 툴팁 접근성 개선 #1474 were included.

Post-merge validation: 25 focused Vitest tests passed; tsc --noEmit passed; targeted ESLint passed; responsive Settings Playwright coverage passed on desktop, tablet, and mobile (3/3).

[google-labs-jules]

Canonical accessibility consolidation is pushed at 78b313534a44cdf143542f140dee2f9686492255, including a normal merge of current develop (042b0c70531b229af3acbd0421a2f23098d848b3).

• Replaced title-only/screen-reader-only disabled explanations with visible customer-operable reasons referenced by aria-describedby; the buttons remain focusable through aria-disabled, and guarded click/submit paths prevent unavailable actions.
• Clarified recovery guidance for account-load failure, OIDC setup, session loading, and logged-out state.
• Transplanted only the valid NetworkGraph focusable aria-disabled guarded-button behavior; the unavailable relationship reason is visibly rendered for touch and sighted keyboard users.
• Preserved gpt-5.4; no backend fixtures, smoke scripts, E2E helpers, or .Jules changes from 🎨 Palette: 비활성화 버튼 툴팁 접근성 개선 #1474 were included.

Post-merge validation: 25 focused Vitest tests passed; tsc --noEmit passed; targeted ESLint passed; responsive Settings Playwright coverage passed on desktop, tablet, and mobile (3/3).

Acknowledged. I have reset my local tree to the exact head 78b313534a44cdf143542f140dee2f9686492255 reflecting the canonical consolidation. The changes successfully replace the conflicting screen-reader-only labels with visible, descriptive aria-describedby hints and preserve proper focus management via aria-disabled and guarded native button behaviors. My local test suite verifies cleanly.

[seonghobae]

Resolved the localized-title finding at exact head 81363f45.

• Reused the existing state-specific Korean availability reasons as each control's title, with the normal action label when available.
• Covered account load/save/load-failure/ready, missing/configured OIDC login, and session-loading/no-session/available logout states.
• Frontend tests: 51 passed, 442 passed.
• Focused ESLint and pnpm typecheck: passed.
• git diff --check: passed.

[google-labs-jules]

Resolved the localized-title finding at exact head 81363f45.

• Reused the existing state-specific Korean availability reasons as each control's title, with the normal action label when available.
• Covered account load/save/load-failure/ready, missing/configured OIDC login, and session-loading/no-session/available logout states.
• Frontend tests: 51 passed, 442 passed.
• Focused ESLint and pnpm typecheck: passed.
• git diff --check: passed.

Acknowledged. I have reset my local tree to exact head 81363f45 reflecting the localized-title fix. Everything continues to verify cleanly on my end.