🎨 Palette: Add explicit visual required indicator to document field

.jules/palette.md

@@ -13,3 +13,7 @@
 ## 2026-07-13 - Async Table Actions UX
 **Learning:** Adding explicit loading and disabled states to table action buttons that invoke asynchronous processes helps prevent redundant API calls and visually assures the user that their request is being handled.
 **Action:** Consistently apply `disabled` state and `Loading...` text changes to inline table action buttons linked to async workflows, and carefully preserve underlying DOM structures with `Array.from(btn.childNodes)` during the loading cycle to avoid rendering regressions.
+
+## 2026-10-05 - Required field visually explicit indicator
+**Learning:** Depending exclusively on implicit input `required` attributes and custom CSS pseudo-class required styling triggers accessibility violation alerts in automated accessibility test cases (e.g., `ViewerUiRequiredFieldAccessibilityTest`). Form fields MUST include an explicit textual indicator that they are required directly within the `<label>`.
+**Action:** When creating forms with required inputs, always append an explicit `<span>` indicator with text "(required)" directly inside the `<label>` to comply with project-specific accessibility validation.

src/main/java/com/clearfolio/viewer/controller/ViewerUiController.java

@@ -185,7 +185,7 @@ private static String demoShellHtml() {
                         </div>
 
                         <form id="upload-form" class="upload-form" enctype="multipart/form-data">
-                          <label class="field-label" for="file-input">Document</label>
+                          <label class="field-label" for="file-input"><span>Document (required)</span></label>
                           <input id="file-input" name="file" class="file-input" type="file" required />
 
                           <div class="actions">