Skip to content

🎨 Palette: 로딩 중 버튼 비활성화 처리 및 링크 접근성 개선#40

Closed
seonghobae wants to merge 2 commits into
mainfrom
palette-ux-improvements-16149047579786018780
Closed

🎨 Palette: 로딩 중 버튼 비활성화 처리 및 링크 접근성 개선#40
seonghobae wants to merge 2 commits into
mainfrom
palette-ux-improvements-16149047579786018780

Conversation

@seonghobae

Copy link
Copy Markdown
Collaborator

💡 What:

  • viewer.css.btn:disabled 스타일(opacity: 0.6, cursor: not-allowed) 추가 및 기존 :hover 선택자에 :not(:disabled) 조건 추가.
  • viewer.jssetLoadingshowError 시 새로고침 버튼(retryBtn)에 disabledaria-busy 속성 제어 로직 추가.
  • viewer.jsrenderPreviewLinkViewerUiController.java의 HTML 템플릿 내의 새 창 링크 속성(target="_blank", rel="noopener noreferrer", aria-label) 강화.
  • .Jules/palette.md에 버튼 비활성화 상태 및 스크린 리더(aria-busy) 대응에 대한 학습 내용(Learning) 기록.

🎯 Why:
단순히 속성을 통해 버튼을 비활성화하는 것만으로는 사용자에게 현재 상태를 명확하게 전달하기 어려우며, 스크린 리더 사용자에게는 더욱 불편함을 초래할 수 있습니다. 시각적인 피드백(불투명도 조절 및 호버 효과 제거)과 접근성 피드백(aria-busy)을 결합하여 폴링 및 로딩 중의 사용자 경험을 개선했습니다. 또한, 외부 링크 오픈 시 보안성 확보와 명확한 화면 내 이동을 알리기 위해 속성값들을 갱신했습니다.

📸 Before/After:

  • 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

UX와 접근성 강화를 위해 다음 항목들을 수정했습니다:
- 버튼의 `:disabled` 상태에 대한 스타일링(투명도, 커서) 추가 및 호버 상태 방지.
- 폴링 중 새로고침 버튼에 `disabled` 및 `aria-busy` 속성 추가.
- 새 탭에서 열리는 링크들에 `target="_blank"`, `rel="noopener noreferrer"`, `aria-label` 부여.
- 관련 학습 내용을 `.Jules/palette.md`에 기록.
@google-labs-jules

Copy link
Copy Markdown

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

UX와 접근성 강화를 위해 다음 항목들을 수정했습니다:
- 버튼의 `:disabled` 상태에 대한 스타일링(투명도, 커서) 추가 및 호버 상태 방지.
- 폴링 중 새로고침 버튼에 `disabled` 및 `aria-busy` 속성 추가.
- 새 탭에서 열리는 링크들에 `target="_blank"`, `rel="noopener noreferrer"`, `aria-label` 부여.
- Checkstyle 경고 없이 코드 포매팅 준수.
- 관련 학습 내용을 `.Jules/palette.md`에 기록.
@seonghobae

Copy link
Copy Markdown
Collaborator Author

중복 정리: 이 PR은 'async 버튼 로딩 상태' 클러스터의 중복입니다. 정본으로 #71 (APPROVED + CI green + MERGEABLE)을 유지합니다. 동일 파일을 수정해 동시 병합이 불가능하므로 정리합니다. 고유하게 필요한 변경이 있으면 #71에 반영하거나 재오픈하세요.

@seonghobae seonghobae closed this Jul 7, 2026
@google-labs-jules

Copy link
Copy Markdown

중복 정리: 이 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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant