Skip to content

feat: CreateStreamForm skeleton#782

Open
unajiogenyi05-hub wants to merge 1 commit into
Talenttrust:mainfrom
unajiogenyi05-hub:task/createstreamform-skel-v7
Open

feat: CreateStreamForm skeleton#782
unajiogenyi05-hub wants to merge 1 commit into
Talenttrust:mainfrom
unajiogenyi05-hub:task/createstreamform-skel-v7

Conversation

@unajiogenyi05-hub

@unajiogenyi05-hub unajiogenyi05-hub commented Jul 25, 2026

Copy link
Copy Markdown
  • Add Skeleton component (src/components/Skeleton.tsx)
    • Single themed shimmer block using --muted CSS design token
    • aria-hidden; animate-pulse + motion-reduce:animate-none
    • SkeletonContainer wrapper: role=status, aria-live=polite, aria-busy=true, sr-only label for screen reader announcement
  • Add CreateStreamForm (src/components/CreateStreamForm.tsx)
    • isLoading prop: renders CreateStreamFormSkeleton when true
    • Skeleton mirrors form layout to prevent layout shift
    • Full field validation, aria-invalid, aria-describedby, role=alert
    • Ctrl/Cmd+Enter submit shortcut; Escape cancel shortcut
    • WCAG 2.1 AA: labels, required markers, focus-visible rings
    • Light/dark theme via CSS design tokens (--border, --card, --muted)
  • Add CreateStreamFormSkeleton.test.tsx: 44 tests all passing
    • Skeleton and SkeletonContainer unit tests
    • CreateStreamFormSkeleton: structure, no interactive controls, axe
    • CreateStreamForm isLoading transitions; axe in all states
    • Validation, keyboard shortcuts, successful submit

Description

Closes #

Type of Change

  • Bug fix (non-breaking change that resolves an issue)
  • New feature (non-breaking change that adds functionality)
  • Breaking change (fix or feature that would cause existing functionality to change)
  • Refactor (no functional change, internal code improvement)
  • Documentation update

Pre-flight Checklist

All items must be checked before requesting review.

  • npm run lint passes with no errors
  • npm test passes with no failures
  • npm run build completes successfully

Testing & Coverage

  • Module test coverage for impacted files meets or exceeds the 95% minimum threshold
    (run npm test -- --coverage and check the per-file table)
  • If this PR adds or modifies UI components, accessibility tests were written using
    the shared utilities in src/test-utils/a11y.tsx

What was tested?


Accessibility & Security Notes

Accessibility

Security

closes #1043

- Add Skeleton component (src/components/Skeleton.tsx)
  - Single themed shimmer block using --muted CSS design token
  - aria-hidden; animate-pulse + motion-reduce:animate-none
  - SkeletonContainer wrapper: role=status, aria-live=polite,
    aria-busy=true, sr-only label for screen reader announcement
- Add CreateStreamForm (src/components/CreateStreamForm.tsx)
  - isLoading prop: renders CreateStreamFormSkeleton when true
  - Skeleton mirrors form layout to prevent layout shift
  - Full field validation, aria-invalid, aria-describedby, role=alert
  - Ctrl/Cmd+Enter submit shortcut; Escape cancel shortcut
  - WCAG 2.1 AA: labels, required markers, focus-visible rings
  - Light/dark theme via CSS design tokens (--border, --card, --muted)
- Add CreateStreamFormSkeleton.test.tsx: 44 tests all passing
  - Skeleton and SkeletonContainer unit tests
  - CreateStreamFormSkeleton: structure, no interactive controls, axe
  - CreateStreamForm isLoading transitions; axe in all states
  - Validation, keyboard shortcuts, successful submit
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant