Skip to content
3 changes: 3 additions & 0 deletions .jules/palette.md
Original file line number Diff line number Diff line change
Expand Up @@ -80,3 +80,6 @@
## 2025-05-19 - Dynamic ARIA labels and robust disabled states for sidebar actions
**Learning:** Hardcoded ARIA labels in mockups (like "출시 회의 일정 삭제") are often left intact during implementation, leading to incorrect screen reader announcements when different items are selected. In addition, action buttons that depend on selection state often lack correct visual and functional disabled states.
**Action:** When implementing detail views or sidebars, always replace hardcoded mockup ARIA labels with dynamic data (e.g. `${event.title} 삭제`), and ensure action buttons are explicitly disabled (both functionally via `disabled` and visually via `opacity-50 cursor-not-allowed`) when their prerequisites (like a selected item or specific properties like location) are unmet.
## 2025-02-14 - Loading State Accessibility Improvement
**Learning:** Found multiple instances where buttons are disabled during asynchronous operations (e.g. `isDocumentActionLoading`, `correctionSubmitting`) without explicitly setting `aria-busy` to inform screen reader users that a background task is running. Setting `aria-busy` along with `disabled` provides essential context to AT users, differentiating an active process from a statically unavailable action. However, `aria-busy={false}` should not be applied to statically disabled elements.
**Action:** Always include `aria-busy={loadingStateVariable}` when disabling buttons during async operations.
Comment thread
opencode-agent[bot] marked this conversation as resolved.
1 change: 1 addition & 0 deletions frontend/src/components/ProjectsLayout.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -969,6 +969,7 @@ export function ProjectsLayout() {
type="button"
onClick={handleMarkEvidenceReviewed}
disabled={correctionSubmitting || evidenceLoading}
aria-busy={correctionSubmitting || evidenceLoading}
className="mt-3 min-h-9 w-full rounded-md bg-primary px-3 text-xs font-bold text-primary-foreground hover:bg-primary/90 disabled:cursor-not-allowed disabled:bg-secondary disabled:text-muted-foreground"
>
{correctionSubmitting ? '검토 저장 중' : '문단 근거 검토 저장'}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -375,6 +375,7 @@ return (
type="button"
onClick={() => void requestDocumentAction('reparse')}
disabled={isDocumentActionLoading}
aria-busy={isDocumentActionLoading}
className="inline-flex min-h-9 items-center justify-center gap-2 rounded-lg border border-border bg-background px-3 py-2 text-xs font-bold text-foreground hover:bg-secondary disabled:cursor-wait disabled:opacity-60"
>
<RefreshCw className="size-4" />
Expand All @@ -384,6 +385,7 @@ return (
type="button"
onClick={() => void requestDocumentAction('embedding-regeneration-intent')}
disabled={isDocumentActionLoading}
aria-busy={isDocumentActionLoading}
className="inline-flex min-h-9 items-center justify-center gap-2 rounded-lg border border-border bg-background px-3 py-2 text-xs font-bold text-foreground hover:bg-secondary disabled:cursor-wait disabled:opacity-60"
>
<Database className="size-4" />
Expand All @@ -393,6 +395,7 @@ return (
type="button"
onClick={() => void requestDocumentAction('hwp-conversion-intent')}
disabled={isDocumentActionLoading}
aria-busy={isDocumentActionLoading}
className="inline-flex min-h-9 items-center justify-center gap-2 rounded-lg border border-border bg-background px-3 py-2 text-xs font-bold text-foreground hover:bg-secondary disabled:cursor-wait disabled:opacity-60"
>
<FileText className="size-4" />
Expand Down Expand Up @@ -518,6 +521,7 @@ return (
type="button"
onClick={() => void requestUniqueThreadIntent()}
disabled={isUniqueThreadLoading}
aria-busy={isUniqueThreadLoading}
className="w-full whitespace-nowrap rounded-xl bg-primary px-4 py-2 text-sm font-bold text-primary-foreground hover:bg-primary/90 disabled:cursor-wait disabled:opacity-60 sm:w-auto"
>
중복 메일 스레드 의도 점검
Expand Down
Loading