A deep dive into the design and engineering decisions behind Vaadin's new Dashboard component, focusing on accessibility challenges. Covers WCAG 2.1 AA conformance including color contrast, HTML/ARIA semantics for dashboard layout and widgets, and the complex interaction model needed to support drag-and-drop, keyboard navigation, and pointer-based alternatives for moving and resizing widgets. Explains how move-mode and resize-mode were introduced to provide single-point pointer alternatives to path-based gestures, and how focus trapping and live announcements were handled for screen reader users.
Table of contents
Responsive LayoutStatic Dashboard LayoutDynamic, User-editable DashboardsAccessibility RequirementsColor ContrastSemanticsDashboard Layout SemanticsWidget SemanticsEditing InteractionsMove and Resize ModalitiesAnnouncing Edit OperationsOver-Engineered or Just Plain Awesome?Sort: