Skip to content

ui(dashboard): proxy file picker through a visible native button - #1131

Draft
seonghobae wants to merge 13 commits into
developfrom
palette-native-file-input-proxy-11067405564320294690
Draft

seonghobae wants to merge 13 commits into
developfrom
palette-native-file-input-proxy-11067405564320294690

Conversation

@seonghobae

@seonghobae seonghobae commented Sep 7, 2026

Copy link
Copy Markdown
Contributor

변경 범위

Dashboard header의 native <input type="file">을 직접 노출하는 대신 숨긴 input과 visible native <button>을 연결합니다. 버튼 activation은 기존 file input의 picker를 열고, 실제 파일 선택·파싱·상태 갱신은 기존 change listener가 계속 소유합니다.

  • protected/base: develop@e71d37e7c58118e6764c96ab7c4492fe33eed6f8
  • current exact head: 324f07b3385ef3e3684e58e77892549cce469232
  • fresh compare: ahead=13 / behind=0
  • lifecycle: Draft / exact-head checks running / material-UI browser evidence incomplete
  • effective files: scanner/dashboard/index.html, tests/test_dashboard_core.py, tests/test_dashboard_upload_proxy_contract.py, CHANGELOG.d/1131-dashboard-upload-proxy.md

Repair / duplicate consolidation

Protected .jules/palette.md already owns Native File Input Iteration Friction: selected File을 capture한 뒤 native input을 clear하고, native button + explicit event listener로 picker를 proxy하는 경계입니다. Branch-local generated doctrine은 별도 repository-wide rule로 승격하지 않습니다.

Live head a1333e3c9783d5d2f83ce15804db078ca5bd6602에서 duplicate Palette doctrine이 다시 추가되고 canonical release-note fragment가 삭제된 것을 확인했습니다. History를 되감거나 force-push하지 않고 ordinary child 324f07b3385ef3e3684e58e77892549cce469232에서 protected Palette blob을 복원하고 CHANGELOG.d/1131-dashboard-upload-proxy.md를 다시 승계했습니다. Fresh protected compare에서 .jules/palette.md delta는 0입니다.

기존 dashboard test는 visible text만 확인해 hidden input, exact accept contract, button→picker binding, same-file reselect를 위한 input reset이 사라져도 통과할 수 있었습니다. 새 tests/test_dashboard_upload_proxy_contract.py는 이 source-level 계약을 함께 고정합니다. 이는 실제 browser picker/E2E 증거를 대체하지 않습니다.

Open duplicate #1212는 같은 buyer-visible button→hidden-input behavior를 별도 구현합니다. 이 canonical branch가 current-head/browser acceptance를 완성하기 전에는 둘 중 어느 것도 중복 merge하거나 단순 Close하지 않습니다.

Material UI acceptance

Ready 전 current exact head에서 실제 browser/E2E로 다음을 검증해야 합니다.

  • Tab 순서가 Upload findings file native button에 도달하고 hidden input에는 불필요한 Tab stop이 생기지 않을 것
  • Enter/Space 및 pointer activation이 file picker를 한 번 여는 실제 interaction contract
  • cancel 후 기존 state가 유지되고 같은 파일 재선택이 fileInput.value = '' 계약대로 다시 처리될 것
  • normal/loading/empty/error/permission-like failure state에서 버튼과 상태 안내가 기능을 유지할 것
  • desktop/mobile/중간 viewport에서 header overflow·충돌·과소 touch target이 없을 것
  • accessible name이 visible label과 일치하고 focus indicator 및 accessibility tree가 정상일 것
  • current-head screenshot/E2E evidence를 남길 것

현재 product UI는 영어 중심이므로 이 PR 하나로 KO/EN/JA/ZH/VI/ES/DE/FR locale completeness를 주장하지 않습니다. locale/translation-ledger 전환은 별도 product-level contract가 필요합니다.

Exact-head gate

324f07b3385ef3e3684e58e77892549cce469232에서 Tests, Security, SAST, CodeQL 및 적용 가능한 repository controls가 새 generation으로 materialize되었습니다. 현재 nonterminal 결과는 GREEN으로 취급하지 않습니다. Current-head independent review와 실제 browser evidence도 별도 필요합니다. Merge는 ordinary protected path에서만 허용하며 self-approval, gate weakening, force push, destructive rebase, source-neutral retrigger를 사용하지 않습니다.

