无障碍性 Accessibility

a11y 的 API

Angular CDK a11y API 参考文档

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

本服务用于确定浏览器当前是否处于高对比度模式环境中。

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

Microsoft Windows 支持一种称为“高对比度模式”的辅助功能。此模式更改所有应用程序(包括 Web 应用程序)的外观,以显著提高对比度。

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 和 Firefox 支持此模式。 Chrome 浏览器不支持 Windows 高对比度模式。此服务无法检测到由 Chrome 的“高对比度” 扩展程序添加的高对比度模式。

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.

方法
getHighContrastMode

获取页面的当前高对比度模式。

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

返回值

Returns

HighContrastMode

该实用工具创建带有消息内容的视觉不可见元素。对于希望使用 aria-describedby 来进一步描述自己而不想添加其他视觉内容的元素很有用。

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.

方法
describe

为宿主元素添加一个由 aria-describedby 引用的不可见的消息元素。如果已经注册了相同的消息,则它将复用已创建的消息元素。

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

为宿主元素添加一个由 aria-describedby 引用的现有消息元素。

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.

方法
create

在指定元素周围创建一个焦点捕获区域。

Creates a focus-trapped region around the given element.

要在其周围捕获焦点的元素。

@param element The element around which focus will be trapped.

焦点陷阱配置。

@param config The focus trap configuration.

所创建的焦点陷阱实例。

@returns The created focus trap instance.

参数

Parameters

element

HTMLElement

config?

ConfigurableFocusTrapConfig

返回值

Returns

ConfigurableFocusTrap

所创建的焦点陷阱实例。

The created focus trap instance.

已弃用
create

传递一个配置对象,而不是 deferCaptureElements 标志。

@deprecated Pass a config object instead of the deferCaptureElements flag.

@breaking-change 11.0.0

参数

Parameters

element

HTMLElement

deferCaptureElements

boolean

返回值

Returns

ConfigurableFocusTrap

允许轻松实例化焦点陷阱的工厂。

Factory that allows easy instantiation of focus traps.

已弃用
方法
create

在指定元素周围创建一个焦点捕获 zone 。

Creates a focus-trapped region around the given element.

将在其周围捕获焦点的元素。

@param element The element around which focus will be trapped.

推迟创建由用户手动完成的焦点捕获元素。

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

创建的焦点陷阱实例。

@returns The created focus trap instance.

参数

Parameters

element

HTMLElement

deferCaptureElements

boolean = false

返回值

Returns

FocusTrap

创建的焦点陷阱实例。

The created focus trap instance.

用于检查元素交互性的实用工具,例如是否可获得焦点或可 tab。

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

方法
isDisabled

获取元素是否被禁用。

Gets whether an element is disabled.

要检查的元素。

@param element Element to be checked.

元素是否被禁用。

@returns Whether the element is disabled.

参数

Parameters

element

HTMLElement

返回值

Returns

boolean

元素是否被禁用。

Whether the element is disabled.

isFocusable

获取用户是否可以给某个元素设置焦点。

Gets whether an element can be focused by the user.

要检查的元素。

@param element Element to be checked.

带有用于自定义此方法行为的选项的配置对象

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

元素是否可获得焦点。

@returns Whether the element is focusable.

参数

Parameters

element

HTMLElement

config?

IsFocusableConfig

返回值

Returns

boolean

元素是否可获得焦点。

Whether the element is focusable.

isTabbable

获取是否可以通过 Tab 键访问元素。假定已经使用 isFocusable 检查过此元素。

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

要检查的元素。

@param element Element to be checked.

元素是否可 tab。

@returns Whether the element is tabbable.

参数

Parameters

element

HTMLElement

返回值

Returns

boolean

元素是否可 tab。

Whether the element is tabbable.

isVisible

获取某元素可见是否出于交互目的。

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

这包括 display: nonevisibility: hidden 状态下的,但被 overflow: hidden 的父对象切掉或位于视口之外的除外。

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.

元素是否可见。

@returns Whether the element is visible.

参数

Parameters

element

HTMLElement

返回值

Returns

boolean

元素是否可见。

Whether the element is visible.

方法
异步
announce

