无障碍性 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 focus traps.

已弃用
方法
create

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

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.

本工厂允许轻松实例化可配置的焦点陷阱。

Factory that allows easy instantiation of configurable focus traps.

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

已弃用
create

参数

Parameters

element

HTMLElement

deferCaptureElements

boolean

返回值

Returns

ConfigurableFocusTrap

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

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

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

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

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

元素是否可 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.

参数

Parameters

element

HTMLElement

返回值

Returns

boolean

元素是否可见。

Whether the element is visible.

方法
异步
announce

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

Announces a message to screenreaders.

参数

Parameters

message

string

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

Message to be announced to the screenreader.

返回值

Returns

Promise<void>

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

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

异步
announce

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

Announces a message to screenreaders.

参数

Parameters

message

string

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

Message to be announced to the screenreader.

politeness?

AriaLivePoliteness

播音员元素的礼貌度。

The politeness of the announcer element.

返回值

Returns

Promise<void>

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

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

异步
announce

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

Announces a message to screenreaders.

参数

Parameters

message

string

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

Message to be announced to the screenreader.

duration?

number

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

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>

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

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

异步
announce

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

Announces a message to screenreaders.

参数

Parameters

message

string

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

Message to be announced to the screenreader.

politeness?

AriaLivePoliteness

播音员元素的礼貌度。

The politeness of the announcer element.

duration?

number

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

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>

将消息添加到 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.

参数

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

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

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>

会在元素的焦点状态更改时发出通知的可观察对象。当元素失焦时,将发出 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.

参数

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>

会在元素的焦点状态更改时发出通知的可观察对象。当元素失焦时,将发出 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.

参数

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

将激活条目设置为列表中第一个可用的(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.

参数

Parameters

predicate

(item

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

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

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

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

参数

Parameters

enabled

boolean = true

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

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

返回值

Returns

this
withHorizontalOrientation

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

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
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
属性
名称 描述

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.

参数

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

将激活条目设置为列表中第一个可用的(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.

参数

Parameters

origin

FocusOrigin

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

Focus origin to be used when focusing items.

返回值

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.

参数

Parameters

predicate

(item

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

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

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

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

参数

Parameters

enabled

boolean = true

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

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

返回值

Returns

this
withHorizontalOrientation

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

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

属性
名称 描述

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.

参数

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

将激活条目设置为列表中第一个可用的(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.

参数

Parameters

predicate

(item

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

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

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

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

参数

Parameters

enabled

boolean = true

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

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

返回值

Returns

this
withHorizontalOrientation

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

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

允许在 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.

返回值

Returns

boolean

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

Whether the focus trap managed to attach successfuly. 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

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.

返回值

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

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.

返回值

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

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.

返回值

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

已弃用
属性
名称 描述

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.

返回值

Returns

boolean

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

Whether the focus trap managed to attach successfuly. 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

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.

返回值

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

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.

返回值

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

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.

返回值

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.

参数

Parameters

enabled:

Whether the anchors should trap Tab.

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

一种策略,指示 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

当使用键盘激活可获得焦点的元素时,屏幕阅读器通常会触发一个伪 mousedown 事件。我们通常可以使用 “buttons” 属性来区分这些伪 mousedown 事件和真实的 mousedown 事件。真实的 mousedown 会指出被按下的鼠标按键(比如鼠标左键是“1”),而伪造的 mousedown 通常会把该属性值设置为 0。

Screenreaders will often fire fake mousedown events when a focusable element is activated using the keyboard. We can typically distinguish between these faked mousedown events and real mousedown events using the "buttons" property. While real mousedowns will indicate the mouse button that was pressed (e.g. "1" for the left mouse button), faked mousedowns will usually set the property value to 0.

参数

Parameters

event

MouseEvent

返回值

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>;