Angular CDK a11y API 参考文档
import {A11yModule} from '@angular/cdk/a11y';
服务
HighContrastModeDetector
本服务用于确定浏览器当前是否处于高对比度模式环境中。
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
|
|
AriaDescriber
该实用工具创建带有消息内容的视觉不可见元素。对于希望使用 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
|
|
ConfigurableFocusTrapFactory
本工厂允许轻松实例化可配置的焦点陷阱。
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
|
|
---|---|
传递一个配置对象,而不是 @deprecated Pass a config object instead of the @breaking-change 11.0.0 |
|
参数 Parameters |
|
element HTMLElement
|
|
deferCaptureElements boolean
|
|
返回值 Returns |
|
ConfigurableFocusTrap
|
|
FocusTrapFactory
允许轻松实例化焦点陷阱的工厂。
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. |
InteractivityChecker
用于检查元素交互性的实用工具,例如是否可获得焦点或可 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. 这包括 This will capture states like 元素是否可见。 @returns Whether the element is visible. |
|
参数 Parameters |
|
element HTMLElement
|
|
返回值 Returns |
|
boolean
|
元素是否可见。 Whether the element is visible. |
LiveAnnouncer
方法
异步
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 后生效的,这可能在调用 @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 将消息添加到 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 后生效的,这可能在 @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 将消息添加到 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. |
FocusMonitor
监视鼠标和键盘事件以确定焦点事件的原因。
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>
|
|
指令
CdkTrapFocus
在 zone 内捕获焦点的指令。
Directive for trapping focus within a region.
属性
名称 | 描述 |
---|---|
@Input('cdkTrapFocusAutoCapture')
|
指令是否应在初始化时自动将焦点移到捕获的 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')
|
焦点陷阱是否处于活动状态。 Whether the focus trap is active. |
|
底层 FocusTrap 实例。 Underlying FocusTrap instance. |
CdkAriaLive
该指令与 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.
属性
名称 | 描述 |
---|---|
@Input('cdkAriaLive')
|
朗读消息时要使用的 aria-live 礼貌度。 The aria-live politeness level to use when announcing messages. |
CdkMonitorFocus
指令,用于确定如何让特定元素获得焦点(通过键盘,鼠标,触摸或以编程方式),并向该元素添加相应的类。
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.
属性
名称 | 描述 |
---|---|
@Output()
|
类
ActiveDescendantKeyManager
extends
ListKeyManager
属性
名称 | 描述 |
---|---|
|
活动条目。 The active item. |
|
当前活动条目的索引。 Index of the currently active item. |
|
每当列表管理器的活动条目更改时发出通知的流。 Stream that emits whenever the active item of the list manager changes. |
|
只要按下 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 | |
---|---|
配置按键管理器以水平移动选择。传递 Configures the key manager to move the selection horizontally.
Passing in 所选内容可以移动的方向。 @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
|
|
FocusKeyManager
extends
ListKeyManager
属性
名称 | 描述 |
---|---|
|
活动条目。 The active item. |
|
当前活动条目的索引。 Index of the currently active item. |
|
每当列表管理器的活动条目更改时发出通知的流。 Stream that emits whenever the active item of the list manager changes. |
|
只要按下 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 | |
---|---|
设置焦点来源,该焦点来源将传递给所有后续调用 Sets the focus origin that will be passed in to the items for any subsequent 用来让条目获取焦点时的焦点来源。 @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 | |
---|---|
配置按键管理器以水平移动选择。传递 Configures the key manager to move the selection horizontally.
Passing in 所选内容可以移动的方向。 @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
|
|
ListKeyManager
此类管理可选列表的键盘事件。如果向其传递条目的查询列表,则当发生方向键事件时,它将正确设置活动条目。
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.
属性
名称 | 描述 |
---|---|
|
活动条目。 The active item. |
|
当前活动条目的索引。 Index of the currently active item. |
|
每当列表管理器的活动条目更改时发出通知的流。 Stream that emits whenever the active item of the list manager changes. |
|
只要按下 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 | |
---|---|
配置按键管理器以水平移动选择。传递 Configures the key manager to move the selection horizontally.
Passing in 所选内容可以移动的方向。 @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
|
|
ConfigurableFocusTrap
extends
FocusTrap
允许在 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.
属性
名称 | 描述 |
---|---|
|
是否启用了此 FocusTrap。 Whether the FocusTrap is enabled. |
方法
attachAnchors | |
---|---|
将这些锚点插入 DOM。这通常是在构造函数中自动完成的,但是对于诸如 Inserts the anchors into the DOM. This is usually done automatically
in the constructor, but can be deferred for cases like directives with 焦点陷阱是否成功附加。如果目标元素当前不在 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
|
|
EventListenerFocusTrapInertStrategy
轻型 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
|
|
FocusTrap
允许在 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.
属性
名称 | 描述 |
---|---|
|
焦点陷阱是否处于活动状态。 Whether the focus trap is active. |
|
|
|
方法
attachAnchors | |
---|---|
将这些锚点插入 DOM。这通常是在构造函数中自动完成的,但是对于诸如 Inserts the anchors into the DOM. This is usually done automatically
in the constructor, but can be deferred for cases like directives with 焦点陷阱是否成功附加。如果目标元素当前不在 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 | |
---|---|
切换 Toggles the @param enabled: Whether the anchors should trap Tab. |
|
参数 Parameters |
|
enabled:
|
|
enabled boolean
|
|
IsFocusableConfig
isFocusable 方法的配置。
Configuration for the isFocusable method.
属性
名称 | 描述 |
---|---|
|
是否将不可见元素计入可获得焦点的元素。 Whether to count an element as focusable even if it is not currently visible. |
接口
RegisteredMessage
本接口用于注册消息元素并保留具有相同消息的注册数量的计数,以及用于 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
.
属性
名称 | 描述 |
---|---|
|
包含消息的元素。 The element containing the message. |
|
通过 The number of elements that reference this message element via |
Highlightable
这是突出显示项的界面(由 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. |
FocusableOption
这是可获取焦点条目的接口(由 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 | |
---|---|
让此 Focuses the |
|
参数 Parameters |
|
origin? FocusOrigin
|
|
ListKeyManagerOption
此接口用于可传递给 ListKeyManager 的条目。
This interface is for items that can be passed to a ListKeyManager.
属性
名称 | 描述 |
---|---|
|
该选项是否被禁用。 Whether the option is disabled. |
方法
getLabel | |
---|---|
获取此选项的标签。 Gets the label for this option. |
|
返回值 Returns |
|
string
|
|
ConfigurableFocusTrapConfig
用于创建 ConfigurableFocusTrap 的选项。
Options for creating a ConfigurableFocusTrap.
属性
名称 | 描述 |
---|---|
|
是否推迟到由用户手动完成 FocusTrap 元素的创建。 Whether to defer the creation of FocusTrap elements to be done manually by the user. |
FocusTrapInertStrategy
一种策略,指示 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
|
|
LiveAnnouncerDefaultOptions
可用于配置 LiveAnnouncer 的默认选项的对象。
Object that can be used to configure the default options for the LiveAnnouncer.
属性
名称 | 描述 |
---|---|
|
朗读消息的默认持续时间。 Default duration for the announcement messages. |
|
朗读的默认礼貌度。 Default politeness for the announcements. |
FocusOptions
对应于可以传递给原生 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
属性
名称 | 描述 |
---|---|
|
浏览器在焦点变化时是否应滚动到该元素。 Whether the browser should scroll to the element when it is focused. |
FocusMonitorOptions
FocusMonitor 在可注入服务级别的选项。
Injectable service-level options for FocusMonitor.
属性
名称 | 描述 |
---|---|
|
函数
isFakeMousedownFromScreenReader | |
---|---|
Gets whether an event could be a faked |
|
参数 Parameters |
|
event MouseEvent
|
|
返回值 Returns |
|
boolean
|
|
isFakeTouchstartFromScreenReader | |
---|---|
Gets whether an event could be a faked |
|
参数 Parameters |
|
event TouchEvent
|
|
返回值 Returns |
|
boolean
|
|
类型别名
ListKeyManagerModifierKey
ListKeyManager 处理的修饰键。
Modifier keys handled by the ListKeyManager.
type ListKeyManagerModifierKey = 'altKey' | 'ctrlKey' | 'metaKey' | 'shiftKey';
AriaLivePoliteness
可能的礼貌度。
Possible politeness levels.
type AriaLivePoliteness = 'off' | 'polite' | 'assertive';
FocusOrigin
type FocusOrigin = 'touch' | 'mouse' | 'keyboard' | 'program' | null;
常量
MESSAGES_CONTAINER_ID
用于追加所有消息的正文容器的 ID。
ID used for the body container where all messages are appended.
const MESSAGES_CONTAINER_ID: "cdk-describedby-message-container";
CDK_DESCRIBEDBY_ID_PREFIX
用于所创建的每个消息元素的 ID 前缀。
ID prefix used for each created message element.
const CDK_DESCRIBEDBY_ID_PREFIX: "cdk-describedby-message";
CDK_DESCRIBEDBY_HOST_ATTRIBUTE
用来指定消息元素描述的每个宿主元素的属性。
Attribute given to each host element that is described by a message element.
const CDK_DESCRIBEDBY_HOST_ATTRIBUTE: "cdk-describedby-host";
FOCUS_TRAP_INERT_STRATEGY
用于指定惰性策略的注入令牌。
The injection token used to specify the inert strategy.
const FOCUS_TRAP_INERT_STRATEGY: InjectionToken<FocusTrapInertStrategy>;
LIVE_ANNOUNCER_ELEMENT_TOKEN
const LIVE_ANNOUNCER_ELEMENT_TOKEN: InjectionToken<HTMLElement>;
LIVE_ANNOUNCER_DEFAULT_OPTIONS
注入令牌,可用于配置 LiveAnnouncer 的默认选项。
Injection token that can be used to configure the default options for the LiveAnnouncer.
const LIVE_ANNOUNCER_DEFAULT_OPTIONS: InjectionToken<LiveAnnouncerDefaultOptions>;
TOUCH_BUFFER_MS
const TOUCH_BUFFER_MS: 650;
FOCUS_MONITOR_DEFAULT_OPTIONS
FocusMonitorOptions 的 InjectionToken。
InjectionToken for FocusMonitorOptions.
const FOCUS_MONITOR_DEFAULT_OPTIONS: InjectionToken<FocusMonitorOptions>;