Dialog - design & build component

REFINEMENT NOT COMPLETE

User Story As a user, I want to be able to focus on a specific task or interaction within a dialog window, so that I can complete the task without distractions from the underlying content.

Requirements

[ ] #266 needs to be finished for dev implementation
[ ] #246 needs to be finished for implementation
[x] #772

Acceptance Criteria

[ ] The dialog component should be displayed as a overlay on top of the underlying content.
[ ] The dialog component should have a clear and concise title that describes the purpose or content of the modal.
[ ] The dialog component should provide a close button or a way to dismiss the dialog, allowing users to easily close it.
[ ] The dialog component should prevent interaction with the underlying content while it is open.
[ ] The dialog component should handle keyboard interactions, such as allowing users to navigate and interact with its elements using the keyboard alone.
[ ] The dialog component should have a visually distinct appearance, differentiating it from the underlying content, to ensure clear focus and attention.
[ ] The dialog component should support scrollable content if the modal's height exceeds the viewport's height, allowing users to access all content within the modal.
[ ] The dialog component has a button that either is sticky and always in the viewport or it is placed below the content

All components we build should be responsive and work across all modern browsers and devices. Furthermore all components should be tested thoroughly to ensure they are functional and meet all requirements. Components should also be accessible to users with disabilities, following WCAG 2.1 AA guidelines. These requirements however will not be checked 100 % when we review the component tickets during refinement or planning sessions.

deven-org / boiler

Dialog - design & build component #117