API for a11y

API reference for Angular CDK a11y

import {A11yModule} from '@angular/cdk/a11y';

Service that detects the user's input modality.

This service does not update the input modality when a user navigates with a screen reader (e.g. linear navigation with VoiceOver, object navigation / browse mode with NVDA, virtual PC cursor mode with JAWS). This is in part due to technical limitations (i.e. keyboard events do not fire as expected in these modes) but is also arguably the correct behavior. Navigating with a screen reader is akin to visually scanning a page, and should not be interpreted as actual user input interaction.

When a user is not navigating but interacting with a screen reader, this service attempts to update the input modality to keyboard, but in general this service's behavior is largely undefined.

Properties
Name Description

modalityChanged: Observable<InputModality>

Emits when the input modality changes.

modalityDetected: Observable<InputModality>

Emits whenever an input modality is detected.

mostRecentModality: InputModality

The most recently detected input modality.

Service to determine whether the browser is currently in a high-contrast-mode environment.

Microsoft Windows supports an accessibility feature called "High Contrast Mode". This mode changes the appearance of all applications, including web applications, to dramatically increase contrast.

IE, Edge, and Firefox currently support this mode. Chrome does not support Windows High Contrast Mode. This service does not detect high-contrast mode as added by the Chrome "High Contrast" browser extension.

Methods
getHighContrastMode

Gets the current high-contrast-mode for the page.

Returns
HighContrastMode

Utility that creates visually hidden elements with a message content. Useful for elements that want to use aria-describedby to further describe themselves without adding additional visual content.

Methods
describe

Adds to the host element an aria-describedby reference to a hidden element that contains the message. If the same message has already been registered, then it will reuse the created message element.

Parameters

hostElement

Element

message

string

role?

string

describe

Adds to the host element an aria-describedby reference to an already-existing message element.

Parameters

hostElement

Element

message

HTMLElement

removeDescription
Parameters

hostElement

Element

message

string | HTMLElement

role?

string

Factory that allows easy instantiation of configurable focus traps.

Methods
create

Creates a focus-trapped region around the given element.

Parameters

element

HTMLElement

The element around which focus will be trapped.

config?

ConfigurableFocusTrapConfig

The focus trap configuration.

Returns
ConfigurableFocusTrap

The created focus trap instance.

Deprecated
create
Parameters

element

HTMLElement

deferCaptureElements

boolean

Returns
ConfigurableFocusTrap

Factory that allows easy instantiation of focus traps.

Methods
create

Creates a focus-trapped region around the given element.

Parameters

element

HTMLElement

The element around which focus will be trapped.

deferCaptureElements

boolean = false

Defers the creation of focus-capturing elements to be done manually by the user.

Returns
FocusTrap

The created focus trap instance.

Utility for checking the interactivity of an element, such as whether it is focusable or tabbable.

Methods
isDisabled

Gets whether an element is disabled.

Parameters

element

HTMLElement

Element to be checked.

Returns
boolean

Whether the element is disabled.

isFocusable

Gets whether an element can be focused by the user.

Parameters

element

HTMLElement

Element to be checked.

config?

IsFocusableConfig

The config object with options to customize this method's behavior

Returns
boolean

Whether the element is focusable.

isTabbable

Gets whether an element can be reached via Tab key. Assumes that the element has already been checked with isFocusable.

Parameters

element

HTMLElement

Element to be checked.

Returns
boolean

Whether the element is tabbable.

isVisible

Gets whether an element is visible for the purposes of interactivity.

This will capture states like display: none and visibility: hidden, but not things like being clipped by an overflow: hidden parent or being outside the viewport.

Parameters

element

HTMLElement

Returns
boolean

Whether the element is visible.

Methods
async
announce

Announces a message to screen readers.

Parameters

message

string

Message to be announced to the screen reader.

Returns
Promise<void>

Promise that will be resolved when the message is added to the DOM.

async
announce

Announces a message to screen readers.

Parameters

message

string

Message to be announced to the screen reader.

politeness?

AriaLivePoliteness

