🎨 Palette: 로딩 중 버튼 비활성화 처리 및 링크 접근성 개선#40
Conversation
UX와 접근성 강화를 위해 다음 항목들을 수정했습니다: - 버튼의 `:disabled` 상태에 대한 스타일링(투명도, 커서) 추가 및 호버 상태 방지. - 폴링 중 새로고침 버튼에 `disabled` 및 `aria-busy` 속성 추가. - 새 탭에서 열리는 링크들에 `target="_blank"`, `rel="noopener noreferrer"`, `aria-label` 부여. - 관련 학습 내용을 `.Jules/palette.md`에 기록.
|
👋 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. |
UX와 접근성 강화를 위해 다음 항목들을 수정했습니다: - 버튼의 `:disabled` 상태에 대한 스타일링(투명도, 커서) 추가 및 호버 상태 방지. - 폴링 중 새로고침 버튼에 `disabled` 및 `aria-busy` 속성 추가. - 새 탭에서 열리는 링크들에 `target="_blank"`, `rel="noopener noreferrer"`, `aria-label` 부여. - Checkstyle 경고 없이 코드 포매팅 준수. - 관련 학습 내용을 `.Jules/palette.md`에 기록.
|
중복 정리: 이 PR은 'async 버튼 로딩 상태' 클러스터의 중복입니다. 정본으로 #71 (APPROVED + CI green + MERGEABLE)을 유지합니다. 동일 파일을 수정해 동시 병합이 불가능하므로 정리합니다. 고유하게 필요한 변경이 있으면 #71에 반영하거나 재오픈하세요. |
Understood. Acknowledging that this PR is a duplicate and is being closed in favor of #71. I am stopping work on this task. If any unique changes from here are needed, they should be applied to #71. |
💡 What:
viewer.css에.btn:disabled스타일(opacity: 0.6, cursor: not-allowed) 추가 및 기존:hover선택자에:not(:disabled)조건 추가.viewer.js의setLoading및showError시 새로고침 버튼(retryBtn)에disabled및aria-busy속성 제어 로직 추가.viewer.js의renderPreviewLink와ViewerUiController.java의 HTML 템플릿 내의 새 창 링크 속성(target="_blank",rel="noopener noreferrer",aria-label) 강화..Jules/palette.md에 버튼 비활성화 상태 및 스크린 리더(aria-busy) 대응에 대한 학습 내용(Learning) 기록.🎯 Why:
단순히 속성을 통해 버튼을 비활성화하는 것만으로는 사용자에게 현재 상태를 명확하게 전달하기 어려우며, 스크린 리더 사용자에게는 더욱 불편함을 초래할 수 있습니다. 시각적인 피드백(불투명도 조절 및 호버 효과 제거)과 접근성 피드백(
aria-busy)을 결합하여 폴링 및 로딩 중의 사용자 경험을 개선했습니다. 또한, 외부 링크 오픈 시 보안성 확보와 명확한 화면 내 이동을 알리기 위해 속성값들을 갱신했습니다.📸 Before/After:
cursor: not-allowed가 적용되어 상호작용 불가능 상태를 직관적으로 전달함. 링크 접근 시 스크린 리더가 명확하게 새 창에서 열림을 인지할 수 있음.♿ Accessibility:
aria-busy속성 적용.aria-label="... (opens in a new tab)"추가.PR created automatically by Jules for task 16149047579786018780 started by @seonghobae