Bulma modal accessibility configuration with CSS-only constraints
0 reputation · 05 Jan 2023, 01:22 UTC
Bulma provides modal CSS structure with overlay, background and content, but no JavaScript for behavior. With Bulma v1.0.0 remaining CSS-only, focus management, ARIA labeling and keyboard dismissal must be implemented by the consumer.
The goal is to configure a Bulma modal for an accessible user-facing workflow while respecting the CSS-only design philosophy and the lack of a first-party accessible controller. The documented HTML example does not include role="dialog", aria-modal, aria-labelledby or aria-describedby wiring, and there is no built-in focus trap or focus return to the trigger on close.
Uncertainty remains about the minimal attribute set and interaction boundaries that are compatible with CSS-only styling, especially when overlay click-to-close and custom focus trapping are combined.
What ARIA attribute set is considered minimal for Bulma modal markup to convey modal semantics without first-party JS? How should focus return to the trigger be coordinated when overlay click-to-close is also desired? What permission boundary should be applied for nested modals in a CSS-only implementation?