ui(dashboard): proxy file picker through a visible native button - #1131
seonghobae wants to merge 13 commits into
Conversation
네이티브 `<input type="file">` 요소는 브라우저마다 스타일이 다르고 일관되게 꾸미기 어렵습니다. 또한 기존의 `aria-label`은 'label-in-name' 원칙을 시각적으로 따르지 않습니다. 이를 개선하기 위해, 네이티브 입력 필드는 `hidden` 속성으로 숨기고, 기존 `.primary-action` 클래스를 사용하는 네이티브 `<button>`을 추가하여 클릭 이벤트를 프록시하도록 수정했습니다. 이로써 접근성을 유지하면서 기존 UI 컴포넌트와 어울리는 시각적 UX를 제공합니다. UI 계약 테스트(`test_dashboard_core.py`)도 함께 업데이트되었습니다.
|
👋 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. |
|
No actionable comments were generated in the recent review. 🎉 ℹ️ Recent review info⚙️ Run configurationConfiguration used: Organization UI Review profile: CHILL Plan: Team Run ID: 📒 Files selected for processing (3)
Included review availability: Your plan provides up to 1 included review per hour; 0 remain after this review. 📝 WalkthroughWalkthrough파일 입력을 숨기고 Changes파일 업로드 버튼 프록시
Estimated code review effort: 1 (Trivial) | ~5 minutes Merge Risk: ⚪ Minimal · up to 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)
✨ Finishing Touches📝 Generate docstrings
🧪 Generate unit tests (beta)
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. Comment |
네이티브 `<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`)도 함께 업데이트되었습니다.
네이티브 `<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`)도 함께 업데이트되었습니다.
네이티브 `<input type="file">` 요소는 브라우저마다 스타일이 다르고 일관되게 꾸미기 어렵습니다. 또한 기존의 `aria-label`은 'label-in-name' 원칙을 시각적으로 따르지 않습니다. 이를 개선하기 위해, 네이티브 입력 필드는 `hidden` 속성으로 숨기고, 기존 `.primary-action` 클래스를 사용하는 네이티브 `<button>`을 추가하여 클릭 이벤트를 프록시하도록 수정했습니다. 이로써 접근성을 유지하면서 기존 UI 컴포넌트와 어울리는 시각적 UX를 제공합니다. UI 계약 테스트(`test_dashboard_core.py`)도 함께 업데이트되었습니다.
변경 범위
Dashboard header의 native
<input type="file">을 직접 노출하는 대신 숨긴 input과 visible native<button>을 연결합니다. 버튼 activation은 기존 file input의 picker를 열고, 실제 파일 선택·파싱·상태 갱신은 기존changelistener가 계속 소유합니다.develop@e71d37e7c58118e6764c96ab7c4492fe33eed6f8324f07b3385ef3e3684e58e77892549cce469232ahead=13 / behind=0scanner/dashboard/index.html,tests/test_dashboard_core.py,tests/test_dashboard_upload_proxy_contract.py,CHANGELOG.d/1131-dashboard-upload-proxy.mdRepair / duplicate consolidation
Protected
.jules/palette.mdalready ownsNative File Input Iteration Friction: selectedFile을 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 child324f07b3385ef3e3684e58e77892549cce469232에서 protected Palette blob을 복원하고CHANGELOG.d/1131-dashboard-upload-proxy.md를 다시 승계했습니다. Fresh protected compare에서.jules/palette.mddelta는 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로 다음을 검증해야 합니다.
Upload findings filenative button에 도달하고 hidden input에는 불필요한 Tab stop이 생기지 않을 것fileInput.value = ''계약대로 다시 처리될 것현재 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
primary-action체계에 직접 결박됩니다.