alleyinteractive / alleyinteractive/accessibility-patterns

Add Hamburger Menu pattern

Aperta
#18 0 commenti 0 reazioni 1 assegnatario Rivendicata da @jessicamgoddard Vedi su GitHub
accessibility enhancement ux
Lingua principale
JavaScript
Stelle
1
Fork
0
Metriche di merge delle PR
Nessuna PR unita negli ultimi 30g

Descrizione

### Description

A **hamburger menu** component should be added to the Accessibility Patterns Library and documented.

### Acceptance Criteria

See [Contributing Guidelines](https://github.com/alleyinteractive/accessibility-patterns/blob/main/CONTRIBUTING.md)

- A **hamburger menu** component has been added to the pattern library. The component includes an icon that when clicked, opens a menu.
- 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](https://storybook.js.org/addons/@storybook/addon-a11y) 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 canvans in a new tab" icon button in the top right. You can use this window to test your component in isolation.

### Use Case

Hamburger menus are commonly used in our clients' sites, especially at mobile breakpoints. This pattern should be added to the library so that everyone at Alley can reference the pattern and create accessible components within their projects.

Guida per i contributori

Apri la guida per i contributori

Valutazione

Questa issue non è ancora stata valutata.

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.