From 21bddd8e0e9b5ef5cba4f9fe0e100fa558a63c46 Mon Sep 17 00:00:00 2001
From: seonghobae <8172694+seonghobae@users.noreply.github.com>
Date: Sun, 28 Jun 2026 20:53:56 +0000
Subject: [PATCH 1/2] =?UTF-8?q?=F0=9F=8E=A8=20Palette:=20=EB=B9=84?=
=?UTF-8?q?=ED=99=9C=EC=84=B1=ED=99=94=20=EC=83=81=ED=83=9C=20=EB=B0=8F=20?=
=?UTF-8?q?=EC=A0=91=EA=B7=BC=EC=84=B1=20=EA=B0=9C=EC=84=A0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
UX와 접근성 강화를 위해 다음 항목들을 수정했습니다:
- 버튼의 `:disabled` 상태에 대한 스타일링(투명도, 커서) 추가 및 호버 상태 방지.
- 폴링 중 새로고침 버튼에 `disabled` 및 `aria-busy` 속성 추가.
- 새 탭에서 열리는 링크들에 `target="_blank"`, `rel="noopener noreferrer"`, `aria-label` 부여.
- 관련 학습 내용을 `.Jules/palette.md`에 기록.
---
.Jules/palette.md | 3 +++
.../viewer/controller/ViewerUiController.java | 2 +-
.../resources/static/assets/viewer/viewer.css | 9 +++++++--
.../resources/static/assets/viewer/viewer.js | 16 +++++++++++++++-
4 files changed, 26 insertions(+), 4 deletions(-)
create mode 100644 .Jules/palette.md
diff --git a/.Jules/palette.md b/.Jules/palette.md
new file mode 100644
index 00000000..af7398a7
--- /dev/null
+++ b/.Jules/palette.md
@@ -0,0 +1,3 @@
+## 2026-06-28 - Enhance Disabled State Accessibility
+**Learning:** Simply disabling a button using the `disabled` property doesn't always provide sufficient visual feedback, especially if existing hover states apply regardless of the disabled attribute, potentially confusing users who expect interactive elements. Adding `aria-busy="true"` or updating ARIA attributes during loading states is also critical for screen readers.
+**Action:** When creating or modifying button states, explicitly add `.btn:disabled` styling (like opacity drops and `cursor: not-allowed`), update hover pseudo-classes to exclude the disabled state (`:not(:disabled)`), and pair visual feedback with relevant ARIA attributes (`aria-busy`) when the button is inactive due to async operations.
\ No newline at end of file
diff --git a/src/main/java/com/clearfolio/viewer/controller/ViewerUiController.java b/src/main/java/com/clearfolio/viewer/controller/ViewerUiController.java
index 13b5571d..62631837 100644
--- a/src/main/java/com/clearfolio/viewer/controller/ViewerUiController.java
+++ b/src/main/java/com/clearfolio/viewer/controller/ViewerUiController.java
@@ -107,7 +107,7 @@ private static String viewerShellHtml(UUID docId, String initialState) {
diff --git a/src/main/resources/static/assets/viewer/viewer.css b/src/main/resources/static/assets/viewer/viewer.css
index 9245c365..0aa630c6 100644
--- a/src/main/resources/static/assets/viewer/viewer.css
+++ b/src/main/resources/static/assets/viewer/viewer.css
@@ -195,7 +195,7 @@ a:hover {
color: #ffffff;
}
-.btn-primary:hover {
+.btn-primary:hover:not(:disabled) {
filter: brightness(0.95);
}
@@ -205,10 +205,15 @@ a:hover {
color: var(--ink);
}
-.btn-secondary:hover {
+.btn-secondary:hover:not(:disabled) {
background: #fbfcfe;
}
+.btn:disabled {
+ opacity: 0.6;
+ cursor: not-allowed;
+}
+
.preview {
border-radius: 12px;
border: 1px dashed rgba(16, 32, 50, 0.26);
diff --git a/src/main/resources/static/assets/viewer/viewer.js b/src/main/resources/static/assets/viewer/viewer.js
index 8b0dfe00..08eeb83d 100644
--- a/src/main/resources/static/assets/viewer/viewer.js
+++ b/src/main/resources/static/assets/viewer/viewer.js
@@ -45,6 +45,10 @@ function setLoading(message) {
el.error.hidden = true;
el.liveStatus.textContent = message;
el.preview.setAttribute("aria-busy", "true");
+ if (el.retryBtn) {
+ el.retryBtn.disabled = true;
+ el.retryBtn.setAttribute("aria-busy", "true");
+ }
}
function showError(message) {
@@ -52,6 +56,10 @@ function showError(message) {
el.errorMessage.textContent = message;
el.liveStatus.textContent = "";
el.preview.setAttribute("aria-busy", "false");
+ if (el.retryBtn) {
+ el.retryBtn.disabled = false;
+ el.retryBtn.setAttribute("aria-busy", "false");
+ }
el.errorTitle.focus();
}
@@ -72,7 +80,9 @@ function renderPreviewLink(path) {
link.href = path;
link.textContent = "Open artifact";
link.className = "btn btn-secondary";
- link.rel = "noopener";
+ link.target = "_blank";
+ link.rel = "noopener noreferrer";
+ link.setAttribute("aria-label", "Open artifact (opens in a new tab)");
el.preview.appendChild(link);
}
@@ -156,6 +166,10 @@ async function poll(docId, abortSignal) {
el.preview.setAttribute("aria-busy", "false");
el.liveStatus.textContent = "Ready.";
+ if (el.retryBtn) {
+ el.retryBtn.disabled = false;
+ el.retryBtn.setAttribute("aria-busy", "false");
+ }
clearPreview();
const path = bootstrap.data.previewResourcePath;
From c43f25e12884f94442f04fb0f2e1eb0305985a76 Mon Sep 17 00:00:00 2001
From: seonghobae <8172694+seonghobae@users.noreply.github.com>
Date: Sun, 28 Jun 2026 23:10:26 +0000
Subject: [PATCH 2/2] =?UTF-8?q?=F0=9F=8E=A8=20Palette:=20=EB=A1=9C?=
=?UTF-8?q?=EB=94=A9=20=EC=A4=91=20=EB=B2=84=ED=8A=BC=20=EB=B9=84=ED=99=9C?=
=?UTF-8?q?=EC=84=B1=ED=99=94=20=EC=B2=98=EB=A6=AC=20=EB=B0=8F=20=EB=A7=81?=
=?UTF-8?q?=ED=81=AC=20=EC=A0=91=EA=B7=BC=EC=84=B1=20=EA=B0=9C=EC=84=A0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
UX와 접근성 강화를 위해 다음 항목들을 수정했습니다:
- 버튼의 `:disabled` 상태에 대한 스타일링(투명도, 커서) 추가 및 호버 상태 방지.
- 폴링 중 새로고침 버튼에 `disabled` 및 `aria-busy` 속성 추가.
- 새 탭에서 열리는 링크들에 `target="_blank"`, `rel="noopener noreferrer"`, `aria-label` 부여.
- Checkstyle 경고 없이 코드 포매팅 준수.
- 관련 학습 내용을 `.Jules/palette.md`에 기록.
---
.../clearfolio/viewer/controller/ViewerUiController.java | 6 +++++-
1 file changed, 5 insertions(+), 1 deletion(-)
diff --git a/src/main/java/com/clearfolio/viewer/controller/ViewerUiController.java b/src/main/java/com/clearfolio/viewer/controller/ViewerUiController.java
index 62631837..f4c29227 100644
--- a/src/main/java/com/clearfolio/viewer/controller/ViewerUiController.java
+++ b/src/main/java/com/clearfolio/viewer/controller/ViewerUiController.java
@@ -107,7 +107,11 @@ private static String viewerShellHtml(UUID docId, String initialState) {