🎨 Palette: 숫자 입력 필드 빈 문자열 처리 로직 개선

[seonghobae]

💡 What: 숫자 입력 필드(target_bytes)에 빈 문자열이 입력될 때 에러 상태(aria-invalid 등)를 명시적으로 해제하도록 인라인 유효성 검사 로직을 개선했습니다.
🎯 Why: 사용자가 값을 모두 지워서 빈 문자열이 될 경우, 시각적으로는 비어있지만 브라우저 내부적으로는 잘못된 상태가 유지되어 required 제약 조건이 제대로 동작하지 않거나 잘못된 오류 메시지가 남는 혼란을 방지하기 위함입니다.
📸 Before/After: 변경 전에는 값을 모두 지우면 커스텀 에러 메시지가 남았으나, 변경 후에는 정상적으로 에러 상태가 초기화됩니다.
♿ Accessibility: aria-invalid 속성을 빈 문자열 상태일 때 올바르게 해제하여 스크린 리더 사용자가 잘못된 오류 상태를 전달받지 않도록 개선했습니다.

---

PR created automatically by Jules for task 1666906190712593174 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]

📝 Walkthrough

Walkthrough

숫자 입력값이 빈 문자열이 되면 단일 파일과 배치 파일 입력 처리기가 유효성, 접근성, 미리보기, 프리셋 상태를 초기화합니다. 관련 UX 지침도 문서에 추가했습니다.

Changes

빈 숫자 입력 상태 초기화

Layer / File(s)	Summary
단일 및 배치 입력 상태 초기화 saas_web.py, .jules/palette.md	단일 파일과 배치 파일의 빈 target_bytes 입력에서 사용자 지정 유효성, aria-invalid, 미리보기 텍스트, 프리셋 선택 상태를 초기화합니다. 초기화 후 즉시 반환합니다. 숫자 입력값이 비워질 때 유효성 상태를 초기화하는 지침을 문서에 추가했습니다.

Estimated code review effort: 2 (Simple) | ~10 minutes

Possibly related PRs

• ContextualWisdomLab/codec-carver#58: saas_web.py의 target_bytes 입력과 미리보기 및 유효성 상태를 함께 수정합니다.
• ContextualWisdomLab/codec-carver#301: 동일한 target_bytes 및 batch_target_bytes 빈 입력 초기화를 확장합니다.
• ContextualWisdomLab/codec-carver#305: 두 입력 처리기에서 빈 입력의 유효성, 미리보기, 프리셋 상태를 초기화합니다.

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	제목은 숫자 입력 필드의 빈 문자열 처리 로직 개선이라는 주요 변경 사항을 정확하게 요약합니다.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
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.

✨ 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-ux-empty-string-handling-1666906190712593174

---

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

[coderabbitai]

Actionable comments posted: 2

🤖 Prompt for all review comments with AI agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Inline comments:
In @.jules/palette.md:
- Around line 77-79: Update the guidance in the “숫자 입력 필드의 빈 문자열 상태 처리” section
to distinguish native ValidityState checks from application-managed state:
remove the claim that a previous negative value leaves rangeUnderflow active or
interferes with required validation, and clarify that only setCustomValidity()
customError and aria-invalid persist until explicitly reset.

In `@saas_web.py`:
- Around line 244-252: Ensure the batch-form script initializes only after the
batch form elements exist by moving it after both forms or deferring all DOM
queries and event registration until DOMContentLoaded. Update the lookups for
batch_preset_buttons_container and batch_target_bytes so the input handlers
covering both affected ranges register without null errors. Extend
tests/test_saas_web.py with browser-level coverage verifying empty-input state
reset behavior.

🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

• Push a commit to this branch (recommended)
• Create a new PR with the fixes

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro Plus

Run ID: 43a48734-b2b5-4dd4-a51c-8d7495ad3212

📥 Commits

Reviewing files that changed from the base of the PR and between 5a92586 and b9a472f.

📒 Files selected for processing (2)

• .jules/palette.md
• saas_web.py

[coderabbitai]

📐 Maintainability & Code Quality | 🟡 Minor | ⚡ Quick win

🧩 Analysis chain

🏁 Script executed:

#!/bin/bash
set -eu
printf '%s\n' '--- target file ---'
sed -n '65,90p' .jules/palette.md
printf '%s\n' '--- related validity terms ---'
rg -n -C 3 'setCustomValidity|aria-invalid|rangeUnderflow|required|input type="number"|빈 문자열' .jules . --glob '!node_modules' --glob '!dist' --glob '!build' | head -200

Repository: ContextualWisdomLab/codec-carver

Length of output: 20230

---

🌐 Web query:

HTML constraint validation ValidityState rangeUnderflow current value setCustomValidity persistence aria-invalid specification

💡 Result:

