🎨 Palette: [파일 드롭 존 클릭 기능 추가 및 사용성 개선]

.jules/palette.md

@@ -1,3 +1,6 @@
+## 2024-08-14 - 드롭 존 스크린 리더 지원을 위한 ARIA 랜드마크 추가
+**Learning:** 파일 업로드 폼을 감싸는 전체 드롭 존(box) 영역이 시각적으로는 구분되어 있으나, 스크린 리더 사용자에게는 명확한 랜드마크로 인식되지 않아 상호작용 의도를 파악하기 어려움.
+**Action:** `role="region" aria-label="File Upload Drop Zone"` 등 명시적인 ARIA 속성을 추가하여 스크린 리더 사용자가 파일 드래그 앤 드롭 영역을 쉽게 식별할 수 있도록 한다.
 ## 2024-07-15 - Dynamic Size formatting and Total Size Validation
 **Learning:** Hardcoding human-readable sizes (like '5 GiB') in validation error messages is error-prone when the underlying constant changes. Moreover, failing to validate total upload size against backend limits (e.g., MAX_UPLOAD_BYTES) in batch file uploads frustrates users who wait for a large upload to finish only to get a server-side 413 Payload Too Large error.
 **Action:** Always format backend byte limit constants dynamically (e.g., `formatBinaryBytes(MAX_UPLOAD_BYTES)`) on the client side to display accurate error messages. For multiple file inputs, ensure both the file count and the combined file size are validated against backend limits, giving immediate inline feedback via `setCustomValidity` and `aria-invalid`.

saas_web.py

@@ -167,7 +167,7 @@ async def add_security_headers(request: Request, call_next):
     </style>
 </head>
 <body>
-    <div class="box" id="drop-zone">
+    <div class="box" id="drop-zone" role="region" aria-label="File Upload Drop Zone">
         <h2>Shrink Media File</h2>
         <form action="/shrink" method="post" enctype="multipart/form-data" id="shrink-form">
             <p>
@@ -405,7 +405,7 @@ async def add_security_headers(request: Request, call_next):
         }
         </script>
     </div>
-    <div class="box" id="batch-drop-zone" style="margin-top: 20px;">
+    <div class="box" id="batch-drop-zone" style="margin-top: 20px;" role="region" aria-label="Batch File Upload Drop Zone">
         <h2>Shrink Multiple Files</h2>
         <form action="/shrink-batch" method="post" enctype="multipart/form-data" id="shrink-batch-form">
             <p>

tests/test_saas_web.py

@@ -47,6 +47,9 @@ def test_get_ui_includes_accessible_file_input_helpers(self):
         self.assertIn('id="file_help"', html)
         self.assertIn('class="required-star" aria-hidden="true"', html)
 
+        self.assertIn('role="region" aria-label="File Upload Drop Zone"', html)
+        self.assertIn('role="region" aria-label="Batch File Upload Drop Zone"', html)
+
     def test_get_ui_includes_binary_file_size_validation(self):
         response = client.get("/")
         self.assertEqual(response.status_code, 200)