alleyinteractive / alleyinteractive/accessibility-patterns

Add Hamburger Menu pattern

Offen
#18 0 Kommentare 0 Reaktionen 1 zugewiesene Person Beansprucht von @jessicamgoddard Auf GitHub ansehen
accessibility enhancement ux
Vorherrschende Sprache
JavaScript
Sterne
1
Forks
0
PR-Merge-Kennzahlen
Keine gemergten PRs in 30 T.

Beschreibung

### 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.

Beitragsleitfaden

Beitragsleitfaden öffnen

Bewertung

Dieses Issue wurde noch nicht bewertet.

Neue Issues direkt in Ihr Postfach

Eine kurze Übersicht über anfängerfreundliche GitHub-Issues.