向屏幕阅读器发布一条消息。

Announces a message to screenreaders.

要通知到屏幕阅读器的消息。

@param message Message to be announced to the screenreader.

将消息添加到 DOM 时将解决的 Promise。

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

参数

Parameters

message

string

返回值

Returns

Promise<void>

将消息添加到 DOM 时将解决的 Promise。

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

异步
announce

向屏幕阅读器发布一条消息。

Announces a message to screenreaders.

要通知屏幕阅读器的消息。

@param message Message to be announced to the screenreader.

播音员元素的礼貌度。

@param politeness The politeness of the announcer element.

将消息添加到 DOM 时将解决的 Promise。

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

参数

Parameters

message

string

politeness?

AriaLivePoliteness

返回值

Returns

Promise<void>

将消息添加到 DOM 时将解决的 Promise。

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

异步
announce

向屏幕阅读器发布一条消息。

Announces a message to screenreaders.

要通知屏幕阅读器的消息。

@param message Message to be announced to the screenreader.

清除播音员元素的时间(以毫秒为单位)。请注意,这是在将消息添加到 DOM 后生效的,这可能在调用 announce 之后的最多 100ms。

@param duration 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.

将消息添加到 DOM 时将解决的 Promise。

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

参数

Parameters

message

string

duration?

number

返回值

Returns

Promise<void>

将消息添加到 DOM 时将解决的 Promise。

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

异步
announce

向屏幕阅读器发布一条消息。

Announces a message to screenreaders.

要通知屏幕阅读器的消息。

@param message Message to be announced to the screenreader.

播音员元素的礼貌度。

@param politeness The politeness of the announcer element.

清除播音员元素的时间(以毫秒为单位)。请注意,这是在将消息添加到 DOM 后生效的,这可能在 announce 被调用之后最多 100ms。

@param duration 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.

将消息添加到 DOM 时将解决的 Promise。

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

参数

Parameters

message

string

politeness?

AriaLivePoliteness

duration?

number

返回值

Returns

Promise<void>

将消息添加到 DOM 时将解决的 Promise。

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.

方法
focusVia

通过指定的焦点来源对元素进行聚焦。

Focuses the element via the specified focus origin.

要获取焦点的元素。

@param element Element to focus.

焦点来源。

@param origin Focus origin.

可用于配置焦点行为的选项。

@param options Options that can be used to configure the focus behavior.

参数

Parameters

element

HTMLElement

origin

FocusOrigin

options?

FocusOptions
focusVia

通过指定的焦点来源对元素进行聚焦。

Focuses the element via the specified focus origin.

要获取焦点的元素。

@param element Element to focus.

焦点来源。

@param origin Focus origin.

可用于配置焦点行为的选项。

@param options Options that can be used to configure the focus behavior.

参数

Parameters

element

ElementRef<HTMLElement>

origin

FocusOrigin

options?

FocusOptions
monitor

监视元素的焦点,并应用适当的 CSS 类。

Monitors focus on an element and applies appropriate CSS classes.

要监视的元素

@param element The element to monitor

当子元素获得焦点时是否要计入这个焦点。

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

会在元素的焦点状态更改时发出通知的可观察对象。当元素失焦时,将发出 null。

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

参数

Parameters

element

HTMLElement

checkChildren?

boolean

返回值

Returns

Observable<FocusOrigin>

会在元素的焦点状态更改时发出通知的可观察对象。当元素失焦时,将发出 null。

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

monitor

监视元素的焦点,并应用适当的 CSS 类。

Monitors focus on an element and applies appropriate CSS classes.

要监视的元素

@param element The element to monitor

当子元素获得焦点时是否要计入这个焦点。

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

会在元素的焦点状态更改时发出通知的可观察对象。当元素失焦时,将发出 null。

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

参数

Parameters

element

ElementRef<HTMLElement>

checkChildren?

boolean

返回值

Returns

Observable<FocusOrigin>

会在元素的焦点状态更改时发出通知的可观察对象。当元素失焦时,将发出 null。

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>

在 zone 内捕获焦点的指令。

Directive for trapping focus within a region.

选择器: [cdkTrapFocus]
导出为: cdkTrapFocus
属性
名称 描述
@Input('cdkTrapFocusAutoCapture')

