🎨 Palette: 파일 업로드 폼 필수 항목 시각적 표시 추가 및 접근성 개선

[seonghobae]

💡 변경 사항: 파일 업로드 폼의 'Document' 라벨에 필수 항목임을 나타내는 시각적 표시자(*)를 추가했습니다.
🎯 해결된 문제: 파일 입력 필드는 필수 항목이지만, 시각적인 안내가 부족하여 사용자 경험을 저해하는 문제를 해결했습니다.
♿ 접근성: 스크린 리더 사용자가 필수 항목임을 중복으로 안내받지 않도록 시각적 표시자에 aria-hidden="true" 속성을 추가했습니다. 또한, 그리드 레이아웃에서 표시자가 줄바꿈되지 않도록 <span> 래퍼를 적용했습니다.

---

PR created automatically by Jules for task 18047446286635494914 started by @seonghobae

Summary by CodeRabbit

• 접근성 개선
  • 파일 업로드 양식의 필수 입력 표시(*)가 줄바꿈 없이 표시됩니다.
  • 필수 표시 기호가 스크린 리더에서 중복 낭독되지 않도록 개선되었습니다.

[google-labs-jules]

👋 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]

Important

Draft PR not reviewed

Draft PRs are not automatically reviewed by default.

• Trigger a manual review

To automatically review draft PRs, update your CodeRabbit configuration:

reviews:
  auto_review:
    drafts: true

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Advanced

Run ID: c54b0904-8e20-4dab-9cb3-d81a92a1858e

📥 Commits

Reviewing files that changed from the base of the PR and between 06633a2 and e5467e0.

📒 Files selected for processing (3)

• .jules/palette.md
• src/main/java/com/clearfolio/viewer/controller/ViewerUiController.java
• src/test/java/com/clearfolio/viewer/controller/ViewerUiControllerTest.java

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

---

📝 Walkthrough

Walkthrough

파일 입력 라벨에 필수 입력 표시인 별표를 추가했습니다. 별표는 aria-hidden="true"로 스크린 리더의 중복 낭독을 방지합니다. 홈 화면 테스트와 관련 지침도 갱신했습니다.

Changes

필수 입력 표시

Layer / File(s)	Summary
라벨 마크업 및 검증 src/main/java/com/clearfolio/viewer/controller/ViewerUiController.java, src/test/java/com/clearfolio/viewer/controller/ViewerUiControllerTest.java, .jules/palette.md	파일 입력 라벨이 텍스트와 aria-hidden="true" 별표를 포함하도록 변경되었습니다. for="file-input" 연결은 유지됩니다. 홈 화면 테스트는 새 마크업을 검증하며, 지침은 동일한 표시 방식을 설명합니다.

Priority: ⬇️ Low

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

Change: Feature

Merge Risk: ⚪ Minimal · up to a5b83

