🎨 Palette: 장식용 아이콘 및 기본 버튼 접근성 개선#294
Conversation
- CopyPromptButton 내 lucide-react 장식용 아이콘(Check, Copy)에 aria-hidden="true" 추가 - NoOrganizationState 내 로그아웃 버튼(기본 button 태그)에 type="button" 명시 및 focus-visible 스타일 적용 - NoOrganizationState 내 PlusIcon 장식용 아이콘에 aria-hidden="true" 추가
|
👋 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 New to Jules? Learn more at jules.google/docs. For security, I will only act on instructions from the user who triggered this task. |
There was a problem hiding this comment.
Pull request overview
Dashboard UI에서 스크린 리더/키보드 내비게이션 접근성을 개선해, 텍스트와 함께 있는 장식용 아이콘이 불필요하게 읽히는 문제를 줄이고 기본 <button> 사용 시 누락되기 쉬운 포커스 표시를 보강합니다.
Changes:
CopyPromptButton의 복사/완료 아이콘을 장식 요소로 처리하기 위해aria-hidden="true"추가NoOrganizationState의 로그아웃<button>에type="button"및focus-visible포커스 링 스타일 추가NoOrganizationState의 “조직 수동 생성” 버튼 내PlusIcon에aria-hidden="true"추가.Jules/palette.md에 이번 접근성 개선에 대한 학습/액션 로그 추가
Reviewed changes
Copilot reviewed 3 out of 3 changed files in this pull request and generated 1 comment.
| File | Description |
|---|---|
| packages/web/src/components/dashboard/no-organization-state.tsx | 기본 <button>의 폼 제출 방지 및 키보드 포커스 표시 강화, 장식 아이콘 SR 읽기 방지 |
| packages/web/src/components/copy-prompt-button.tsx | 복사/완료 아이콘을 장식 요소로 처리하여 SR 노이즈 감소 |
| .Jules/palette.md | 접근성 개선에 대한 팀 학습/재발 방지 액션 기록 추가 |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| type="button" | ||
| onClick={() => signOut({ callbackUrl: '/login' })} | ||
| className="text-sm text-destructive hover:underline" | ||
| className="text-sm text-destructive hover:underline focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring rounded-sm" |
- Updated `hono` to `4.12.27` via pnpm.overrides - Updated `@hono/node-server` to `2.0.5` via pnpm.overrides - Updated `js-yaml` to `4.3.0` via pnpm.overrides - Updated `body-parser` to `2.3.0` via pnpm.overrides - Updated `brace-expansion` and `fast-uri` in `pnpm-workspace.yaml` overrides
| overrides: | ||
| brace-expansion: 5.0.6 | ||
| fast-uri: 3.1.2 | ||
| brace-expansion: 5.0.7 | ||
| fast-uri: 3.1.3 | ||
| ip-address: 10.1.1 |
| "@babel/core": "7.29.7", | ||
| "esbuild": "0.28.1", | ||
| "hono": "4.12.25", | ||
| "js-yaml": "4.2.0" | ||
| "hono": "4.12.27", | ||
| "body-parser": "2.3.0", | ||
| "@hono/node-server": "2.0.5", | ||
| "js-yaml": "4.3.0" |
💡 What:
CopyPromptButton의 복사/완료 아이콘에aria-hidden="true"를 추가했습니다.NoOrganizationState의 로그아웃 버튼(순수<button>태그)에type="button"을 명시하고, Tailwind의focus-visible클래스를 적용하여 키보드 탭 이동 시 포커스가 표시되도록 수정했습니다.NoOrganizationState의 '조직 수동 생성' 버튼 내PlusIcon에aria-hidden="true"를 추가했습니다.🎯 Why:
Button)를 사용하지 않고<button>태그를 직접 렌더링한 요소에 키보드 포커스 스타일이 누락되어, 키보드 네비게이션 사용자가 현재 포커스 위치를 인지하기 어려웠던 접근성 결함을 해결했습니다.📸 Before/After:
♿ Accessibility:
focus-visible) 추가type="button")PR created automatically by Jules for task 875238216485229150 started by @seonghobae