autoCapture: boolean

指令是否应在初始化时自动将焦点移到捕获的 zone 中,并在销毁时将焦点返回给先前的 activeElement。

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

@Input('cdkTrapFocus')

enabled: boolean

焦点陷阱是否处于活动状态。

Whether the focus trap is active.

focusTrap: FocusTrap

底层 FocusTrap 实例。

Underlying FocusTrap instance.

该指令与 aria-live 相似,但使用 LiveAnnouncer 来确保与更多浏览器和屏幕阅读器的兼容性。

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

选择器: [cdkAriaLive]
导出为: cdkAriaLive
属性
名称 描述
@Input('cdkAriaLive')

politeness: AriaLivePoliteness

朗读消息时要使用的 aria-live 礼貌度。

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:如果元素的任何一个子元素有焦点,则不认为该元素拥有焦点。 2)cdkMonitorSubtreeFocus:如果元素或其任何子元素都有焦点,则认为该元素拥有焦点。

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.

选择器: [cdkMonitorElementFocus] [cdkMonitorSubtreeFocus]
属性
名称 描述
@Output()

cdkFocusChange: EventEmitter<FocusOrigin>

属性
名称 描述

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>

只要按下 TAB 键,流就会发出通知,因此当焦点从列表移开时,组件可以做出反应。

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

方法
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.

用于确定哪个元素应处于活动状态的键盘事件。

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

参数

Parameters

event

KeyboardEvent
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.

要设置为活动条目的索引。

@param index Index of the item to be set as active.

参数

Parameters

index

number
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.

要设置为活动的条目。

@param item Item to be set as active.

参数

Parameters

item

T
setFirstItemActive

将激活条目设置为列表中第一个可用的(enabled)条目。

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

setLastItemActive

将激活条目设置为列表中最后一个可用的(enabled)条目。

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

setNextItemActive

将激活条目设置为列表中的下一个可用的(enabled)条目。

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

setPreviousItemActive

将激活条目设置为列表中的上一个可用的(enabled)条目。

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.

确定是否应跳过指定条目的函数。

@param predicate Function that determines whether the given item should be skipped.

参数

Parameters

predicate

