Skip to content

v0.4.0: Accessibility & Theming#21

Merged
23min merged 3 commits intomainfrom
feature/accessible-forms
Feb 12, 2026
Merged

v0.4.0: Accessibility & Theming#21
23min merged 3 commits intomainfrom
feature/accessible-forms

Conversation

@23min
Copy link
Owner

@23min 23min commented Feb 12, 2026

Summary

Complete v0.4.0 milestone — WCAG 2.1 AA accessibility and visual theming for the A2UI Blazor renderer.

  • Accessible forms<label>/for associations, aria-describedby, aria-invalid, helperText/error properties on all 5 input components, error-clears-on-interaction behavior
  • Keyboard navigation — visible :focus-visible rings on all 7 interactive components (Button, TextField, CheckBox, ChoicePicker, DateTimeInput, Slider, Tabs)
  • Dark mode — automatic prefers-color-scheme detection + manual toggle button with localStorage persistence. Form inputs use CSS custom properties for correct dark rendering. color-scheme: dark for native browser controls (video scrubber, date pickers)
  • CSS custom property theming — all --a2ui-* variables documented; sample app CSS uses var() references for automatic theme switching
  • prefers-reduced-motion — disables all transitions and animations when user prefers reduced motion

26 files changed, +1396 / -58. Test suite: 249 unit + 46 Playwright E2E, 0 warnings.

Test plan

  • dotnet build — 0 warnings
  • dotnet test tests/A2UI.Blazor.Tests — 249 unit tests pass
  • dotnet test tests/A2UI.Blazor.Playwright — 46 E2E tests pass
  • Dark mode toggle button works (toggle test verifies data-theme attribute and card background change)
  • Form inputs render with dark background/light text in dark mode
  • Nav, body, cards all adapt via CSS custom properties
  • Reduced motion disables transitions (verified via getComputedStyle)
  • Focus rings visible on all interactive elements
  • Error text clears on user interaction for all input components
  • Sample app parity maintained (WASM and Server layouts identical)

🤖 Generated with Claude Code

23min and others added 3 commits February 12, 2026 12:04
…miss

- Wire up <label for> / <input id> on TextField, ChoicePicker, DateTimeInput, Slider
- Add aria-describedby, aria-invalid, error/helperText on all 5 input components
- Dismiss error text client-side on user interaction (_interacted flag)
- Fix GetElement() bug: use TryGetValue instead of GetValueOrDefault to avoid
  JsonElement default struct causing crash on GetRawText()
- Add validation examples to gallery (both Python and .NET servers)
- CSS: helper/error text styles, --error modifier classes
- 24 new unit tests (249 total), 9 new Playwright E2E tests (36 total)

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
…avigation

- Add --a2ui-focus-ring and --a2ui-focus-offset CSS custom properties
- Add :focus-visible outline rules for Button, TextField, CheckBox,
  ChoicePicker, DateTimeInput, Slider, and Tabs
- Fix TextField: replace :focus { outline: none } with proper :focus-visible ring
- 3 new Playwright E2E tests verifying focus indicators via computed styles

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Dark mode with prefers-color-scheme auto-detection and manual toggle
button. Fix form inputs (TextField, ChoicePicker, DateTimeInput) to
use CSS custom properties for background/color so they render correctly
in dark mode. Add color-scheme: dark for native browser controls.
Sample app CSS uses --a2ui-* variables for automatic theme switching.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
@23min 23min merged commit 7c23156 into main Feb 12, 2026
2 checks passed
@23min 23min deleted the feature/accessible-forms branch February 12, 2026 16:51
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