The politeness of the announcer element.

Returns
Promise<void>

Promise that will be resolved when the message is added to the DOM.

async
announce

Announces a message to screen readers.

Parameters

message

string

Message to be announced to the screen reader.

duration?

number

Time in milliseconds after which to clear out the announcer element. Note that this takes effect after the message has been added to the DOM, which can be up to 100ms after announce has been called.

Returns
Promise<void>

Promise that will be resolved when the message is added to the DOM.

async
announce

Announces a message to screen readers.

Parameters

message

string

Message to be announced to the screen reader.

politeness?

AriaLivePoliteness

The politeness of the announcer element.

duration?

number

Time in milliseconds after which to clear out the announcer element. Note that this takes effect after the message has been added to the DOM, which can be up to 100ms after announce has been called.

Returns
Promise<void>

Promise that will be resolved when the message is added to the DOM.

clear

Clears the current text from the announcer element. Can be used to prevent screen readers from reading the text out again while the user is going through the page landmarks.

Monitors mouse and keyboard events to determine the cause of focus events.

Methods
focusVia

Focuses the element via the specified focus origin.

Parameters

element

HTMLElement

Element to focus.

origin

FocusOrigin

Focus origin.

options?

FocusOptions

Options that can be used to configure the focus behavior.

focusVia

Focuses the element via the specified focus origin.

Parameters

element

ElementRef<HTMLElement>

Element to focus.

origin

FocusOrigin

Focus origin.

options?

FocusOptions

Options that can be used to configure the focus behavior.

monitor

Monitors focus on an element and applies appropriate CSS classes.

Parameters

element

HTMLElement

The element to monitor

checkChildren?

boolean

Whether to count the element as focused when its children are focused.

Returns
Observable<FocusOrigin>

An observable that emits when the focus state of the element changes. When the element is blurred, null will be emitted.

monitor

Monitors focus on an element and applies appropriate CSS classes.

Parameters

element

ElementRef<HTMLElement>

The element to monitor

checkChildren?

boolean

Whether to count the element as focused when its children are focused.

Returns
Observable<FocusOrigin>

An observable that emits when the focus state of the element changes. When the element is blurred, null will be emitted.

stopMonitoring
Parameters

element

HTMLElement | ElementRef<HTMLElement>

Directive for trapping focus within a region.

Selector: [cdkTrapFocus]

Exported as: cdkTrapFocus
Properties
Name Description
@Input({ alias: 'cdkTrapFocusAutoCapture', transform: booleanAttribute })

autoCapture: boolean

Whether the directive should automatically move focus into the trapped region upon initialization and return focus to the previous activeElement upon destruction.

@Input({ alias: 'cdkTrapFocus', transform: booleanAttribute })

enabled: boolean

Whether the focus trap is active.

focusTrap: FocusTrap

Underlying FocusTrap instance.

A directive that works similarly to aria-live, but uses the LiveAnnouncer to ensure compatibility with a wider range of browsers and screen readers.

Selector: [cdkAriaLive]

Exported as: cdkAriaLive
Properties
Name Description
@Input('cdkAriaLiveDuration')

duration: number

Time in milliseconds after which to clear out the announcer element.

@Input('cdkAriaLive')

politeness: AriaLivePoliteness

The aria-live politeness level to use when announcing messages.

Directive that determines how a particular element was focused (via keyboard, mouse, touch, or programmatically) and adds corresponding classes to the element.

There are two variants of this directive:

1) cdkMonitorElementFocus: does not consider an element to be focused if one of its children is focused. 2) cdkMonitorSubtreeFocus: considers an element focused if it or any of its children are focused.

Selector: [cdkMonitorElementFocus] [cdkMonitorSubtreeFocus]

Exported as: cdkMonitorFocus
Properties
Name Description
@Output()

cdkFocusChange: EventEmitter<FocusOrigin>

focusOrigin: FocusOrigin

Properties
Name Description

activeItem: T | null

The active item.

activeItemIndex: number | null

Index of the currently active item.

change: Subject<number>

Stream that emits whenever the active item of the list manager changes.

tabOut: Subject<void>

Stream that emits any time the TAB key is pressed, so components can react when focus is shifted off of the list.

Methods
cancelTypeahead

Cancels the current typeahead sequence.

Returns
this

destroy

Cleans up the key manager.

isTyping

Gets whether the user is currently typing into the manager using the typeahead feature.

Returns
boolean

onKeydown

Sets the active item depending on the key event passed in.

Parameters

event

KeyboardEvent

Keyboard event to be used for determining which element should be active.

setActiveItem

Sets the active item to the item at the specified index and adds the active styles to the newly active item. Also removes active styles from the previously active item.

Parameters

index

number

Index of the item to be set as active.

setActiveItem

Sets the active item to the item to the specified one and adds the active styles to the it. Also removes active styles from the previously active item.

Parameters

item

T

Item to be set as active.

setFirstItemActive

Sets the active item to the first enabled item in the list.

setLastItemActive

Sets the active item to the last enabled item in the list.

setNextItemActive

Sets the active item to the next enabled item in the list.

setPreviousItemActive

Sets the active item to a previous enabled item in the list.

skipPredicate

Sets the predicate function that determines which items should be skipped by the list key manager.

Parameters

predicate

(item: T) => boolean

Function that determines whether the given item should be skipped.

Returns
this

updateActiveItem

Allows setting the active without any other effects.

Parameters

index

number

Index of the item to be set as active.

updateActiveItem

Allows setting the active item without any other effects.

Parameters

item

T

Item to be set as active.

withAllowedModifierKeys

Modifier keys which are allowed to be held down and whose default actions will be prevented as the user is pressing the arrow keys. Defaults to not allowing any modifier keys.

Parameters

keys

ListKeyManagerModifierKey[]

Returns
this

withHomeAndEnd

Configures the key manager to activate the first and last items respectively when the Home or End key is pressed.

Parameters

enabled

boolean = true

Whether pressing the Home or End key activates the first/last item.

Returns
this

withHorizontalOrientation

Configures the key manager to move the selection horizontally. Passing in null will disable horizontal movement.

Parameters

direction

"ltr" | "rtl"

Direction in which the selection can be moved.

Returns
this

withPageUpDown

Configures the key manager to activate every 10th, configured or first/last element in up/down direction respectively when the Page-Up or Page-Down key is pressed.

Parameters

enabled

boolean = true

Whether pressing the Page-Up or Page-Down key activates the first/last item.

delta

number = 10

Whether pressing the Home or End key activates the first/last item.

Returns
this

withTypeAhead

Turns on typeahead mode which allows users to set the active item by typing.

Parameters

debounceInterval

number = 200

Time to wait after the last keystroke before setting the active item.

Returns
this

withVerticalOrientation

Configures whether the key manager should be able to move the selection vertically.

Parameters

enabled

boolean = true

Whether vertical selection should be enabled.

Returns
this

withWrap

Configures wrapping mode, which determines whether the active item will wrap to the other end of list when there are no more items in the given direction.

Parameters

shouldWrap

boolean = true

Whether the list should wrap when reaching the end.

Returns
this

Properties
Name Description

activeItem: T | null

The active item.

activeItemIndex: number | null

Index of the currently active item.

change: Subject<number>

Stream that emits whenever the active item of the list manager changes.

tabOut: Subject<void>

Stream that emits any time the TAB key is pressed, so components can react when focus is shifted off of the list.

Methods
cancelTypeahead

Cancels the current typeahead sequence.

Returns
this

destroy

Cleans up the key manager.

isTyping

Gets whether the user is currently typing into the manager using the typeahead feature.

Returns
boolean

onKeydown

Sets the active item depending on the key event passed in.

Parameters

event

KeyboardEvent

Keyboard event to be used for determining which element should be active.

setActiveItem

Sets the active item to the item at the specified index and focuses the newly active item.

Parameters

index

number

Index of the item to be set as active.

setActiveItem

Sets the active item to the item that is specified and focuses it.

Parameters

item

T

Item to be set as active.

setFirstItemActive

Sets the active item to the first enabled item in the list.

setFocusOrigin

Sets the focus origin that will be passed in to the items for any subsequent focus calls.

Parameters

origin

FocusOrigin

Focus origin to be used when focusing items.

Returns
this

setLastItemActive

Sets the active item to the last enabled item in the list.

setNextItemActive

Sets the active item to the next enabled item in the list.

setPreviousItemActive

Sets the active item to a previous enabled item in the list.

skipPredicate

Sets the predicate function that determines which items should be skipped by the list key manager.

Parameters

predicate

(item: T) => boolean

Function that determines whether the given item should be skipped.

Returns
this

updateActiveItem

Allows setting the active without any other effects.

Parameters

index

number

Index of the item to be set as active.

updateActiveItem

Allows setting the active item without any other effects.

Parameters

item

T

Item to be set as active.

withAllowedModifierKeys

Modifier keys which are allowed to be held down and whose default actions will be prevented as the user is pressing the arrow keys. Defaults to not allowing any modifier keys.

Parameters

keys

ListKeyManagerModifierKey[]

Returns
this

withHomeAndEnd

Configures the key manager to activate the first and last items respectively when the Home or End key is pressed.

Parameters

enabled

boolean = true

Whether pressing the Home or End key activates the first/last item.

Returns
this

withHorizontalOrientation

Configures the key manager to move the selection horizontally. Passing in null will disable horizontal movement.

Parameters

direction

"ltr" | "rtl"

Direction in which the selection can be moved.

Returns
this

withPageUpDown

Configures the key manager to activate every 10th, configured or first/last element in up/down direction respectively when the Page-Up or Page-Down key is pressed.

Parameters

enabled

boolean = true

Whether pressing the Page-Up or Page-Down key activates the first/last item.

delta

number = 10

Whether pressing the Home or End key activates the first/last item.

Returns
this

withTypeAhead

Turns on typeahead mode which allows users to set the active item by typing.

Parameters

debounceInterval

number = 200

Time to wait after the last keystroke before setting the active item.

Returns
this

withVerticalOrientation

Configures whether the key manager should be able to move the selection vertically.

Parameters

enabled

boolean = true

Whether vertical selection should be enabled.

Returns
this

withWrap

Configures wrapping mode, which determines whether the active item will wrap to the other end of list when there are no more items in the given direction.

Parameters

shouldWrap

boolean = true

Whether the list should wrap when reaching the end.

Returns
this

This class manages keyboard events for selectable lists. If you pass it a query list of items, it will set the active item correctly when arrow events occur.

Properties
Name Description

activeItem: T | null

The active item.

activeItemIndex: number | null

Index of the currently active item.

change: Subject<number>

Stream that emits whenever the active item of the list manager changes.

tabOut: Subject<void>

Stream that emits any time the TAB key is pressed, so components can react when focus is shifted off of the list.

Methods
cancelTypeahead

Cancels the current typeahead sequence.

Returns
this

destroy

Cleans up the key manager.

isTyping

Gets whether the user is currently typing into the manager using the typeahead feature.

Returns
boolean

onKeydown

Sets the active item depending on the key event passed in.

Parameters

event

KeyboardEvent

Keyboard event to be used for determining which element should be active.

setActiveItem

Sets the active item to the item at the index specified.

Parameters

index

number

The index of the item to be set as active.

setActiveItem

Sets the active item to the specified item.

Parameters

item

T

The item to be set as active.

setFirstItemActive

Sets the active item to the first enabled item in the list.

setLastItemActive

Sets the active item to the last enabled item in the list.

setNextItemActive

Sets the active item to the next enabled item in the list.

setPreviousItemActive

Sets the active item to a previous enabled item in the list.

skipPredicate

Sets the predicate function that determines which items should be skipped by the list key manager.

Parameters

predicate

(item: T) => boolean

Function that determines whether the given item should be skipped.

Returns
this