(item

返回值

Returns

this
updateActiveItem

允许在没有任何其他效果的情况下设置激活状态。

Allows setting the active without any other effects.

要设置为活动条目的索引。

@param index Index of the item to be set as active.

参数

Parameters

index

number
updateActiveItem

允许设置活动条目,而没有任何其他影响。

Allows setting the active item without any other effects.

要设置为活动的条目。

@param item Item to be set as active.

参数

Parameters

item

T
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

配置按键管理器,以在按下 Home 或 End 键时分别激活第一项和最后一项。

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

按下 Home 键或 End 键时是否激活第一项/最后一项。

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

参数

Parameters

enabled

boolean = true

返回值

Returns

this
withHorizontalOrientation

配置按键管理器以水平移动选择。传递 null 将禁用水平移动。

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

所选内容可以移动的方向。

@param direction Direction in which the selection can be moved.

参数

Parameters

direction

"ltr" | "rtl"

返回值

Returns

this
withTypeAhead

打开预输入模式,该模式允许用户通过键入来设置活动条目。

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

在最后一次按键操作之后等待一小段时间,然后再设置活动条目。

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

参数

Parameters

debounceInterval

number = 200

返回值

Returns

this
withVerticalOrientation

配置按键管理器是否应该能够垂直移动选择。

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

是否应启用垂直选择。

@param enabled Whether vertical selection should be enabled.

参数

Parameters

enabled

boolean = true

返回值

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.

到达末尾时列表是否应该回卷。

@param shouldWrap Whether the list should wrap when reaching the end.

参数

Parameters

shouldWrap

boolean = true

返回值

Returns

this
属性
名称 描述

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>

只要按下 TAB 键,流就会发出通知,因此当焦点从列表移开时,组件可以做出反应。

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

方法
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.

用于确定哪个元素应处于活动状态的键盘事件。

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

参数

Parameters

event

KeyboardEvent
setActiveItem

将活动条目设置为指定索引处的条目,并让新的活动条目获得焦点。

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

要设置为活动条目的索引。

@param index Index of the item to be set as active.

参数

Parameters

index

number
setActiveItem

将活动条目设置为指定的条目并让它获得焦点。

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

要设置为活动的条目。

@param item Item to be set as active.

参数

Parameters

item

T
setFirstItemActive

将激活条目设置为列表中第一个可用的(enabled)条目。

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

setFocusOrigin

设置焦点来源,该焦点来源将传递给所有后续调用 focus 的条目。

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

用来让条目获取焦点时的焦点来源。

@param origin Focus origin to be used when focusing items.

参数

Parameters

origin

FocusOrigin

返回值

Returns

this
setLastItemActive

将激活条目设置为列表中最后一个可用的(enabled)条目。

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

setNextItemActive

将激活条目设置为列表中的下一个可用的(enabled)条目。

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

setPreviousItemActive

将激活条目设置为列表中的上一个可用的(enabled)条目。

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.

确定是否应跳过指定条目的函数。

@param predicate Function that determines whether the given item should be skipped.

参数

Parameters

predicate

(item

返回值

Returns

this
updateActiveItem

允许在没有任何其他效果的情况下设置激活状态。

Allows setting the active without any other effects.

要设置为活动条目的索引。

@param index Index of the item to be set as active.

参数

Parameters

index

number
updateActiveItem

允许设置活动条目,而没有任何其他影响。

Allows setting the active item without any other effects.

要设置为活动的条目。

@param item Item to be set as active.

参数

Parameters

item

T
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

配置按键管理器,以在按下 Home 或 End 键时分别激活第一项和最后一项。

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

按下 Home 键或 End 键时是否激活第一项/最后一项。

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

参数

Parameters

enabled

boolean = true

返回值

Returns

this
withHorizontalOrientation

配置按键管理器以水平移动选择。传递 null 将禁用水平移动。

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

所选内容可以移动的方向。

@param direction Direction in which the selection can be moved.

参数

Parameters

direction

"ltr" | "rtl"

返回值

Returns

this
withTypeAhead

打开预输入模式,该模式允许用户通过键入来设置活动条目。

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

在最后一次按键操作之后等待一小段时间,然后再设置活动条目。

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

参数

Parameters

debounceInterval

number = 200

返回值

Returns

this
withVerticalOrientation

配置按键管理器是否应该能够垂直移动选择。

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

是否应启用垂直选择。

@param enabled Whether vertical selection should be enabled.

参数

Parameters

enabled

boolean = true

返回值

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.

到达末尾时列表是否应该回卷。

@param shouldWrap Whether the list should wrap when reaching the end.

参数

Parameters

shouldWrap

boolean = true

返回值

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.

属性
名称 描述

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>

只要按下 TAB 键,流就会发出通知,因此当焦点从列表移开时,组件可以做出反应。

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

方法
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.

用于确定哪个元素应处于活动状态的键盘事件。

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

参数

Parameters

event

KeyboardEvent
setActiveItem

把激活条目设置为由索引指定的条目。

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

要设置为活动的条目的索引。

@param index The index of the item to be set as active.

参数

Parameters

index

number
setActiveItem

将活动条目设置为指定的条目。

Sets the active item to the specified item.

要设置为活动的条目。

@param item The item to be set as active.

参数

Parameters

item

T
setFirstItemActive

将激活条目设置为列表中第一个可用的(enabled)条目。

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

setLastItemActive

将激活条目设置为列表中最后一个可用的(enabled)条目。

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

setNextItemActive

将激活条目设置为列表中的下一个可用的(enabled)条目。

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

setPreviousItemActive

将激活条目设置为列表中的上一个可用的(enabled)条目。

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.

确定是否应跳过指定条目的函数。

@param predicate Function that determines whether the given item should be skipped.

参数

Parameters

predicate

(item

返回值

Returns

this
updateActiveItem

允许在没有任何其他效果的情况下设置激活状态。

Allows setting the active without any other effects.

要设置为活动条目的索引。

@param index Index of the item to be set as active.

参数

Parameters

index

number
updateActiveItem

允许设置活动条目,而没有任何其他影响。

Allows setting the active item without any other effects.

要设置为活动的条目。

@param item Item to be set as active.

参数

Parameters

item

T
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

配置按键管理器,以在按下 Home 或 End 键时分别激活第一项和最后一项。

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

按下 Home 键或 End 键时是否激活第一项/最后一项。

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

参数

Parameters

enabled

boolean = true

返回值

Returns

this
withHorizontalOrientation

配置按键管理器以水平移动选择。传递 null 将禁用水平移动。

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

所选内容可以移动的方向。

@param direction Direction in which the selection can be moved.

参数

Parameters

direction

"ltr" | "rtl"

返回值

Returns

this
withTypeAhead

打开预输入模式,该模式允许用户通过键入来设置活动条目。

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

在最后一次按键操作之后等待一小段时间,然后再设置活动条目。

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

参数

Parameters

debounceInterval

number = 200

返回值

Returns

this
withVerticalOrientation

配置按键管理器是否应该能够垂直移动选择。

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

是否应启用垂直选择。

@param enabled Whether vertical selection should be enabled.

参数

Parameters

enabled

boolean = true

返回值

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.

到达末尾时列表是否应该回卷。

@param shouldWrap Whether the list should wrap when reaching the end.

参数

Parameters

shouldWrap

boolean = true

返回值

Returns

this

允许在 DOM 元素内捕获焦点的类。

Class that allows for trapping focus within a DOM element.

此类使用一种策略模式来确定如何捕获焦点。请参阅 FocusTrapInertStrategy。

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

属性
名称 描述

enabled: boolean

是否启用了此 FocusTrap。

Whether the FocusTrap is enabled.

方法
attachAnchors

将这些锚点插入 DOM。这通常是在构造函数中自动完成的,但是对于诸如 *ngIf 之类的指令,可以将其推迟。

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

焦点陷阱是否成功附加。如果目标元素当前不在 DOM 中,则可能不是这种情况。

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

返回值

Returns

boolean

焦点陷阱是否成功附加。如果目标元素当前不在 DOM 中,则可能不是这种情况。

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

通知 FocusTrapManager,此 FocusTrap 将被销毁。

Notifies the FocusTrapManager that this FocusTrap will be destroyed.

focusFirstTabbableElement

让焦点陷阱范围内第一个可 tab 的元素获得焦点。

Focuses the first tabbable element within the focus trap region.

焦点是否成功移动。

@returns Whether focus was moved successfully.

参数

Parameters

options?

FocusOptions

返回值

Returns

boolean

焦点是否成功移动。

Whether focus was moved successfully.

异步
focusFirstTabbableElementWhenReady

等待 zone 稳定,然后让焦点陷阱内第一个可 tab 的元素获得焦点。

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

返回一个解析为布尔值的 promise,具体取决于焦点是否成功移动。

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

参数

Parameters

options?

FocusOptions

返回值

Returns

Promise<boolean>

返回一个解析为布尔值的 promise,具体取决于焦点是否成功移动。

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.

焦点是否成功移动。

@returns Whether focus was moved successfully.

参数

Parameters

options?

FocusOptions

返回值

Returns

boolean

焦点是否成功移动。

Whether focus was moved successfully.

异步
focusInitialElementWhenReady

等待 zone 稳定,然后聚焦用户指定的第一个元素或第一个可 tab 的元素。

Waits for the zone to stabilize, then either focuses the first element that the user specified, or the first tabbable element.

返回一个解析为布尔值的 promise,具体取决于焦点是否成功移动。

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

参数

Parameters

options?

FocusOptions

返回值

Returns

Promise<boolean>

返回一个解析为布尔值的 promise,具体取决于焦点是否成功移动。

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

focusLastTabbableElement

让焦点陷阱范围内最后一个可 tab 的元素获得焦点。

Focuses the last tabbable element within the focus trap region.

焦点是否成功移动。

@returns Whether focus was moved successfully.

参数

Parameters

options?

FocusOptions

返回值

Returns

boolean

焦点是否成功移动。

Whether focus was moved successfully.

异步
focusLastTabbableElementWhenReady

等待 zone 稳定,然后让焦点陷阱内最后一个可 tab 的元素获得焦点。

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

返回一个解析为布尔值的 promise,具体取决于焦点是否成功移动。

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

参数

Parameters

options?

FocusOptions

返回值

Returns

Promise<boolean>

返回一个解析为布尔值的 promise,具体取决于焦点是否成功移动。

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

轻型 FocusTrapInertStrategy,添加了文档焦点事件侦听器以将焦点重定向回 FocusTrap 内部。

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

方法
allowFocus

删除在 preventFocus 中添加的事件侦听器。

Removes the event listener added in preventFocus.

参数

Parameters

focusTrap

ConfigurableFocusTrap
preventFocus

添加一个文档事件监听器,使焦点保持在 FocusTrap 内部。

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

参数

Parameters

focusTrap

ConfigurableFocusTrap

允许在 DOM 元素内捕获焦点的类。

Class that allows for trapping focus within a DOM element.

此类当前使用相对简单的方法进行焦点捕获。它假定 tab 顺序与 DOM 顺序相同,但这不一定正确。和 tabIndex > 0 一样,flex order 和 Shadow DOM 之类的都可能导致两者未对齐。

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.

已弃用
属性
名称 描述

enabled: boolean

焦点陷阱是否处于活动状态。

Whether the focus trap is active.

endAnchorListener: () => this.focusFirstTabbableElement()

startAnchorListener: () => this.focusLastTabbableElement()

方法
attachAnchors

将这些锚点插入 DOM。这通常是在构造函数中自动完成的,但是对于诸如 *ngIf 之类的指令,可以将其推迟。

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

焦点陷阱是否成功附加。如果目标元素当前不在 DOM 中,则可能不是这种情况。

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

返回值

Returns

boolean

焦点陷阱是否成功附加。如果目标元素当前不在 DOM 中,则可能不是这种情况。

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

让焦点陷阱范围内第一个可 tab 的元素获得焦点。

Focuses the first tabbable element within the focus trap region.

焦点是否成功移动。

@returns Whether focus was moved successfully.

参数

Parameters

options?

FocusOptions

返回值

Returns

boolean

焦点是否成功移动。

Whether focus was moved successfully.

异步
focusFirstTabbableElementWhenReady

等待 zone 稳定,然后让焦点陷阱内第一个可 tab 的元素获得焦点。

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

返回一个解析为布尔值的 promise,具体取决于焦点是否成功移动。

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

参数

Parameters

options?

FocusOptions

返回值

Returns

Promise<boolean>

返回一个解析为布尔值的 promise,具体取决于焦点是否成功移动。

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.

焦点是否成功移动。

@returns Whether focus was moved successfully.

参数

Parameters

options?

FocusOptions

返回值

Returns

boolean

焦点是否成功移动。

Whether focus was moved successfully.

异步
focusInitialElementWhenReady

等待 zone 稳定,然后聚焦用户指定的第一个元素或第一个可 tab 的元素。

Waits for the zone to stabilize, then either focuses the first element that the user specified, or the first tabbable element.

返回一个解析为布尔值的 promise,具体取决于焦点是否成功移动。

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

参数

Parameters

options?

FocusOptions

返回值

Returns

Promise<boolean>

返回一个解析为布尔值的 promise,具体取决于焦点是否成功移动。

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

focusLastTabbableElement

让焦点陷阱范围内最后一个可 tab 的元素获得焦点。

Focuses the last tabbable element within the focus trap region.

焦点是否成功移动。

@returns Whether focus was moved successfully.

参数

Parameters

options?

FocusOptions

返回值

Returns

boolean

焦点是否成功移动。

Whether focus was moved successfully.

异步
focusLastTabbableElementWhenReady

等待 zone 稳定,然后让焦点陷阱内最后一个可 tab 的元素获得焦点。

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

返回一个解析为布尔值的 promise,具体取决于焦点是否成功移动。

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

参数

Parameters

options?

FocusOptions

返回值

Returns

Promise<boolean>

返回一个解析为布尔值的 promise,具体取决于焦点是否成功移动。

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

切换 tabindex 以捕获 Tab 焦点或允许脱离。

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

@param enabled: Whether the anchors should trap Tab.

参数

Parameters

enabled:

enabled

boolean

isFocusable 方法的配置。

Configuration for the isFocusable method.

属性
名称 描述

ignoreVisibility: boolean

是否将不可见元素计入可获得焦点的元素。

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

本接口用于注册消息元素并保留具有相同消息的注册数量的计数,以及用于 aria-describedby 对消息元素的引用。

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.

属性
名称 描述

messageElement: Element

包含消息的元素。

The element containing the message.

referenceCount: number

通过 aria-describedby 引用此消息元素的元素数。

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

这是突出显示项的界面(由 ActiveDescendantKeyManager 使用)。每个条目都必须知道如何将自己设置为活动或非活动样式,以及当前是否处于禁用状态。

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.

方法
setActiveStyles

将活动条目的样式应用于此条目。

Applies the styles for an active item to this item.

setInactiveStyles

将非活动条目的样式应用于此条目。

Applies the styles for an inactive item to this item.

这是可获取焦点条目的接口(由 FocusKeyManager 使用)。每个条目都必须知道如何获取焦点,无论当前是否被禁用并能提供其标签。

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.

方法
focus

让此 FocusableOption 获得焦点。

Focuses the FocusableOption.

参数

Parameters

origin?

FocusOrigin

此接口用于可传递给 ListKeyManager 的条目。

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

属性
名称 描述

disabled: boolean

该选项是否被禁用。

Whether the option is disabled.

方法
getLabel

获取此选项的标签。

Gets the label for this option.

返回值

Returns

string

用于创建 ConfigurableFocusTrap 的选项。

Options for creating a ConfigurableFocusTrap.

属性
名称 描述

defer: boolean

是否推迟到由用户手动完成 FocusTrap 元素的创建。

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

一种策略,指示 FocusTrap 应如何防止 FocusTrap 外部的元素获得焦点。

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

方法
allowFocus

通过 preventFocus 以前的状态,来把元素恢复为不可获得焦点的状态。

Reverts elements made unfocusable by preventFocus to their previous state.

参数

Parameters

focusTrap

FocusTrap
preventFocus

使 focusTrap 之外的所有元素都无法获得焦点。

Makes all elements outside focusTrap unfocusable.

参数

Parameters

focusTrap

FocusTrap

可用于配置 LiveAnnouncer 的默认选项的对象。

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

属性
名称 描述

duration: number

朗读消息的默认持续时间。

Default duration for the announcement messages.

politeness: AriaLivePoliteness

朗读的默认礼貌度。

Default politeness for the announcements.

对应于可以传递给原生 focus 事件的选项。通过 https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/focus

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

属性
名称 描述

preventScroll: boolean

浏览器在焦点变化时是否应滚动到该元素。

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

FocusMonitor 在可注入服务级别的选项。

Injectable service-level options for FocusMonitor.

属性
名称 描述

detectionMode: FocusMonitorDetectionMode

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

ListKeyManager 处理的修饰键。

Modifier keys handled by the ListKeyManager.

type ListKeyManagerModifierKey = 'altKey' | 'ctrlKey' | 'metaKey' | 'shiftKey';

可能的礼貌度。

Possible politeness levels.

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

用于追加所有消息的正文容器的 ID。

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

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

用于所创建的每个消息元素的 ID 前缀。

ID prefix used for each created message element.

const CDK_DESCRIBEDBY_ID_PREFIX: "cdk-describedby-message";

用来指定消息元素描述的每个宿主元素的属性。

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

const CDK_DESCRIBEDBY_HOST_ATTRIBUTE: "cdk-describedby-host";

用于指定惰性策略的注入令牌。

The injection token used to specify the inert strategy.

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

注入令牌,可用于配置 LiveAnnouncer 的默认选项。

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

const LIVE_ANNOUNCER_DEFAULT_OPTIONS: InjectionToken<LiveAnnouncerDefaultOptions>;
const TOUCH_BUFFER_MS: 650;

FocusMonitorOptions 的 InjectionToken。

InjectionToken for FocusMonitorOptions.

const FOCUS_MONITOR_DEFAULT_OPTIONS: InjectionToken<FocusMonitorOptions>;