From 6f2939ea9cd6fb8789b159aae8e5570a3ad7cd9f Mon Sep 17 00:00:00 2001 From: seonghobae <8172694+seonghobae@users.noreply.github.com> Date: Tue, 6 Oct 2026 05:37:04 +0000 Subject: [PATCH 1/3] =?UTF-8?q?=F0=9F=8E=A8=20Palette:=20=EB=84=A4?= =?UTF-8?q?=EC=9D=B4=ED=8B=B0=EB=B8=8C=20=ED=8C=8C=EC=9D=BC=20=EC=97=85?= =?UTF-8?q?=EB=A1=9C=EB=93=9C=20=EC=9D=B8=ED=92=8B=20=EC=A0=91=EA=B7=BC?= =?UTF-8?q?=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 대시보드 헤더의 네이티브 파일 입력(input[type="file"]) 요소를 접근성 트리에서 완전히 숨기고(`aria-hidden="true"`, `class="sr-only"`, `tabindex="-1"`) 이를 트리거하는 시각적 프록시 버튼으로 교체하여 일관된 룩 앤 필과 접근성을 보장합니다. - 요소에 `class="sr-only"` 및 `aria-hidden="true"` 속성을 추가하여 스크린 리더 등에서 잘못된/중복된 포커스를 받지 않도록 개선 - `primary-action` 디자인 토큰 클래스를 활용하는 버튼 생성 및 자바스크립트 클릭 프록시 이벤트 바인딩 추가 - 관련된 접근성 보장 UI 컨트랙트 테스트 추가 및 패스 확인 - `.jules/palette.md` 접근성 개선 인사이트 한국어 기록 완료 --- .jules/palette.md | 4 ++++ scanner/dashboard/index.html | 6 +++++- tests/test_dashboard_core.py | 17 +++++++++++++++++ 3 files changed, 26 insertions(+), 1 deletion(-) diff --git a/.jules/palette.md b/.jules/palette.md index ea004e2d2..29dbeddeb 100644 --- a/.jules/palette.md +++ b/.jules/palette.md @@ -81,3 +81,7 @@ ## 2026-08-12 - Skip to Content Accessibility **Learning:** Screen reader and keyboard-only users experience significant friction when forced to navigate through repetitive header controls on every page load. **Action:** Keep a visible-on-focus skip link as the first interactive element, target a programmatically focusable main container, and give the focused link a high-contrast outline. + +## 2023-10-27 - 파일 업로드 버튼 접근성 개선 +**Learning:** `aria-hidden="true"`는 파일 입력 요소를 접근성 트리에서 제거하여 스크린 리더에서 읽히지 않도록 합니다. 네이티브 input[type="file"]을 커스텀 버튼으로 교체할 때, 네이티브 요소를 완전히 숨기고 커스텀 버튼이 포커스를 받도록 보장해야 합니다. +**Action:** 접근성 개선을 위해 네이티브 요소에 `aria-hidden="true"`, `tabindex="-1"`, `class="sr-only"`를 적용하고 이를 트리거하는 프록시 버튼을 사용합니다. diff --git a/scanner/dashboard/index.html b/scanner/dashboard/index.html index 132bc31b2..b213e626c 100644 --- a/scanner/dashboard/index.html +++ b/scanner/dashboard/index.html @@ -93,7 +93,8 @@ AppGuardrail no findings loaded - + +

@@ -325,6 +326,9 @@