updateActiveItem

Allows setting the active without any other effects.

Parameters

index

number

Index of the item to be set as active.

updateActiveItem

Allows setting the active item without any other effects.

Parameters

item

T

Item to be set as active.

withAllowedModifierKeys

Modifier keys which are allowed to be held down and whose default actions will be prevented as the user is pressing the arrow keys. Defaults to not allowing any modifier keys.

Parameters

keys

ListKeyManagerModifierKey[]

Returns
this

withHomeAndEnd

Configures the key manager to activate the first and last items respectively when the Home or End key is pressed.

Parameters

enabled

boolean = true

Whether pressing the Home or End key activates the first/last item.

Returns
this

withHorizontalOrientation

Configures the key manager to move the selection horizontally. Passing in null will disable horizontal movement.

Parameters

direction

"ltr" | "rtl"

Direction in which the selection can be moved.

Returns
this

withPageUpDown

Configures the key manager to activate every 10th, configured or first/last element in up/down direction respectively when the Page-Up or Page-Down key is pressed.

Parameters

enabled

boolean = true

Whether pressing the Page-Up or Page-Down key activates the first/last item.

delta

number = 10

Whether pressing the Home or End key activates the first/last item.

Returns
this

withTypeAhead

Turns on typeahead mode which allows users to set the active item by typing.

Parameters

debounceInterval

number = 200

Time to wait after the last keystroke before setting the active item.

Returns
this

withVerticalOrientation

Configures whether the key manager should be able to move the selection vertically.

Parameters

enabled

boolean = true

Whether vertical selection should be enabled.

Returns
this

withWrap

Configures wrapping mode, which determines whether the active item will wrap to the other end of list when there are no more items in the given direction.

Parameters

shouldWrap

boolean = true

Whether the list should wrap when reaching the end.

Returns
this

This class manages keyboard events for trees. If you pass it a QueryList or other list of tree items, it will set the active item, focus, handle expansion and typeahead correctly when keyboard events occur.

Properties
Name Description

change: Subject<T | null>

Stream that emits any time the focused item changes.

Methods
destroy

Cleans up the key manager.

focusItem

Focus the provided item by index.

Parameters

index

number

The index of the item to focus.

options?

{ emitChangeEvent?: boolean; }

Additional focusing options.

focusItem
Parameters

item

T

options?

{ emitChangeEvent?: boolean; }

focusItem
Parameters

itemOrIndex

number | T

options?

{ emitChangeEvent?: boolean; }

getActiveItem

The currently active item.

Returns
T | null

getActiveItemIndex

Index of the currently active item.

Returns
number | null

onKeydown

Handles a keyboard event on the tree.

Parameters

event

KeyboardEvent

Keyboard event that represents the user interaction with the tree.

Class that allows for trapping focus within a DOM element.

This class uses a strategy pattern that determines how it traps focus. See FocusTrapInertStrategy.

Properties
Name Description

enabled: boolean

Whether the FocusTrap is enabled.

Methods
attachAnchors

Inserts the anchors into the DOM. This is usually done automatically in the constructor, but can be deferred for cases like directives with *ngIf.

Returns
boolean

Whether the focus trap managed to attach successfully. This may not be the case if the target element isn't currently in the DOM.

destroy

Notifies the FocusTrapManager that this FocusTrap will be destroyed.

focusFirstTabbableElement

Focuses the first tabbable element within the focus trap region.

Parameters

options?

FocusOptions

Returns
boolean

Whether focus was moved successfully.

async
focusFirstTabbableElementWhenReady

Waits for the zone to stabilize, then focuses the first tabbable element within the focus trap region.

Parameters

options?

FocusOptions

Returns
Promise<boolean>

Returns a promise that resolves with a boolean, depending on whether focus was moved successfully.

focusInitialElement

Focuses the element that should be focused when the focus trap is initialized.

Parameters

options?

FocusOptions

Returns
boolean

Whether focus was moved successfully.

async
focusInitialElementWhenReady

Waits for the zone to stabilize, then focuses the first tabbable element.

