Completion list

A completion list, nol-completion-list: the choices a field offers for what the person is typing, such as commands after a slash or names in code, each a label with an optional note at the row's end. The owner keeps the focus in its field, filters the choices, moves the active one with the keys and points the field's aria-activedescendant at CompletionListComponent.optionId; the list shows the choices, marks and scrolls to the active one and reports the one clicked. A press on the list never takes the focus from the field.

The host element is the listbox: it has the listbox role, its id is CompletionListComponent.listId and its accessible name is CompletionListComponent.label, so the field's aria-controls names it. Each choice is an option whose accessible name is its label, then a comma and its note when it has one; the note is plain text with no role of its own.

The host carries the menu's box, its border, corner, fill and shadow, and the menu item's rows, with the active row filled as a hovered menu item is. The kit sets no position, z-index or width: the owner places the list, such as in an overlay above its field, and sizes it. Its height is at most twelve rows, or CompletionListComponent.maxHeight when that is less, and the rows scroll inside it.

Examples

Loading…

States

Loading…

API

Selector nol-completion-list

Import from @noldova/ui.components.angular

Inputs

Name	Type	Default	Description
`choices`	`readonly CompletionChoice[]`	Required	The choices in the order shown.
`active`	`number`	Required	The index of the active choice, marked `aria-selected` and scrolled into view, or -1, or any index past the end, for none.
`listId`	`string`	Required	The id of the host, unique in the page; each option's id is made from it by `CompletionListComponent.optionId`.
`label`	`string`	Required	The list's accessible name.
`isCode`	`boolean`	`false`	Whether the labels are code, shown in the code font; false when not bound.
`maxHeight`	`number \| null`	`null`	The most the list's height may be, in CSS pixels, such as the room between its field and the window's edge, or null, the default, for twelve rows. The list is never taller than twelve rows.

Outputs

Name	Type	Description
`chosen`	`CompletionChoice`	Emits the choice the person clicked, the same instance the owner gave in `CompletionListComponent.choices`.

Accessibility

It takes no keys of its own.

The list itself is the listbox, with the id and the name its owner gives, so the owner's field is a combobox that controls it.

Each choice is an option named by its label, then a comma and its note; the active one is marked aria-selected, and the note has no role of its own.

The focus stays in the owner's field, which follows the active option with aria-activedescendant and handles the keys; a press on the list never takes the focus.

Specification

Loading…