Delivery Gate

  • 의도성: PASS — native picker 경계를 유지하면서 기존 dashboard action treatment를 재사용합니다.
  • 기능 완전성: PARTIAL — source wiring과 regression contract는 있으나 실제 picker/browser interaction evidence가 없습니다.
  • 콘텐츠 적합성: PASS — duplicate generated doctrine을 제거하고 release-visible changelog를 복구했습니다.
  • 복원력: FAIL — responsive, keyboard, cancel/reselect, error-state browser evidence가 없습니다.
  • 증거성: FAIL — exact-head hosted gates와 screenshot/E2E가 아직 완결되지 않았습니다.
  • 고유성: PASS — AppGuardrail findings loading task와 기존 primary-action 체계에 직접 결박됩니다.

네이티브 `<input type="file">` 요소는 브라우저마다 스타일이 다르고 일관되게 꾸미기 어렵습니다. 또한 기존의 `aria-label`은 'label-in-name' 원칙을 시각적으로 따르지 않습니다.

이를 개선하기 위해, 네이티브 입력 필드는 `hidden` 속성으로 숨기고, 기존 `.primary-action` 클래스를 사용하는 네이티브 `<button>`을 추가하여 클릭 이벤트를 프록시하도록 수정했습니다. 이로써 접근성을 유지하면서 기존 UI 컴포넌트와 어울리는 시각적 UX를 제공합니다. UI 계약 테스트(`test_dashboard_core.py`)도 함께 업데이트되었습니다.
@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.

@coderabbitai

coderabbitai Bot commented Sep 7, 2026

Copy link
Copy Markdown

Review Change Stack

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info
⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Team

Run ID: 957d8929-76de-4348-997e-9c0b9dfb2a9f

📥 Commits

Reviewing files that changed from the base of the PR and between e71d37e and ea91cc5.

📒 Files selected for processing (3)
  • .jules/palette.md
  • scanner/dashboard/index.html
  • tests/test_dashboard_core.py

Included review availability: Your plan provides up to 1 included review per hour; 0 remain after this review.


📝 Walkthrough

Walkthrough

파일 입력을 숨기고 Upload findings file 버튼을 추가했습니다. 버튼 클릭으로 숨겨진 파일 입력을 열도록 연결했습니다. 테스트는 버튼 표시 텍스트를 검증합니다. 관련 학습 항목도 추가했습니다.

Changes

파일 업로드 버튼 프록시

Layer / File(s) Summary
파일 업로드 버튼 흐름
.jules/palette.md, scanner/dashboard/index.html, tests/test_dashboard_core.py
파일 입력을 hidden으로 변경하고 header-browse-findings 버튼을 추가했습니다. 버튼 클릭 시 파일 입력을 열도록 이벤트 리스너를 연결했습니다. 테스트는 버튼의 표시 텍스트를 검증합니다. 프록시 구현 방식에 대한 학습 항목을 추가했습니다.

Estimated code review effort: 1 (Trivial) | ~5 minutes

Merge Risk: ⚪ Minimal · up to ea91c

The dashboard now opens the file chooser through a clearly labeled native upload button while retaining the underlying file input flow. No concrete merge-blocking risk remains.