Parameters

options?

FocusOptions

Returns
Promise<boolean>

Returns a promise that resolves with a boolean, depending on whether focus was moved successfully.

focusLastTabbableElement

Focuses the last tabbable element within the focus trap region.

Parameters

options?

FocusOptions

Returns
boolean

Whether focus was moved successfully.

async
focusLastTabbableElementWhenReady

Waits for the zone to stabilize, then focuses the last tabbable element within the focus trap region.

Parameters

options?

FocusOptions

Returns
Promise<boolean>

Returns a promise that resolves with a boolean, depending on whether focus was moved successfully.

hasAttached

Checks whether the focus trap has successfully been attached.

Returns
boolean

Lightweight FocusTrapInertStrategy that adds a document focus event listener to redirect focus back inside the FocusTrap.

Methods
allowFocus

Removes the event listener added in preventFocus.

Parameters

focusTrap

ConfigurableFocusTrap

preventFocus

Adds a document event listener that keeps focus inside the FocusTrap.

Parameters

focusTrap

ConfigurableFocusTrap

Class that allows for trapping focus within a DOM element.

This class currently uses a relatively simple approach to focus trapping. It assumes that the tab order is the same as DOM order, which is not necessarily true. Things like tabIndex > 0, flex order, and shadow roots can cause the two to be misaligned.

Properties
Name Description

enabled: boolean

Whether the focus trap is active.

endAnchorListener: () => this.focusFirstTabbableElement()

startAnchorListener: () => this.focusLastTabbableElement()

Methods
attachAnchors

Inserts the anchors into the DOM. This is usually done automatically in the constructor, but can be deferred for cases like directives with *ngIf.

Returns
boolean

Whether the focus trap managed to attach successfully. This may not be the case if the target element isn't currently in the DOM.

destroy

Destroys the focus trap by cleaning up the anchors.

focusFirstTabbableElement

Focuses the first tabbable element within the focus trap region.

Parameters

options?

FocusOptions

Returns
boolean

Whether focus was moved successfully.

async
focusFirstTabbableElementWhenReady

Waits for the zone to stabilize, then focuses the first tabbable element within the focus trap region.

Parameters

options?

FocusOptions

Returns
Promise<boolean>

Returns a promise that resolves with a boolean, depending on whether focus was moved successfully.

focusInitialElement

Focuses the element that should be focused when the focus trap is initialized.

Parameters

options?

FocusOptions

Returns
boolean

Whether focus was moved successfully.

async
focusInitialElementWhenReady

Waits for the zone to stabilize, then focuses the first tabbable element.

Parameters

options?

FocusOptions

Returns
Promise<boolean>

Returns a promise that resolves with a boolean, depending on whether focus was moved successfully.

focusLastTabbableElement

Focuses the last tabbable element within the focus trap region.

Parameters

options?

FocusOptions

Returns
boolean

Whether focus was moved successfully.

async
focusLastTabbableElementWhenReady

Waits for the zone to stabilize, then focuses the last tabbable element within the focus trap region.

Parameters

options?

FocusOptions

Returns
Promise<boolean>

Returns a promise that resolves with a boolean, depending on whether focus was moved successfully.

hasAttached

Checks whether the focus trap has successfully been attached.

Returns
boolean

toggleAnchors

Toggles thetabindex of both anchors to either trap Tab focus or allow it to escape.

Parameters

enabled:

Whether the anchors should trap Tab.

enabled

boolean

Configuration for the isFocusable method.

Properties
Name Description

ignoreVisibility: boolean

Whether to count an element as focusable even if it is not currently visible.

Options to configure the behavior of the InputModalityDetector.

Properties
Name Description

ignoreKeys: number[]

Keys to ignore when detecting keyboard input modality.

Interface used to register message elements and keep a count of how many registrations have the same message and the reference to the message element used for the aria-describedby.

Properties
Name Description

messageElement: Element

The element containing the message.

referenceCount: number

The number of elements that reference this message element via aria-describedby.

