Menu group
A labeled group of a MenuComponent's rows, nol-menu-group: a group named by its label, which shows above its rows in the menu's section-label style, muted. The label takes no focus, the arrow keys move across the groups' rows as across any of the menu's rows, and a radio row keeps its own checked state. A MenuGroupActionDirective inside the group shows at the end of its label. A group given maxRows scrolls its rows past that many, under its label, while the menu's other rows stay in view.
Examples
Loading…
States
Loading…
API
Selector nol-menu-group
Import from @noldova/ui.components.angular
Inputs
| Name | Type | Default | Description |
|---|---|---|---|
label | string | Required | The label shown above the group's rows, which names the group. |
maxRows | number | null | How many of the group's rows show before the rest scroll, a whole number of 1 or more, or null, the default, to show every row. Past that many rows, the group's rows scroll inside it at the height of the first |
Accessibility
| Key | Action |
|---|---|
| Arrow Down | Moves to the next row, from a group's last row on to the first row after it, passing over the group's label. |
| Arrow Up | Moves to the previous row, passing over the group's label. |
| Home | Moves to the menu's first row; a group that scrolls brings it into view. |
| End | Moves to the menu's last row; a group that scrolls brings it into view. |
| Escape | Closes the menu and gives the focus back to its trigger. |
A group has the group role and is named by its label through aria-labelledby; the label is hidden from assistive technology, so it is read once, as the group's name, and takes no focus.
Its rows keep their own roles: a radio row stays a menuitemradio, with its own aria-checked, inside the group.
A menu that opens from its trigger takes the focus on its first checked row, so a group of choices opens on the one chosen.
Specification
Loading…