Dashboard

} const fileInput = document.getElementById('file'); +const fileProxy = document.getElementById('file-proxy'); +fileProxy.addEventListener('click', () => fileInput.click()); + fileInput.addEventListener('change', () => { const selectedFile = fileInput.files?.[0]; fileInput.value = ''; diff --git a/tests/test_dashboard_core.py b/tests/test_dashboard_core.py index 75a5809f8..1711372b2 100644 --- a/tests/test_dashboard_core.py +++ b/tests/test_dashboard_core.py @@ -302,3 +302,20 @@ def test_dashboard_search_escape_clears_input(): assert "e.key === 'Escape'" in html assert "query = '';" in html assert "render();" in html + + +def test_file_upload_proxy_accessibility_contract(): + """File upload must use an accessible proxy button instead of native file input.""" + html = dashboard_index_path().read_text(encoding="utf-8") + assert 'class="sr-only"' in html and 'tabindex="-1"' in html and 'aria-hidden="true"' in html and ' fileInput.click())" in html + + +def test_file_upload_proxy_accessibility_contract_is_documented_accurately(): + """UX accessibility learnings must be properly documented in the journal.""" + import pathlib + journal_path = pathlib.Path(__file__).parent.parent / ".jules" / "palette.md" + if journal_path.exists(): + journal_text = journal_path.read_text(encoding="utf-8") + assert '`aria-hidden="true"`는 파일 입력 요소를 접근성 트리에서 제거' in journal_text From 1e238df54b5dbad373df176d39a95adb2de5337e Mon Sep 17 00:00:00 2001 From: seonghobae <8172694+seonghobae@users.noreply.github.com> Date: Tue, 6 Oct 2026 05:47:12 +0000 Subject: [PATCH 2/3] =?UTF-8?q?=F0=9F=8E=A8=20Palette:=20=EB=8C=80?= =?UTF-8?q?=EC=8B=9C=EB=B3=B4=EB=93=9C=20=ED=8C=8C=EC=9D=BC=20=EC=97=85?= =?UTF-8?q?=EB=A1=9C=EB=93=9C=20=ED=94=84=EB=A1=9D=EC=8B=9C=20=EB=B2=84?= =?UTF-8?q?=ED=8A=BC=20=EB=8F=84=EC=9E=85=20=EB=B0=8F=20=EC=A0=91=EA=B7=BC?= =?UTF-8?q?=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 대시보드 헤더의 네이티브 파일 입력(input[type="file"]) 요소를 접근성 트리에서 완전히 숨기고(`aria-hidden="true"`, `class="sr-only"`, `tabindex="-1"`) 이를 트리거하는 시각적 프록시 버튼으로 교체하여 일관된 룩 앤 필과 접근성을 보장합니다. - 요소에 `class="sr-only"` 및 `aria-hidden="true"` 속성을 추가하여 스크린 리더 등에서 잘못된/중복된 포커스를 받지 않도록 개선 - `primary-action` 디자인 토큰 클래스를 활용하는 버튼 생성 및 자바스크립트 클릭 프록시 이벤트 바인딩 추가 - 관련된 접근성 보장 UI 컨트랙트 테스트 추가 및 패스 확인 - `.jules/palette.md` 접근성 개선 인사이트 한국어 기록 완료 From a041446661d999cf9b6c2991d7b46a3d2e4843fc Mon Sep 17 00:00:00 2001 From: seonghobae <8172694+seonghobae@users.noreply.github.com> Date: Tue, 6 Oct 2026 05:49:30 +0000 Subject: [PATCH 3/3] =?UTF-8?q?=F0=9F=8E=A8=20Palette:=20=EB=8C=80?= =?UTF-8?q?=EC=8B=9C=EB=B3=B4=EB=93=9C=20=ED=8C=8C=EC=9D=BC=20=EC=97=85?= =?UTF-8?q?=EB=A1=9C=EB=93=9C=20=ED=94=84=EB=A1=9D=EC=8B=9C=20=EB=B2=84?= =?UTF-8?q?=ED=8A=BC=20=EB=8F=84=EC=9E=85=20=EB=B0=8F=20=EC=A0=91=EA=B7=BC?= =?UTF-8?q?=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 대시보드 헤더의 네이티브 파일 입력(input[type="file"]) 요소를 접근성 트리에서 완전히 숨기고(`aria-hidden="true"`, `class="sr-only"`, `tabindex="-1"`) 이를 트리거하는 시각적 프록시 버튼으로 교체하여 일관된 룩 앤 필과 접근성을 보장합니다. - 요소에 `class="sr-only"` 및 `aria-hidden="true"` 속성을 추가하여 스크린 리더 등에서 잘못된/중복된 포커스를 받지 않도록 개선 - `primary-action` 디자인 토큰 클래스를 활용하는 버튼 생성 및 자바스크립트 클릭 프록시 이벤트 바인딩 추가 - 관련된 접근성 보장 UI 컨트랙트 테스트 추가 및 패스 확인 - `.jules/palette.md` 접근성 개선 인사이트 한국어 기록 완료