dequelabs / dequelabs/cauldron

MenuBar Refactor

Open
#1,934 1 comment 0 reactions 0 assignees View on GitHub
rfc ux debt
Dominant language
TypeScript
Stars
127
Forks
31
Avg merge
2d 12h
Merged PRs (30d)
8

Description

# MenuBar

## Overview

`MenuBar` at present does not follow correct aria patterns, nor does it adhere to modern component guidelines we've documented in Cauldron.

### Problem Statement

There are current implementation gaps with respect to [menubar patterns](https://www.w3.org/WAI/ARIA/apg/patterns/menubar/) including:

- Does not manage `tabIndex` correctly (each menu item has a tab index)
- Does not support menuitem separators (unsure if needed)
- Does not specify how the menu should be labeled

For current Cauldron guidelines, there's number of things that the current pattern doesn't adhere to including:

- Full ref support (supports ref of menu items via `menuItemRef`)
- Composition pattern not cleanly documented
- Class component instead of functional component
- Composition of menu items requires a very exact implementation
- Does not integrate cleanly with new replacement patterns (e.g. ActionMenu vs OptionMenu)

The above list isn't a comprehensive list of all of the issues but the primary high level issues. This component needs a detailed re-evaluation to fit within existing Cauldron component patterns.

## Component Design

### Visual Design

N/A

### Interface / Props

[TBD]

### Accessibility

[TBD]

### Responsiveness

[TBD]

### Interactive States (optional)

[TBD]

### Variants (optional)

[TBD]

### Usage Examples

[TBD]

### Referencing Implementations

- ARIA Authoring Practices Guide: https://www.w3.org/WAI/ARIA/apg/patterns/menubar/
- (need to find additional implementations)

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.