This is the interface for highlightable items (used by the ActiveDescendantKeyManager). Each item must know how to style itself as active or inactive and whether or not it is currently disabled.

Methods
setActiveStyles

Applies the styles for an active item to this item.

setInactiveStyles

Applies the styles for an inactive item to this item.

This is the interface for focusable items (used by the FocusKeyManager). Each item must know how to focus itself, whether or not it is currently disabled and be able to supply its label.

Methods
focus

Focuses the FocusableOption.

Parameters

origin?

FocusOrigin

This interface is for items that can be passed to a ListKeyManager.

Properties
Name Description

disabled: boolean

Whether the option is disabled.

Methods
getLabel

Gets the label for this option.

Returns
string

Represents an item within a tree that can be passed to a TreeKeyManager.

Properties
Name Description

isDisabled: (() => boolean) | boolean

Whether the item is disabled.

isExpanded: (() => boolean) | boolean

Determines if the item is currently expanded.

Methods
activate

Perform the main action (i.e. selection) for this item.

collapse

Collapses the item, hiding its children.

expand

Expands the item, showing its children.

focus

Focuses the item. This should provide some indication to the user that this item is focused.

getChildren

Retrieves the children for this item.

Returns
TreeKeyManagerItem[] | Observable<TreeKeyManagerItem[]>

getLabel

The user-facing label for this item.

Returns
string

getParent

Retrieves the parent for this item. This is null if there is no parent.

Returns
TreeKeyManagerItem | null

makeFocusable

Sets the item to be focusable without actually focusing it.

unfocus

Unfocus the item. This should remove the focus state.

Configuration for the TreeKeyManager.

Properties
Name Description

horizontalOrientation: 'rtl' | 'ltr'

The direction in which the tree items are laid out horizontally. This influences which key will be interpreted as expand or collapse.

shouldActivationFollowFocus: boolean

If true, then the key manager will call activate in addition to calling focus when a particular item is focused.

skipPredicate: (item: T) => boolean

If provided, navigation "skips" over items that pass the given predicate.

If the item is to be skipped, predicate function should return false.

trackBy: (treeItem: T) => unknown

If provided, determines how the key manager determines if two items are equivalent.

It should provide a unique key for each unique tree item. If two tree items are equivalent, then this function should return the same value.

typeAheadDebounceInterval: true | number

If a value is provided, enables typeahead mode, which allows users to set the active item by typing the visible label of the item.

If a number is provided, this will be the time to wait after the last keystroke before setting the active item. If true is provided, the default interval of 200ms will be used.

Properties
Name Description

change: Subject<T | null>

Stream that emits any time the focused item changes.

Methods
destroy

Cleans up the key manager.

focusItem

Focus the provided item by index.

Updates the state of the currently active item. Emits to change stream if active item Changes.

Parameters

index

number

The index of the item to focus.

options?

{ emitChangeEvent?: boolean; }

Additional focusing options.

getActiveItem

The currently active item.

Returns
T | null

getActiveItemIndex

Index of the currently active item.

Returns
number | null

onKeydown

Handles a keyboard event on the tree.

Parameters

event

KeyboardEvent

Keyboard event that represents the user interaction with the tree.

Options for creating a ConfigurableFocusTrap.

Properties
Name Description

defer: boolean

Whether to defer the creation of FocusTrap elements to be done manually by the user.

A strategy that dictates how FocusTrap should prevent elements outside of the FocusTrap from being focused.

Methods
allowFocus

Reverts elements made unfocusable by preventFocus to their previous state.

Parameters

focusTrap

FocusTrap

preventFocus

Makes all elements outside focusTrap unfocusable.

Parameters

focusTrap

FocusTrap

Object that can be used to configure the default options for the LiveAnnouncer.

Properties
Name Description

duration: number

Default duration for the announcement messages.

politeness: AriaLivePoliteness

Default politeness for the announcements.

Corresponds to the options that can be passed to the native focus event. via https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/focus

Properties
Name Description

preventScroll: boolean

Whether the browser should scroll to the element when it is focused.