🚥 Pre-merge checks | ✅ 5
✅ Passed checks (5 passed)
Check name Status Explanation
Docstring Coverage ✅ Passed Docstring coverage is 100.00% which is sufficient. The required threshold is 80.00%. Docstring coverage is scoped to functions touched by this diff. Analyzed 1 functions across 1 files. (2 skipped: 2 …
Linked Issues check ✅ Passed Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check ✅ Passed Check skipped because no linked issues were found for this pull request.
Description Check ✅ Passed Check skipped - CodeRabbit’s high-level summary is enabled.
Title check ✅ Passed 제목은 보이는 네이티브 버튼으로 파일 선택기를 중계하는 이번 변경의 핵심을 정확하고 간결하게 설명합니다.
✨ Finishing Touches
📝 Generate docstrings
  • Create stacked PR
  • Commit on current branch
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Commit unit tests in branch palette-native-file-input-proxy-11067405564320294690

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

Comment @coderabbitai help to get the list of available commands.

@seonghobae seonghobae added priority: medium Normal-priority or P2 work enhancement New feature or request labels Sep 7, 2026 — with ChatGPT Codex Connector
seonghobae and others added 2 commits September 7, 2026 08:55
네이티브 `<input type="file">` 요소는 브라우저마다 스타일이 다르고 일관되게 꾸미기 어렵습니다. 또한 기존의 `aria-label`은 'label-in-name' 원칙을 시각적으로 따르지 않습니다.

이를 개선하기 위해, 네이티브 입력 필드는 `hidden` 속성으로 숨기고, 기존 `.primary-action` 클래스를 사용하는 네이티브 `<button>`을 추가하여 클릭 이벤트를 프록시하도록 수정했습니다. 이로써 접근성을 유지하면서 기존 UI 컴포넌트와 어울리는 시각적 UX를 제공합니다. UI 계약 테스트(`test_dashboard_core.py`)도 함께 업데이트되었습니다.
@seonghobae
seonghobae marked this pull request as draft September 7, 2026 09:16
@seonghobae seonghobae changed the title 🎨 UI: 파일 입력 버튼의 접근성 및 스타일 개선 ui(dashboard): proxy file picker through a visible native button Sep 7, 2026
seonghobae and others added 3 commits September 7, 2026 12:57
네이티브 `<input type="file">` 요소는 브라우저마다 스타일이 다르고 일관되게 꾸미기 어렵습니다. 또한 기존의 `aria-label`은 'label-in-name' 원칙을 시각적으로 따르지 않습니다.

이를 개선하기 위해, 네이티브 입력 필드는 `hidden` 속성으로 숨기고, 기존 `.primary-action` 클래스를 사용하는 네이티브 `<button>`을 추가하여 클릭 이벤트를 프록시하도록 수정했습니다. 이로써 접근성을 유지하면서 기존 UI 컴포넌트와 어울리는 시각적 UX를 제공합니다. UI 계약 테스트(`test_dashboard_core.py`)도 함께 업데이트되었습니다.
네이티브 `<input type="file">` 요소는 브라우저마다 스타일이 다르고 일관되게 꾸미기 어렵습니다. 또한 기존의 `aria-label`은 'label-in-name' 원칙을 시각적으로 따르지 않습니다.

이를 개선하기 위해, 네이티브 입력 필드는 `hidden` 속성으로 숨기고, 기존 `.primary-action` 클래스를 사용하는 네이티브 `<button>`을 추가하여 클릭 이벤트를 프록시하도록 수정했습니다. 이로써 접근성을 유지하면서 기존 UI 컴포넌트와 어울리는 시각적 UX를 제공합니다. UI 계약 테스트(`test_dashboard_core.py`)도 함께 업데이트되었습니다.
seonghobae and others added 5 commits September 11, 2026 07:16
네이티브 `<input type="file">` 요소는 브라우저마다 스타일이 다르고 일관되게 꾸미기 어렵습니다. 또한 기존의 `aria-label`은 'label-in-name' 원칙을 시각적으로 따르지 않습니다.

이를 개선하기 위해, 네이티브 입력 필드는 `hidden` 속성으로 숨기고, 기존 `.primary-action` 클래스를 사용하는 네이티브 `<button>`을 추가하여 클릭 이벤트를 프록시하도록 수정했습니다. 이로써 접근성을 유지하면서 기존 UI 컴포넌트와 어울리는 시각적 UX를 제공합니다. UI 계약 테스트(`test_dashboard_core.py`)도 함께 업데이트되었습니다.
네이티브 `<input type="file">` 요소는 브라우저마다 스타일이 다르고 일관되게 꾸미기 어렵습니다. 또한 기존의 `aria-label`은 'label-in-name' 원칙을 시각적으로 따르지 않습니다.

이를 개선하기 위해, 네이티브 입력 필드는 `hidden` 속성으로 숨기고, 기존 `.primary-action` 클래스를 사용하는 네이티브 `<button>`을 추가하여 클릭 이벤트를 프록시하도록 수정했습니다. 이로써 접근성을 유지하면서 기존 UI 컴포넌트와 어울리는 시각적 UX를 제공합니다. UI 계약 테스트(`test_dashboard_core.py`)도 함께 업데이트되었습니다.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

enhancement New feature or request priority: medium Normal-priority or P2 work

Projects

Status: Backlog

Development

Successfully merging this pull request may close these issues.

1 participant