Group header

A foldable group header, nol-group-header: the label of a group of rows that the person can fold, as a section header is for a group that always shows. One button holds the twistie, the title, cut with an ellipsis and shown whole in a tooltip while cut, and the count as muted text after it; it exposes whether the group is open and the region it controls, and sits in an element with the heading role. Content projected into it, such as icon buttons, follows the button at the end of the row, outside it, as its own Tab stops. The row takes the hover fill a tree row does.

Examples

Loading…

States

Loading…

API

Selector nol-group-header

Import from @noldova/ui.components.angular

Inputs

Name	Type	Default	Description
`label`	`string`	Required	The group's title, its required `label` input.
`count`	`number \| null`	`null`	How many rows the group holds, shown after the title, its `count` input; none shows when not bound or null. With a count, the button is named by the title, a comma, and the count's words, so a screen reader reads them as their own phrase, such as `Running, 2 sessions`.
`countLabel`	`string \| null`	`null`	The words a screen reader reads for the count, its `countLabel` input, such as `2 sessions`, which say what the number counts; the shown number stays as it is. The button is named by these words, not by the number, so they hold the shown number and change whenever it changes. The number alone when not bound or null, and unused without a count.
`level`	`number`	`GroupHeaderResources.groupHeaderLevel`	The heading level screen readers announce, its `level` input; 3 when not bound.
`controls`	`string \| null`	`null`	The id of the element holding the group's rows, which the button controls, its `controls` input; none when not bound.
`expanded`	`boolean`	`true`	Whether the group is open, its two-way `expanded` model; true when not bound. Pressing the button, or Enter or Space on it, flips it. Two-way: bind it as `[(expanded)]`.

Accessibility

Key	Action
`Tab`	Moves from the header's button to each of its actions in turn.
`Enter`	Folds the group, or opens it again.
`Space`	Folds the group, or opens it again.

Its heading has the heading role, at level 3 unless its owner gives another level, and holds one button that exposes whether its group is open and, when its owner names it, the region it controls.

With a count, the button is named by the title, a comma and the count's words from countLabel, such as Drafts, 2 notes, or the number alone without them, so the count is read as its own phrase.

Its twistie is hidden from assistive technology; a title cut with an ellipsis shows whole in its tooltip.

Actions the owner projects follow the button, outside it and outside the heading, each its own Tab stop. The owner holds the open state and shows or removes the rows.

Specification

Loading…