Injectable service-level options for FocusMonitor.

Properties
Name Description

detectionMode: FocusMonitorDetectionMode

addAriaReferencedId

Adds the given ID to the specified ARIA attribute on an element. Used for attributes such as aria-labelledby, aria-owns, etc.

Parameters

el

Element

attr

`aria-${string}`

id

string

removeAriaReferencedId

Removes the given ID from the specified ARIA attribute on an element. Used for attributes such as aria-labelledby, aria-owns, etc.

Parameters

el

Element

attr

`aria-${string}`

id

string

getAriaReferenceIds

Gets the list of IDs referenced by the given ARIA attribute on an element. Used for attributes such as aria-labelledby, aria-owns, etc.

Parameters

el

Element

attr

string

Returns
string[]

isFakeMousedownFromScreenReader

Gets whether an event could be a faked mousedown event dispatched by a screen reader.

Parameters

event

MouseEvent

Returns
boolean

isFakeTouchstartFromScreenReader

Gets whether an event could be a faked touchstart event dispatched by a screen reader.

Parameters

event

TouchEvent

Returns
boolean

The input modalities detected by this service. Null is used if the input modality is unknown.

type InputModality = 'keyboard' | 'mouse' | 'touch' | null;

Modifier keys handled by the ListKeyManager.

type ListKeyManagerModifierKey = 'altKey' | 'ctrlKey' | 'metaKey' | 'shiftKey';
type TreeKeyManagerFactory = (items: Observable<T[]> | QueryList<T> | T[], options: TreeKeyManagerOptions<T>) => TreeKeyManagerStrategy<T>;

Possible politeness levels.

type AriaLivePoliteness = 'off' | 'polite' | 'assertive';
type FocusOrigin = 'touch' | 'mouse' | 'keyboard' | 'program' | null;

Default options for the InputModalityDetector.

Modifier keys are ignored by default (i.e. when pressed won't cause the service to detect keyboard input modality) for two reasons:

  1. Modifier keys are commonly used with mouse to perform actions such as 'right click' or 'open in new tab', and are thus less representative of actual keyboard interaction.
  2. VoiceOver triggers some keyboard events when linearly navigating with Control + Option (but confusingly not with Caps Lock). Thus, to have parity with other screen readers, we ignore these keys so as to not update the input modality.

Note that we do not by default ignore the right Meta key on Safari because it has the same key code as the ContextMenu key on other browsers. When we switch to using event.key, we can distinguish between the two.

const INPUT_MODALITY_DETECTOR_DEFAULT_OPTIONS: InputModalityDetectorOptions;

Injectable options for the InputModalityDetector. These are shallowly merged with the default options.

const INPUT_MODALITY_DETECTOR_OPTIONS: InjectionToken<InputModalityDetectorOptions>;
Deprecated

ID used for the body container where all messages are appended.

const MESSAGES_CONTAINER_ID: "cdk-describedby-message-container";
Deprecated

ID prefix used for each created message element.

const CDK_DESCRIBEDBY_ID_PREFIX: "cdk-describedby-message";
Deprecated

Attribute given to each host element that is described by a message element.

const CDK_DESCRIBEDBY_HOST_ATTRIBUTE: "cdk-describedby-host";

Injection token that determines the key manager to use.

const TREE_KEY_MANAGER: InjectionToken<TreeKeyManagerFactory<any>>;

The injection token used to specify the inert strategy.

const FOCUS_TRAP_INERT_STRATEGY: InjectionToken<FocusTrapInertStrategy>;
const LIVE_ANNOUNCER_ELEMENT_TOKEN: InjectionToken<HTMLElement>;

Injection token that can be used to configure the default options for the LiveAnnouncer.

const LIVE_ANNOUNCER_DEFAULT_OPTIONS: InjectionToken<LiveAnnouncerDefaultOptions>;

InjectionToken for FocusMonitorOptions.

const FOCUS_MONITOR_DEFAULT_OPTIONS: InjectionToken<FocusMonitorOptions>;