HTML Constraint Validation and aria-invalid work as follows: ValidityState.rangeUnderflow The rangeUnderflow property is a read-only boolean [1][2]. It returns true if an input element's value is less than the minimum value specified by its min attribute [1][3]. It applies to numeric and date/time input types (e.g., number, range, date, time) that support the min attribute [1][3]. setCustomValidity Persistence The setCustomValidity method is highly persistent [4]. When you call this method with a non-empty string, it sets the ValidityState.customError flag to true, which marks the element as invalid [5][4]. Crucially, this state does not reset automatically, even if the underlying constraint violation (like rangeUnderflow) is resolved [6][4]. To correctly use setCustomValidity, you must manually clear it by calling setCustomValidity('') (an empty string) [5][6]. A best practice is to clear the custom validity at the start of every validation cycle (e.g., inside an oninput or onchange event handler) before evaluating your validation logic [4]. If you do not clear it, the element will remain stuck in an invalid state regardless of the actual input value [6][4]. aria-invalid Specification The aria-invalid attribute indicates that an element's value does not conform to the application's expected format [7]. While HTML has built-in constraint validation (which uses:invalid CSS pseudo-classes), aria-invalid is an ARIA attribute that must be managed programmatically [8][7]. Key specifications and guidelines include: - Do not set aria-invalid="true" before the user has attempted to interact with the field or submit the form [8][7]. Applying it immediately on page load can create a poor experience for users [7][9]. - aria-invalid and native HTML validation are distinct systems [9]. Native browser validation (such as rangeUnderflow) does not automatically toggle the aria-invalid attribute [10][9]. - If you are building custom validation, you should manually update aria-invalid="true" when an error is detected and aria-invalid="false" (or remove the attribute) when the input is valid [8][7]. - Accessibility specifications recommend using aria-invalid in conjunction with an error message container identified by aria-errormessage [10]. In summary, native HTML validation (ValidityState) and ARIA attributes (aria-invalid) operate independently, and both require careful JavaScript management to ensure they are synchronized correctly with the user's input [7][10].

Citations:

• 1: https://developer.mozilla.org/en-US/docs/Web/API/ValidityState/rangeUnderflow
• 2: https://developer.mozilla.org/en-US/docs/Web/API/ValidityState
• 3: https://github.com/mdn/content/blob/main/files/en-us/web/api/validitystate/rangeunderflow/index.md
• 4: https://www.js-form-validation.com/mastering-html5-native-form-validation/custom-validity-messages/how-to-use-setcustomvalidity-correctly/
• 5: https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/setCustomValidity
• 6: https://stackoverflow.com/questions/70514086/why-are-custom-validation-messages-causing-my-html-form-elements-to-stay-invalid
• 7: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Reference/Attributes/aria-invalid
• 8: https://www.w3.org/WAI/WCAG21/Techniques/aria/ARIA21
• 9: Required attribute invalid state on landing not an equal experience for all users whatwg/html#7848
• 10: HTML-AAM: determine right mappings for browser generated form validation error messages w3c/html-aam#47

---

🏁 Script executed:

#!/bin/bash
set -eu
python3 - <<'PY'
from pathlib import Path
import re

source = Path("saas_web.py").read_text()
for field in ("target_bytes", "batch_target_bytes"):
    match = re.search(
        rf"document\.getElementById\('{field}'\)\.addEventListener\('input', function\(e\) \{{(.*?)\n\s*\}}\);",
        source,
        re.S,
    )
    if not match:
        raise SystemExit(f"missing validation handler for {field}")
    handler = match.group(1)
    empty = re.search(r"if \(this\.value === ''\) \{(.*?)\n\s*\}", handler, re.S)
    if not empty:
        raise SystemExit(f"missing empty-value branch for {field}")
    branch = empty.group(1)
    required = ("this.setCustomValidity('');" in branch and
                "this.removeAttribute('aria-invalid');" in branch)
    print(f"{field}: clears setCustomValidity and aria-invalid for empty value: {required}")
    if not required:
        raise SystemExit(1)
PY

Repository: ContextualWisdomLab/codec-carver

Length of output: 332

---

네이티브 유효성 상태와 애플리케이션 상태를 구분하세요.

ValidityState.rangeUnderflow는 이전 값이 아니라 현재 값과 min을 기준으로 계산됩니다. 빈 값에서 이전 음수의 네이티브 오류가 유지되어 required 검사를 방해하지는 않습니다. 반면 setCustomValidity()로 설정한 customError와 aria-invalid는 코드가 초기화할 때까지 유지될 수 있습니다. Line 78의 원인을 이 내용으로 수정하세요.

🤖 Prompt for AI Agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In @.jules/palette.md around lines 77 - 79, Update the guidance in the “숫자 입력
필드의 빈 문자열 상태 처리” section to distinguish native ValidityState checks from
application-managed state: remove the claim that a previous negative value
leaves rangeUnderflow active or interferes with required validation, and clarify
that only setCustomValidity() customError and aria-invalid persist until
explicitly reset.

[coderabbitai]

🩺 Stability & Availability | 🟠 Major | ⚡ Quick win

이벤트 핸들러가 등록되도록 스크립트 실행 순서를 수정하세요.

배치 폼은 Lines 400-423에서 스크립트 뒤에 정의됩니다. 따라서 Line 213의 document.getElementById('batch_preset_buttons_container')는 null을 반환하고 .addEventListener에서 TypeError가 발생합니다. 스크립트 실행이 중단되므로 Lines 244-252와 279-287의 input 핸들러가 등록되지 않습니다. Line 277의 batch_target_bytes 조회도 같은 DOM 순서 문제를 가집니다.

스크립트를 두 폼 뒤로 이동하거나 모든 DOM 조회와 이벤트 등록을 DOMContentLoaded 이후에 수행하세요. 현재 tests/test_saas_web.py의 테스트는 HTML 문자열만 검사하므로, 실제 브라우저에서 빈 입력 시 상태 초기화를 검증하는 테스트도 추가해야 합니다.

Also applies to: 279-287

🤖 Prompt for AI Agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@saas_web.py` around lines 244 - 252, Ensure the batch-form script initializes
only after the batch form elements exist by moving it after both forms or
deferring all DOM queries and event registration until DOMContentLoaded. Update
the lookups for batch_preset_buttons_container and batch_target_bytes so the
input handlers covering both affected ranges register without null errors.
Extend tests/test_saas_web.py with browser-level coverage verifying empty-input
state reset behavior.