@@ -13,37 +13,83 @@ import {addAriaReferencedId, getAriaReferenceIds, removeAriaReferencedId} from '
13
13
/**
14
14
* Interface used to register message elements and keep a count of how many registrations have
15
15
* the same message and the reference to the message element used for the `aria-describedby`.
16
+ *
17
+ * 本接口用于注册消息元素并保留具有相同消息的注册数量的计数,以及用于 `aria-describedby` 对消息元素的引用。
18
+ *
16
19
*/
17
20
export interface RegisteredMessage {
18
- /** The element containing the message. */
21
+ /**
22
+ * The element containing the message.
23
+ *
24
+ * 包含消息的元素。
25
+ *
26
+ */
19
27
messageElement : Element ;
20
28
21
- /** The number of elements that reference this message element via `aria-describedby`. */
29
+ /**
30
+ * The number of elements that reference this message element via `aria-describedby`.
31
+ *
32
+ * 通过 `aria-describedby` 引用此消息元素的元素数。
33
+ *
34
+ */
22
35
referenceCount : number ;
23
36
}
24
37
25
- /** ID used for the body container where all messages are appended. */
38
+ /**
39
+ * ID used for the body container where all messages are appended.
40
+ *
41
+ * 用于追加所有消息的正文容器的 ID。
42
+ *
43
+ */
26
44
export const MESSAGES_CONTAINER_ID = 'cdk-describedby-message-container' ;
27
45
28
- /** ID prefix used for each created message element. */
46
+ /**
47
+ * ID prefix used for each created message element.
48
+ *
49
+ * 用于所创建的每个消息元素的 ID 前缀。
50
+ *
51
+ */
29
52
export const CDK_DESCRIBEDBY_ID_PREFIX = 'cdk-describedby-message' ;
30
53
31
- /** Attribute given to each host element that is described by a message element. */
54
+ /**
55
+ * Attribute given to each host element that is described by a message element.
56
+ *
57
+ * 用来指定消息元素描述的每个宿主元素的属性。
58
+ *
59
+ */
32
60
export const CDK_DESCRIBEDBY_HOST_ATTRIBUTE = 'cdk-describedby-host' ;
33
61
34
- /** Global incremental identifier for each registered message element. */
62
+ /**
63
+ * Global incremental identifier for each registered message element.
64
+ *
65
+ * 每个已注册消息元素的全局增量标识符。
66
+ *
67
+ */
35
68
let nextId = 0 ;
36
69
37
- /** Global map of all registered message elements that have been placed into the document. */
70
+ /**
71
+ * Global map of all registered message elements that have been placed into the document.
72
+ *
73
+ * 文档中所有已注册消息元素的全局映射。
74
+ *
75
+ */
38
76
const messageRegistry = new Map < string | Element , RegisteredMessage > ( ) ;
39
77
40
- /** Container for all registered messages. */
78
+ /**
79
+ * Container for all registered messages.
80
+ *
81
+ * 所有已注册消息的容器。
82
+ *
83
+ */
41
84
let messagesContainer : HTMLElement | null = null ;
42
85
43
86
/**
44
87
* Utility that creates visually hidden elements with a message content. Useful for elements that
45
88
* want to use aria-describedby to further describe themselves without adding additional visual
46
89
* content.
90
+ *
91
+ * 该实用工具创建带有消息内容的视觉不可见元素。对于希望使用 aria-describedby 来进一步描述自己而不想添加其他视觉内容的元素很有用。
92
+ *
47
93
*/
48
94
@Injectable ( { providedIn : 'root' } )
49
95
export class AriaDescriber implements OnDestroy {
@@ -58,11 +104,17 @@ export class AriaDescriber implements OnDestroy {
58
104
* Adds to the host element an aria-describedby reference to a hidden element that contains
59
105
* the message. If the same message has already been registered, then it will reuse the created
60
106
* message element.
107
+ *
108
+ * 为宿主元素添加一个由 aria-describedby 引用的不可见的消息元素。如果已经注册了相同的消息,则它将复用已创建的消息元素。
109
+ *
61
110
*/
62
111
describe ( hostElement : Element , message : string , role ?: string ) : void ;
63
112
64
113
/**
65
114
* Adds to the host element an aria-describedby reference to an already-existing message element.
115
+ *
116
+ * 为宿主元素添加一个由 aria-describedby 引用的现有消息元素。
117
+ *
66
118
*/
67
119
describe ( hostElement : Element , message : HTMLElement ) : void ;
68
120
@@ -86,10 +138,20 @@ export class AriaDescriber implements OnDestroy {
86
138
}
87
139
}
88
140
89
- /** Removes the host element's aria-describedby reference to the message. */
141
+ /**
142
+ * Removes the host element's aria-describedby reference to the message.
143
+ *
144
+ * 删除宿主元素由 aria-describedby 引用的消息。
145
+ *
146
+ */
90
147
removeDescription ( hostElement : Element , message : string , role ?: string ) : void ;
91
148
92
- /** Removes the host element's aria-describedby reference to the message element. */
149
+ /**
150
+ * Removes the host element's aria-describedby reference to the message element.
151
+ *
152
+ * 删除宿主元素由 aria-describedby 引用的消息元素。
153
+ *
154
+ */
93
155
removeDescription ( hostElement : Element , message : HTMLElement ) : void ;
94
156
95
157
removeDescription ( hostElement : Element , message : string | HTMLElement , role ?: string ) : void {
@@ -117,7 +179,12 @@ export class AriaDescriber implements OnDestroy {
117
179
}
118
180
}
119
181
120
- /** Unregisters all created message elements and removes the message container. */
182
+ /**
183
+ * Unregisters all created message elements and removes the message container.
184
+ *
185
+ * 注销所有已创建的消息元素,并删除消息容器。
186
+ *
187
+ */
121
188
ngOnDestroy ( ) {
122
189
const describedElements =
123
190
this . _document . querySelectorAll ( `[${ CDK_DESCRIBEDBY_HOST_ATTRIBUTE } ]` ) ;
@@ -137,6 +204,9 @@ export class AriaDescriber implements OnDestroy {
137
204
/**
138
205
* Creates a new element in the visually hidden message container element with the message
139
206
* as its content and adds it to the message registry.
207
+ *
208
+ * 在以消息为内容的可视隐藏消息容器元素中创建一个新元素,并将其添加到消息注册表中。
209
+ *
140
210
*/
141
211
private _createMessageElement ( message : string , role ?: string ) {
142
212
const messageElement = this . _document . createElement ( 'div' ) ;
@@ -152,7 +222,12 @@ export class AriaDescriber implements OnDestroy {
152
222
messageRegistry . set ( getKey ( message , role ) , { messageElement, referenceCount : 0 } ) ;
153
223
}
154
224
155
- /** Deletes the message element from the global messages container. */
225
+ /**
226
+ * Deletes the message element from the global messages container.
227
+ *
228
+ * 从全局消息容器中删除消息元素。
229
+ *
230
+ */
156
231
private _deleteMessageElement ( key : string | Element ) {
157
232
const registeredMessage = messageRegistry . get ( key ) ;
158
233
const messageElement = registeredMessage && registeredMessage . messageElement ;
@@ -162,7 +237,12 @@ export class AriaDescriber implements OnDestroy {
162
237
messageRegistry . delete ( key ) ;
163
238
}
164
239
165
- /** Creates the global container for all aria-describedby messages. */
240
+ /**
241
+ * Creates the global container for all aria-describedby messages.
242
+ *
243
+ * 为所有由 aria-describedby 引用的消息创建全局容器。
244
+ *
245
+ */
166
246
private _createMessagesContainer ( ) {
167
247
if ( ! messagesContainer ) {
168
248
const preExistingContainer = this . _document . getElementById ( MESSAGES_CONTAINER_ID ) ;
@@ -190,15 +270,25 @@ export class AriaDescriber implements OnDestroy {
190
270
}
191
271
}
192
272
193
- /** Deletes the global messages container. */
273
+ /**
274
+ * Deletes the global messages container.
275
+ *
276
+ * 删除全局消息容器。
277
+ *
278
+ */
194
279
private _deleteMessagesContainer ( ) {
195
280
if ( messagesContainer && messagesContainer . parentNode ) {
196
281
messagesContainer . parentNode . removeChild ( messagesContainer ) ;
197
282
messagesContainer = null ;
198
283
}
199
284
}
200
285
201
- /** Removes all cdk-describedby messages that are hosted through the element. */
286
+ /**
287
+ * Removes all cdk-describedby messages that are hosted through the element.
288
+ *
289
+ * 删除以此元素为宿主的所有由 cdk-describedby 引用的消息。
290
+ *
291
+ */
202
292
private _removeCdkDescribedByReferenceIds ( element : Element ) {
203
293
// Remove all aria-describedby reference IDs that are prefixed by CDK_DESCRIBEDBY_ID_PREFIX
204
294
const originalReferenceIds = getAriaReferenceIds ( element , 'aria-describedby' )
@@ -209,6 +299,9 @@ export class AriaDescriber implements OnDestroy {
209
299
/**
210
300
* Adds a message reference to the element using aria-describedby and increments the registered
211
301
* message's reference count.
302
+ *
303
+ * 把一个消息添加到由 aria-describedby 引用的元素,并递增已注册消息的引用计数。
304
+ *
212
305
*/
213
306
private _addMessageReference ( element : Element , key : string | Element ) {
214
307
const registeredMessage = messageRegistry . get ( key ) ! ;
@@ -223,6 +316,9 @@ export class AriaDescriber implements OnDestroy {
223
316
/**
224
317
* Removes a message reference from the element using aria-describedby
225
318
* and decrements the registered message's reference count.
319
+ *
320
+ * 把一个消息从由 aria-describedby 引用的元素中删除,并递减已注册消息的引用计数。
321
+ *
226
322
*/
227
323
private _removeMessageReference ( element : Element , key : string | Element ) {
228
324
const registeredMessage = messageRegistry . get ( key ) ! ;
@@ -232,7 +328,12 @@ export class AriaDescriber implements OnDestroy {
232
328
element . removeAttribute ( CDK_DESCRIBEDBY_HOST_ATTRIBUTE ) ;
233
329
}
234
330
235
- /** Returns true if the element has been described by the provided message ID. */
331
+ /**
332
+ * Returns true if the element has been described by the provided message ID.
333
+ *
334
+ * 如果元素已由提供的消息 ID 描述(described),则返回 true。
335
+ *
336
+ */
236
337
private _isElementDescribedByMessage ( element : Element , key : string | Element ) : boolean {
237
338
const referenceIds = getAriaReferenceIds ( element , 'aria-describedby' ) ;
238
339
const registeredMessage = messageRegistry . get ( key ) ;
@@ -241,7 +342,12 @@ export class AriaDescriber implements OnDestroy {
241
342
return ! ! messageId && referenceIds . indexOf ( messageId ) != - 1 ;
242
343
}
243
344
244
- /** Determines whether a message can be described on a particular element. */
345
+ /**
346
+ * Determines whether a message can be described on a particular element.
347
+ *
348
+ * 确定是否可以在特定元素上描述消息。
349
+ *
350
+ */
245
351
private _canBeDescribed ( element : Element , message : string | HTMLElement | void ) : boolean {
246
352
if ( ! this . _isElementNode ( element ) ) {
247
353
return false ;
@@ -262,18 +368,33 @@ export class AriaDescriber implements OnDestroy {
262
368
return trimmedMessage ? ( ! ariaLabel || ariaLabel . trim ( ) !== trimmedMessage ) : false ;
263
369
}
264
370
265
- /** Checks whether a node is an Element node. */
371
+ /**
372
+ * Checks whether a node is an Element node.
373
+ *
374
+ * 检查节点是否为元素节点。
375
+ *
376
+ */
266
377
private _isElementNode ( element : Node ) : element is Element {
267
378
return element . nodeType === this . _document . ELEMENT_NODE ;
268
379
}
269
380
}
270
381
271
- /** Gets a key that can be used to look messages up in the registry. */
382
+ /**
383
+ * Gets a key that can be used to look messages up in the registry.
384
+ *
385
+ * 获取可用于在注册表中查找消息的键。
386
+ *
387
+ */
272
388
function getKey ( message : string | Element , role ?: string ) : string | Element {
273
389
return typeof message === 'string' ? `${ role || '' } /${ message } ` : message ;
274
390
}
275
391
276
- /** Assigns a unique ID to an element, if it doesn't have one already. */
392
+ /**
393
+ * Assigns a unique ID to an element, if it doesn't have one already.
394
+ *
395
+ * 如果元素还没有,则为其分配一个唯一的 ID。
396
+ *
397
+ */
277
398
function setMessageId ( element : HTMLElement ) {
278
399
if ( ! element . id ) {
279
400
element . id = `${ CDK_DESCRIBEDBY_ID_PREFIX } -${ nextId ++ } ` ;
0 commit comments