Skip to content

feat: CreateStreamForm kbd hints#785

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

feat: CreateStreamForm kbd hints#785
unajiogenyi05-hub wants to merge 1 commit into
Talenttrust:mainfrom
unajiogenyi05-hub:task/createstreamform-kbd-v7

Conversation

@unajiogenyi05-hub

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

Copy link
Copy Markdown
  • Add KbdHint component (src/components/KbdHint.tsx)
    • Renders key chips in semantic elements
    • Separators aria-hidden; wrapper has role=img + aria-label
    • srOnly prop for screen-reader-only variant
    • Adapts to light/dark via CSS design tokens
  • Add CreateStreamForm (src/components/CreateStreamForm.tsx)
    • Ctrl/⌘+Enter global submit shortcut
    • Escape calls onCancel
    • KbdHint chips shown in action row; sr-only hint for AT
    • Full field validation with aria-invalid + role=alert errors
    • WCAG 2.1 AA: labels, aria-required, aria-describedby
  • Add CreateStreamForm.test.tsx: 35 tests all passing
    • KbdHint rendering, a11y, axe; form rendering, validation, keyboard shortcuts, submit, and axe in empty/error states

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 KbdHint component (src/components/KbdHint.tsx)
  - Renders key chips in semantic <kbd> elements
  - Separators aria-hidden; wrapper has role=img + aria-label
  - srOnly prop for screen-reader-only variant
  - Adapts to light/dark via CSS design tokens
- Add CreateStreamForm (src/components/CreateStreamForm.tsx)
  - Ctrl/⌘+Enter global submit shortcut
  - Escape calls onCancel
  - KbdHint chips shown in action row; sr-only hint for AT
  - Full field validation with aria-invalid + role=alert errors
  - WCAG 2.1 AA: labels, aria-required, aria-describedby
- Add CreateStreamForm.test.tsx: 35 tests all passing
  - KbdHint rendering, a11y, axe; form rendering, validation,
    keyboard shortcuts, submit, and axe in empty/error states
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