🎨 Palette: 테이블 액션 버튼에 컨텍스트 기반 ARIA 레이블 추가#189
Conversation
반복되는 테이블 액션 버튼("Details", "Status JSON", "Open viewer")에 행(row) 컨텍스트(파일명)를 포함한 동적인 ARIA 레이블을 추가하여 스크린 리더 사용자의 접근성을 향상시켰습니다.
또한 로딩 상태 전환 시 기존 ARIA 레이블을 임시로 "Loading..."으로 덮어쓰고 복원하도록 개선하였습니다.
|
👋 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
This PR improves the accessibility of the static viewer demo’s history table by ensuring repetitive per-row actions (“Details”, “Status JSON”, “Open viewer”) expose row-specific context to assistive technologies.
Changes:
- Added optional
ariaLabelparameters tocreateActionButtonandcreateLinkindemo.js. - Generated context-specific
aria-labelvalues for history-table actions using the row’s filename, and temporarily switched the “Details” button’saria-labelto"Loading..."during async loading. - Documented the new “context-specific ARIA labels” practice in
.jules/palette.md.
Reviewed changes
Copilot reviewed 2 out of 2 changed files in this pull request and generated 2 comments.
| File | Description |
|---|---|
| src/main/resources/static/assets/viewer/demo.js | Adds optional ARIA label support and applies contextual aria-labels (plus loading-state label override) to repetitive table actions. |
| .jules/palette.md | Records the accessibility learning/action guidance for context-specific ARIA labels in repetitive table actions. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| openJobDetail(job).finally(() => { | ||
| btn.replaceChildren(...initialChildren); | ||
| btn.disabled = false; | ||
| if (originalAriaLabel) btn.setAttribute("aria-label", originalAriaLabel); | ||
| }); |
이 PR은 데이터 테이블 내 반복되는 액션 버튼들의 웹 접근성을 향상시킵니다.
💡 What:
demo.js의createActionButton과createLink함수에 선택적ariaLabel파라미터를 추가하고, 반복되는 이력 테이블 액션("Details", "Status JSON", "Open viewer") 호출 시 파일명을 포함한 구체적인 ARIA 레이블(예: "Details for document.pdf")을 동적으로 생성하여 부여했습니다. 로딩 상태 처리 시 스크린 리더가 로딩 상태를 인식할 수 있도록 일시적으로aria-label을 "Loading..."으로 덮어쓰고 작업 완료 시 복원하는 로직도 추가되었습니다.🎯 Why: 스크린 리더 사용자는 테이블 구조에서 단순히 "Details"라고 읽히는 버튼만으로는 어떤 행(항목)에 대한 액션인지 파악하기 어렵습니다. 행 특화 컨텍스트를 ARIA 레이블로 제공하면 탐색과 이해가 훨씬 명확해집니다.
♿ Accessibility: 반복적인 액션 버튼에 고유한 맥락 정보를 제공하여 스크린 리더 접근성을 크게 개선했습니다. 로딩 상태에서도 스크린 리더가 시각적 텍스트("Loading...") 대신 이전 ARIA 레이블을 읽는 현상을 수정했습니다.
PR created automatically by Jules for task 12779962513131093106 started by @seonghobae