The required-field marker preserves the label association and avoids duplicate screen-reader announcement, with corresponding test coverage.

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%. Docstring coverage is scoped to functions touched by this diff. Analyzed 2 functions across 2 files. (1 skipped: 1 …	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	제목은 파일 업로드 폼의 필수 항목 표시와 접근성 개선을 정확히 설명합니다. 변경 목적과 일치하며 간결하고 구체적입니다.
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.

Full details: Docstring Coverage

Explanation

Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%. Docstring coverage is scoped to functions touched by this diff. Analyzed 2 functions across 2 files. (1 skipped: 1 unsupported.)

✨ Finishing Touches 💡 1

📝 Generate docstrings 💡

• Create stacked PR
• Commit on current branch

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch palette-upload-form-indicator-18047446286635494914

---

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

• X
• Mastodon
• Reddit
• LinkedIn

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

[cwl-noema-review]

Noema LLM review

PR #584 adds a required-indicator visual to the file upload label with proper aria-hidden handling and documents the practice in the palette. All changes are additive, preserve existing attributes, and the new assertion matches the produced markup exactly. No blocking issues found.

Reviewed changed lines

• .jules/palette.md:16 (RIGHT): New palette entry added documenting file upload form required field visual indicator best practice.
• .jules/palette.md:17 (RIGHT): Learning statement explains that required indicator (*) inside display:grid layout should be wrapped in span to prevent line break, and aria-hidden="true" should be added to avoid duplicate screen reader announcement.
• .jules/palette.md:18 (RIGHT): Action statement instructs adding aria-hidden="true" to required indicators and considering grid layout effects when structuring elements.
• .jules/palette.md:19 (RIGHT): Blank line terminating the new palette entry block.
• src/main/java/com/clearfolio/viewer/controller/ViewerUiController.java:188 (LEFT): Original label was a simple single-line label without required indicator.
• src/main/java/com/clearfolio/viewer/controller/ViewerUiController.java:188 (RIGHT): New label opening tag now spans multiple lines to wrap content in spans.
• src/main/java/com/clearfolio/viewer/controller/ViewerUiController.java:189 (RIGHT): Text 'Document' and the required indicator '*' are wrapped in nested spans: outer span contains text and inner span with aria-hidden="true" for the asterisk.
• src/main/java/com/clearfolio/viewer/controller/ViewerUiController.java:190 (RIGHT): Second line of the nested span structure contains the aria-hidden asterisk span.
• src/main/java/com/clearfolio/viewer/controller/ViewerUiController.java:191 (RIGHT): Closing label tag ends the multi-line label element.
• src/test/java/com/clearfolio/viewer/controller/ViewerUiControllerTest.java:43 (RIGHT): New assertion added to verify the rendered required indicator markup includes aria-hidden="true".

Adversarial validation

• src/main/java/com/clearfolio/viewer/controller/ViewerUiController.java:189 (RIGHT) falsified: The required indicator becomes announced twice by screen readers, causing noisy accessibility output. — The inner span wrapping '*' has aria-hidden="true", so assistive technology ignores the asterisk and only announces the visible text 'Document'; label/input association remains via for="file-input".
• src/test/java/com/clearfolio/viewer/controller/ViewerUiControllerTest.java:43 (RIGHT) falsified: The new test assertion cannot match the rendered controller template and would fail in CI. — The controller now generates <span>Document <span class="error__title" aria-hidden="true">*</span></span>, which contains the exact substring used in the assertion; therefore the assertion matches and the test should pass.
• src/main/java/com/clearfolio/viewer/controller/ViewerUiController.java:188 (RIGHT) falsified: The multi-line label rewrite drops the for attribute and breaks label/input association. — The generated label still contains class="field-label" and for="file-input"; only the label content is replaced with nested spans, preserving the association.
• Residual risk: The screen reader accessibility benefit is assessed structurally rather than through automated accessibility testing, but the aria-hidden placement and label association are correct for the produced markup.

Findings

• No blocking findings.

• Result: APPROVE
• Head SHA: e5467e0e1516784452e04cf65629690192db029c
• Reviewer credential: noema-review-github-app-refresh
• Actor: cwl-noema-review[bot]

[cwl-noema-review]

Noema LLM review

The changes correctly implement visual and accessibility markers for required form fields, adhering to the newly documented guidelines in the project's palette. The HTML structure prevents unexpected line breaks in grid layouts and ensures screen readers do not redundantly announce the asterisk.

Reviewed changed lines

• src/main/java/com/clearfolio/viewer/controller/ViewerUiController.java:188 (RIGHT): The implementation uses a nested structure to prevent line breaks in grid layouts and applies aria-hidden="true" to the asterisk to avoid screen reader redundancy, adhering to the guidelines in .jules/palette.md.
• src/test/java/com/clearfolio/viewer/controller/ViewerUiControllerTest.java:43 (RIGHT): The test assertion explicitly verifies the presence of 'aria-hidden="true">*', ensuring both accessibility attributes and the structural span are rendered.
• .jules/palette.md:16 (RIGHT): The documentation correctly codifies the requirement for span wrapping and aria-hidden attributes for required field markers in grid layouts.

Adversarial validation

• src/main/java/com/clearfolio/viewer/controller/ViewerUiController.java:188 (RIGHT) falsified: The addition of spans might break the existing layout or lead to screen reader redundancy. — Confirmed the presence of 'aria-hidden="true"' and a wrapping span, which specifically mitigates these risks per the documented architectural pattern.
• src/test/java/com/clearfolio/viewer/controller/ViewerUiControllerTest.java:43 (RIGHT) falsified: The test might pass even if the accessibility attribute is missing if the assertion is too broad. — The test specifically looks for 'aria-hidden="true">*', which is a precise check for the required marker's accessibility and structure.
• Residual risk: none

Findings

• No blocking findings.

• Result: APPROVE
• Head SHA: b438df07c8a3ab52d84e4262f2cf8596681548db
• Reviewer credential: noema-review-github-app-refresh
• Actor: cwl-noema-review[bot]

[cwl-noema-review]

Noema LLM review

The change wraps the required-field asterisk in nested spans with aria-hidden="true" to prevent grid-layout line breaks and avoid duplicate screen-reader announcements. The label-to-input association via the for attribute is preserved, and the test asserts the exact generated markup, guarding against regressions. No correctness, security, or behavioral issues found.

Reviewed changed lines

• src/main/java/com/clearfolio/viewer/controller/ViewerUiController.java:189 (RIGHT): The label content is now wrapped in a <span> containing the visible label text 'Document' and the hidden required-field indicator. The for="file-input" attribute remains intact, preserving click-to-focus behavior and label association.
• src/main/java/com/clearfolio/viewer/controller/ViewerUiController.java:190 (RIGHT): The required indicator is separated onto its own element with aria-hidden="true", so screen readers will not announce the asterisk separately from the input's required state. The nested span structure is consistent with avoiding line breaks in display: grid layouts.
• src/test/java/com/clearfolio/viewer/controller/ViewerUiControllerTest.java:43 (RIGHT): The test asserts the exact substring aria-hidden="true">*</span></span>, confirming both the visual indicator and its hidden accessibility state are present in the generated HTML. This guards against silent regressions in the required-marker markup.

Adversarial validation

• src/main/java/com/clearfolio/viewer/controller/ViewerUiController.java:189 (RIGHT) falsified: The nested span wrapper breaks the label-to-input association or the click-to-focus behavior. — The diff retains for="file-input" on the <label> and only wraps the existing text 'Document' in inner spans; the input remains unchanged and the label text is still visible.
• src/test/java/com/clearfolio/viewer/controller/ViewerUiControllerTest.java:43 (RIGHT) falsified: The test assertion is too permissive and would pass even if the aria-hidden attribute were removed. — The assertion matches the exact substring aria-hidden="true">*</span></span>, which can only appear when the aria-hidden attribute and the nested span structure are both present in the rendered HTML.
• Residual risk: No material residual risk identified. The change is isolated to static label markup and a corresponding string assertion; no behavioral, security, or performance impact is expected.

Findings

• No blocking findings.

• Result: APPROVE
• Head SHA: 353a416f5769179710006bc345daf19f6dfdb90b
• Reviewer credential: noema-review-github-app-refresh
• Actor: cwl-noema-review[bot]

[cwl-noema-review]

Noema LLM review

The PR adds a visible required asterisk to the upload form label while keeping it hidden from assistive technology, documents that markup choice in the learning palette, and updates the controller test to cover the generated HTML. No blocking correctness, security, accessibility, or maintainability issues found. The change follows the documented pattern for grid layouts and uses the existing required attribute for programmatic required-state exposure.

Reviewed changed lines

• src/main/java/com/clearfolio/viewer/controller/ViewerUiController.java:189 (RIGHT): The implementation wraps the label text and the asterisk in a single <span> and applies aria-hidden="true" to the asterisk. This prevents visual-only duplication of the requirement while keeping the requirement programmatically exposed via the input's required attribute. The markup change is limited to the demo shell and appears safe.
• src/test/java/com/clearfolio/viewer/controller/ViewerUiControllerTest.java:43 (RIGHT): The test was updated to expect the new required-indicator markup. Since the label is rendered by the controller, this test guards against accidental loss or malformatting of the new markup. No test-only maintainability concern found.
• .jules/palette.md:18 (RIGHT): Documentation-only change. Accurately records the design rationale for the aria-hidden span pattern and does not affect application behavior.

Adversarial validation

• src/main/java/com/clearfolio/viewer/controller/ViewerUiController.java:189 (RIGHT) falsified: A screen reader might announce the required indicator even though the field is already required. — The generated HTML includes an aria-hidden="true" attribute on the asterisk span, which is the standard mechanism for hiding purely visual indicators.
• .jules/palette.md:18 (RIGHT) falsified: The learning file may introduce untested or unnecessary project guidance. — The diff touches only a Markdown learning file; no code path is referenced.
• Residual risk: None identified at this time.

Findings

• No blocking findings.

• Result: APPROVE
• Head SHA: 91f622f4b81f2f90130fb1d76553b0c63d2659f9
• Reviewer credential: noema-review-github-app-refresh
• Actor: cwl-noema-review[bot]

[cwl-noema-review]

Noema LLM review

The PR adds a required-field visual indicator to the upload form label, wraps the label text and marker in a span to avoid grid layout line breaks, marks the asterisk with aria-hidden for accessibility, documents the learning in the Jules palette, and extends the controller test to guard the new markup. The Java changes are well-formed HTML, preserve the label's association with the file input, and do not alter controller behavior. The palette entry follows the established format. The test assertion is consistent with the actual emitted markup.

Reviewed changed lines

• .jules/palette.md:16 (RIGHT): The 2026-09-13 palette entry documents the accessibility and layout learning behind the upload form change. It is dated and formatted consistently with preceding entries, and its action statement is actionable. No inconsistency or regression risk.
• .jules/palette.md:17 (RIGHT): The learning describes the need to wrap text and marker in a span to avoid line breaks in grid layouts and to use aria-hidden to avoid redundant screen-reader output. This directly matches the implementation in ViewerUiController and the test assertion.
• .jules/palette.md:18 (RIGHT): The action rule is prescriptive and consistent with the diff, guiding future work to add aria-hidden and account for grid layout when using required markers.
• .jules/palette.md:19 (RIGHT): The entry ends cleanly and does not disrupt the document structure of the palette file.
• src/main/java/com/clearfolio/viewer/controller/ViewerUiController.java:188 (LEFT): The removed single-line label is replaced by the new accessible label structure. The deletion is correctly paired with the expansion on the right side and introduces no behavioral change beyond the intended markup.
• src/main/java/com/clearfolio/viewer/controller/ViewerUiController.java:188 (RIGHT): The label element now contains a wrapping span. The for attribute remains intact, preserving the association with file-input. The opening span holds the text and the marker, which is the correct pattern for grid layouts.
• src/main/java/com/clearfolio/viewer/controller/ViewerUiController.java:189 (RIGHT): The outer span wraps 'Document' and the inner marker span, preventing the grid layout from introducing a line break between the text and the asterisk as intended by the documented learning.
• src/main/java/com/clearfolio/viewer/controller/ViewerUiController.java:190 (RIGHT): aria-hidden=true on the inner span prevents assistive technologies from announcing the visual asterisk, which would be redundant since the input has the required attribute. The marker is visually hidden from AT without affecting the visual presentation. This is the standard and correct accessibility pattern.
• src/main/java/com/clearfolio/viewer/controller/ViewerUiController.java:191 (RIGHT): The closing span and label tags are properly balanced, producing valid phrasing content inside the label. No HTML structural defects introduced.
• src/test/java/com/clearfolio/viewer/controller/ViewerUiControllerTest.java:43 (RIGHT): The test assertion checks for the exact substring aria-hidden="true">*, which matches the generated markup. This provides direct regression coverage for the accessibility change. The test style is consistent with the existing assertions in the same method.

Adversarial validation

• src/main/java/com/clearfolio/viewer/controller/ViewerUiController.java:188 (RIGHT) falsified: The label could become visually broken if the wrapping span inherits a display that affects the label's inline formatting. — The test body asserts the presence of the old string 'Document' and the new accessibility marker, and the controller change intentionally preserves the text content.
• src/main/java/com/clearfolio/viewer/controller/ViewerUiController.java:190 (RIGHT) falsified: The aria-hidden span might cause the label to have no accessible name, or the star could be read twice by screen readers. — The HTML structure contains the text node 'Document' within the label, and aria-hidden is applied only to the asterisk span. No aria-label or aria-labelledby was removed or added that would change the naming computation.
• src/test/java/com/clearfolio/viewer/controller/ViewerUiControllerTest.java:43 (RIGHT) falsified: The new assertion could be too strict or too loose, causing false positives or negatives in the test suite. — The diff confirms the exact string exists on the right side of the changed lines: aria-hidden="true">*. Any reasonable implementation with the same structure will contain these characters, and a regression in the required-marker logic would remove it, failing the test as intended.
• .jules/palette.md:16 (RIGHT) falsified: The palette entry could be inconsistent with the date format or could misuse Markdown, breaking the documentation index. — The diff shows three new lines, all following the established palette structure. The test suite does not validate palette formatting, so no test was impacted.
• Residual risk: No concrete regressions identified. A low-risk consideration is that the test asserts raw HTML output, making it brittle to future markup changes; however, the existing test suite already follows this pattern, so this is not a regression introduced by the PR.

Findings

• [low] src/main/java/com/clearfolio/viewer/controller/ViewerUiController.java:190 (RIGHT): The class name 'error__title' and the exact span structure is asserted in the test. Since 'error__title' is a CSS class, the absence of a matching rule is not a runtime issue. The heading class naming is generic but correct in the context of the upload area. The low severity is because no visibility or behavioral regression exists.

• Result: APPROVE
• Head SHA: 8abecdaf239d9af127b964d8d27c5dd1e9e939a1
• Reviewer credential: noema-review-github-app-refresh
• Actor: cwl-noema-review[bot]

[seonghobae]

Single-writer update — 2026-09-20: this PR is now Draft and remains evidence-preserved. Canonical product writer #598 at 1f96e0f181d06930de9c3a71a3fafd40e08bd6ac ordinary-forward carries the valid inner-span layout, native required, decorative aria-hidden marker, focused controller-test, and Palette semantics, and additionally removes the .error__title coupling through an owned .required-indicator component class. Do not close this PR until #598 is integrated into protected main and source/test/docs/evidence carryover is re-proven there. Browser/AT/responsive/eight-locale acceptance remains FAIL.

[google-labs-jules]

Single-writer update — 2026-09-20: this PR is now Draft and remains evidence-preserved. Canonical product writer #598 at 1f96e0f181d06930de9c3a71a3fafd40e08bd6ac ordinary-forward carries the valid inner-span layout, native required, decorative aria-hidden marker, focused controller-test, and Palette semantics, and additionally removes the .error__title coupling through an owned .required-indicator component class. Do not close this PR until #598 is integrated into protected main and source/test/docs/evidence carryover is re-proven there. Browser/AT/responsive/eight-locale acceptance remains FAIL.

Understood. Acknowledging that this work is now superseded by PR #598 and stopping work on this task.