Toolbar button

A toolbar button, button[nol-toolbar-button]: a glyph, a label or both, with an optional menu chevron. It sets the button's accessible name and state; the owner adds type, nolToolbarItem and its click handler.

Examples

Loading…

States

Loading…

API

Selector button[nol-toolbar-button]

Import from @noldova/ui.components.angular

Inputs

Name	Type	Default	Description
`label`	`string`	Required	The accessible name, which the button also shows as text when it has no icon or shows its label.
`icon`	`string \| null`	`null`	The glyph, or null for a text button; null when not bound.
`isShowingLabel`	`boolean`	`false`	Whether a button with an icon also shows its label; false when not bound.
`pressed`	`boolean \| undefined`	`undefined`	Whether a toggle button is pressed, or undefined for a button that is no toggle; undefined when not bound.
`hasMenu`	`boolean`	`false`	Whether the button opens a menu, which shows a chevron and tells assistive technology; false when not bound.
`isUnavailable`	`boolean`	`false`	Whether the button is unavailable: it looks and is announced disabled but stays focusable and still receives clicks, which its owner ignores. False when not bound.
`busy`	`boolean`	`false`	Whether the button's work is under way: the kit's spinner, in the glyph's color, stands centered in place of its glyph, label and chevron, which stay in the layout unseen, so the button keeps its width and height exactly; under forced colors the spinner keeps its own look, a `Highlight` arc on a `Canvas` track. It is marked `aria-busy`, and ignores clicks, middle clicks, Enter and Space, and, when it opens a menu, the up and down arrows, so neither its own handlers nor its parents hear them. False when not bound.

Accessibility

Key	Action
`Tab`	Moves the focus into the toolbar, onto its current button, and then past it: a toolbar is one Tab stop.
`Arrow Right`	In a toolbar, moves to the next button.
`Arrow Left`	In a toolbar, moves to the previous button.
`Home`	In a toolbar, moves to the first button.
`End`	In a toolbar, moves to the last button.
`Enter`	Presses the button; a busy button ignores it.
`Space`	Presses the button; a busy button ignores it.

The button is a native button named by its label, set as aria-label; its glyph and chevron are hidden from assistive technology.

A toggle reports aria-pressed, and a button that opens a menu is marked aria-haspopup="menu".

An unavailable button is marked aria-disabled: it stays focusable and still takes clicks, which its owner ignores.

A busy button is marked aria-busy and ignores clicks, Enter and Space until it is no longer busy.

Its toolbar has the toolbar role, named by nolToolbarLabel, and moves the focus between its buttons with the arrow keys.

Specification

Loading…