Accessibility and content
Keyboard, focus, and interaction
Record implemented semantics accurately and keep unresolved behavior visible.
On this page
Interaction register
| Area | Implemented behavior | Remaining check or finding |
|---|---|---|
| Workspace | Skip link, current-page links, named phone trigger, Escape closing | Verify route focus after navigation and long-menu scrolling. |
| Appearance | Named switch, 44px hit area, native preference select | Verify both themes and System changes. |
| Email code | Labeled fieldset/digits, paste normalization, arrow/backspace navigation, error alert | Verify autofill and screen-reader announcements on actual devices. |
| Section selector | Headless UI listbox | Check Escape, focus return, and route selection. |
| Lesson editor | Pressed-state content buttons and live save status | Not a full ARIA tabs implementation; verify reorder announcements. |
| Learner review | Dialog name, aria-modal, Escape and backdrop close | Missing focus trap/restoration; small star and close targets. |
| Video search | Clickable filtered suggestions and outside close | Missing combobox semantics and keyboard option selection. |
| Course assignment | Native checkbox and revoke button | Checkbox needs an accessible label; visible/accessible revoke naming differs. |
| Feedback | Required fields and failure alert | Mood icons lack descriptive names. |
| Legacy onboarding | Visual task controls | coursePath span has button role without keyboard activation. |
| Marketing FAQ | Button with aria-expanded | No aria-controls/hidden-panel semantics; reduced-motion parity missing. |
Verified in the isolated preview
Appearance persisted through reload, System followed a device-theme change, and the header switch created an explicit override. The section listbox closed with Escape and returned focus. The phone menu closed with Escape while the unfocused skip link remained offscreen. Pasted code text normalized to six digits without auto-submit; a rejected code produced an alert. An injected lesson conflict preserved local input and displayed recovery instructions.
Practical verification
Use keyboard-only navigation through the shell, one settings form, code inputs, the section listbox, and dialogs. Inspect the accessibility tree and actual focus. A screenshot cannot establish keyboard behavior. Source limitations are documentation findings; this portfolio task does not change either product repository.
Source references
| File | Responsibility |
|---|---|
| src/components/MainNav.tsx | Shell semantics |
| src/components/EmailCodeInput.tsx | Digit keyboard behavior |
| src/components/VideoSearchBox.tsx | Search limitation |
| src/components/courses-public/logged-in/PrivateCourseView.tsx | Dialog |
| marketing/src/components/FAQ.tsx | Disclosure |
Interface examples
Native TeachKit interfaces with fictional course, account, and learner records. Service responses and media are isolated demonstrations; no customer data or live changes. Captured at 2× resolution or higher. Select an image to inspect it full size.
Related topics
Source audit: 2026-10-22 · Revision 903bbf05ca9d · Documentation v2.0.0