Add Dialog pattern

[ellm]

Description

Description

A dialog component should be added to the Accessibility Patterns Library and documented.

Acceptance Criteria

See Contributing Guidelines

• A dialog component has been added to the pattern library.
• The component passes all WCAG AA specifications (see Testing).
• The component pattern(s) are thoroughly documented, including but not limited to the following sections:
  • Title: Pattern title, along with other names that may be used.
  • Summary: An overview of what the pattern is and how it is commonly used.
  • Best Practices: Some DOs and DON'Ts when implementing this pattern.
  • Accessibility Considerations: Any specific accessibility considerations or edge cases to account for.
  • Examples: Examples of markup used to build the pattern.

Testing

Each pattern added to the library should be tested thoroughly to ensure it meets WCAG AA standards.

• Automated Testing: Use Google Lighthouse and the SiteImprove Accessibility Checker Chrome extension (or another tool of your choice) to ensure the component passes all criteria.
• Manual Testing: Conduct manual testing via keyboard and screen reader (desktop and mobile) to ensure the component is accessible and user-friendly.

Testing Tips

The pattern library includes the a11y addon that adds an "Accessibility" tab to each component's canvas and performs automated accessibility testing. Use this to ensure there are no violations.

When running Storybook locally, you can view your component in a standalone window by clicking the "Open canvas in a new tab" icon button in the top right. You can use this window to test your component in isolation.

Use Case

Dialogs are commonly used in our clients' websites as a method to notify the user to an take action. A dialog can appear as part of the page document content model. Or appear as a modal overlay where the page document content becomes inert.

This pattern should be added to the library and documented so that everyone at Alley can reference the pattern and create accessible tab components within their projects.