1 | /**
|
2 | * @license Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved.
|
3 | * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
|
4 | */
|
5 | import type Editor from './editor/editor.js';
|
6 | export declare const DEFAULT_GROUP_ID: "common";
|
7 | /**
|
8 | * A common namespace for various accessibility features of the editor.
|
9 | *
|
10 | * **Information about editor keystrokes**
|
11 | *
|
12 | * * The information about keystrokes available in the editor is stored in the {@link #keystrokeInfos} property.
|
13 | * * New info entries can be added using the {@link #addKeystrokeInfoCategory}, {@link #addKeystrokeInfoGroup},
|
14 | * and {@link #addKeystrokeInfos} methods.
|
15 | */
|
16 | export default class Accessibility {
|
17 | /**
|
18 | * Stores information about keystrokes brought by editor features for the users to interact with the editor, mainly
|
19 | * keystroke combinations and their accessible labels.
|
20 | *
|
21 | * This information is particularly useful for screen reader and other assistive technology users. It gets displayed
|
22 | * by the {@link module:ui/editorui/accessibilityhelp/accessibilityhelp~AccessibilityHelp Accessibility help} dialog.
|
23 | *
|
24 | * Keystrokes are organized in categories and groups. They can be added using ({@link #addKeystrokeInfoCategory},
|
25 | * {@link #addKeystrokeInfoGroup}, and {@link #addKeystrokeInfos}) methods.
|
26 | *
|
27 | * Please note that:
|
28 | * * two categories are always available:
|
29 | * * `'contentEditing'` for keystrokes related to content creation,
|
30 | * * `'navigation'` for keystrokes related to navigation in the UI and the content.
|
31 | * * unless specified otherwise, new keystrokes are added into the `'contentEditing'` category and the `'common'`
|
32 | * keystroke group within that category while using the {@link #addKeystrokeInfos} method.
|
33 | */
|
34 | readonly keystrokeInfos: KeystrokeInfos;
|
35 | /**
|
36 | * The editor instance.
|
37 | */
|
38 | private readonly _editor;
|
39 | /**
|
40 | * @inheritDoc
|
41 | */
|
42 | constructor(editor: Editor);
|
43 | /**
|
44 | * Adds a top-level category in the {with a label and optional description.
#keystrokeInfos keystroke information database} |
45 | *
|
46 | * Categories organize keystrokes and help users to find the right keystroke. Each category can have multiple groups
|
47 | * of keystrokes that narrow down the context in which the keystrokes are available. Every keystroke category comes
|
48 | * with a `'common'` group by default.
|
49 | *
|
50 | * By default, two categories are available:
|
51 | * * `'contentEditing'` for keystrokes related to content creation,
|
52 | * * `'navigation'` for keystrokes related to navigation in the UI and the content.
|
53 | *
|
54 | * To create a new keystroke category with new groups, use the following code:
|
55 | *
|
56 | * ```js
|
57 | * class MyPlugin extends Plugin {
|
58 | * // ...
|
59 | * init() {
|
60 | * const editor = this.editor;
|
61 | * const t = editor.t;
|
62 | *
|
63 | * // ...
|
64 | *
|
65 | * editor.accessibility.addKeystrokeInfoCategory( {
|
66 | * id: 'myCategory',
|
67 | * label: t( 'My category' ),
|
68 | * description: t( 'My category description.' ),
|
69 | * groups: [
|
70 | * {
|
71 | * id: 'myGroup',
|
72 | * label: t( 'My keystroke group' ),
|
73 | * keystrokes: [
|
74 | * {
|
75 | * label: t( 'Keystroke label 1' ),
|
76 | * keystroke: 'Ctrl+Shift+N'
|
77 | * },
|
78 | * {
|
79 | * label: t( 'Keystroke label 2' ),
|
80 | * keystroke: 'Ctrl+Shift+M'
|
81 | * }
|
82 | * ]
|
83 | * }
|
84 | * ]
|
85 | * };
|
86 | * }
|
87 | * }
|
88 | * ```
|
89 | *
|
90 | * See { #keystrokeInfos}, { #addKeystrokeInfoGroup}, and { #addKeystrokeInfos}.
|
91 | */
|
92 | addKeystrokeInfoCategory({ id, label, description, groups }: AddKeystrokeInfoCategoryData): void;
|
93 | /**
|
94 | * Adds a group of keystrokes in a specific category to the {@link #keystrokeInfos keystroke information database}.
|
95 | *
|
96 | * Groups narrow down the context in which the keystrokes are available. When `categoryId` is not specified,
|
97 | * the group goes to the `'contentEditing'` category (default).
|
98 | *
|
99 | * To create a new group within an existing category, use the following code:
|
100 | *
|
101 | * ```js
|
102 | * class MyPlugin extends Plugin {
|
103 | * // ...
|
104 | * init() {
|
105 | * const editor = this.editor;
|
106 | * const t = editor.t;
|
107 | *
|
108 | * // ...
|
109 | *
|
110 | * editor.accessibility.addKeystrokeInfoGroup( {
|
111 | * id: 'myGroup',
|
112 | * categoryId: 'navigation',
|
113 | * label: t( 'My keystroke group' ),
|
114 | * keystrokes: [
|
115 | * {
|
116 | * label: t( 'Keystroke label 1' ),
|
117 | * keystroke: 'Ctrl+Shift+N'
|
118 | * },
|
119 | * {
|
120 | * label: t( 'Keystroke label 2' ),
|
121 | * keystroke: 'Ctrl+Shift+M'
|
122 | * }
|
123 | * ]
|
124 | * } );
|
125 | * }
|
126 | * }
|
127 | * ```
|
128 | *
|
129 | * See {@link #keystrokeInfos}, {@link #addKeystrokeInfoCategory}, and {@link #addKeystrokeInfos}.
|
130 | */
|
131 | addKeystrokeInfoGroup({ categoryId, id, label, keystrokes }: AddKeystrokeInfoGroupData): void;
|
132 | /**
|
133 | * Adds information about keystrokes to the {@link #keystrokeInfos keystroke information database}.
|
134 | *
|
135 | * Keystrokes without specified `groupId` or `categoryId` go to the `'common'` group in the `'contentEditing'` category (default).
|
136 | *
|
137 | * To add a keystroke brought by your plugin (using default group and category), use the following code:
|
138 | *
|
139 | * ```js
|
140 | * class MyPlugin extends Plugin {
|
141 | * // ...
|
142 | * init() {
|
143 | * const editor = this.editor;
|
144 | * const t = editor.t;
|
145 | *
|
146 | * // ...
|
147 | *
|
148 | * editor.accessibility.addKeystrokeInfos( {
|
149 | * keystrokes: [
|
150 | * {
|
151 | * label: t( 'Keystroke label' ),
|
152 | * keystroke: 'CTRL+B'
|
153 | * }
|
154 | * ]
|
155 | * } );
|
156 | * }
|
157 | * }
|
158 | * ```
|
159 | * To add a keystroke in a specific existing `'widget'` group in the default `'contentEditing'` category:
|
160 | *
|
161 | * ```js
|
162 | * class MyPlugin extends Plugin {
|
163 | * // ...
|
164 | * init() {
|
165 | * const editor = this.editor;
|
166 | * const t = editor.t;
|
167 | *
|
168 | * // ...
|
169 | *
|
170 | * editor.accessibility.addKeystrokeInfos( {
|
171 | * // Add a keystroke to the existing "widget" group.
|
172 | * groupId: 'widget',
|
173 | * keystrokes: [
|
174 | * {
|
175 | * label: t( 'A an action on a selected widget' ),
|
176 | * keystroke: 'Ctrl+D',
|
177 | * }
|
178 | * ]
|
179 | * } );
|
180 | * }
|
181 | * }
|
182 | * ```
|
183 | *
|
184 | * To add a keystroke to another existing category (using default group):
|
185 | *
|
186 | * ```js
|
187 | * class MyPlugin extends Plugin {
|
188 | * // ...
|
189 | * init() {
|
190 | * const editor = this.editor;
|
191 | * const t = editor.t;
|
192 | *
|
193 | * // ...
|
194 | *
|
195 | * editor.accessibility.addKeystrokeInfos( {
|
196 | * // Add keystrokes to the "navigation" category (one of defaults).
|
197 | * categoryId: 'navigation',
|
198 | * keystrokes: [
|
199 | * {
|
200 | * label: t( 'Keystroke label' ),
|
201 | * keystroke: 'CTRL+B'
|
202 | * }
|
203 | * ]
|
204 | * } );
|
205 | * }
|
206 | * }
|
207 | * ```
|
208 | *
|
209 | * See {@link #keystrokeInfos}, {@link #addKeystrokeInfoGroup}, and {@link #addKeystrokeInfoCategory}.
|
210 | */
|
211 | addKeystrokeInfos({ categoryId, groupId, keystrokes }: AddKeystrokeInfosData): void;
|
212 | }
|
213 | /**
|
214 | * A description of category of keystrokes accepted by the {@link module:core/accessibility~Accessibility#addKeystrokeInfoCategory} method.
|
215 | *
|
216 | * Top-level categories organize keystrokes and help users to find the right keystroke. Each category can have multiple groups of
|
217 | * keystrokes that narrow down the context in which the keystrokes are available.
|
218 | *
|
219 | * See {@link module:core/accessibility~Accessibility#addKeystrokeInfoGroup} and
|
220 | * {@link module:core/accessibility~Accessibility#addKeystrokeInfos}.
|
221 | */
|
222 | export interface AddKeystrokeInfoCategoryData {
|
223 | /**
|
224 | * The unique id of the category.
|
225 | */
|
226 | id: string;
|
227 | /**
|
228 | * The label of the category.
|
229 | */
|
230 | label: string;
|
231 | /**
|
232 | * The description of the category (optional).
|
233 | */
|
234 | description?: string;
|
235 | /**
|
236 | * Groups of keystrokes within the category.
|
237 | */
|
238 | groups?: Array<AddKeystrokeInfoGroupData>;
|
239 | }
|
240 | /**
|
241 | * A description of keystroke group accepted by the {@link module:core/accessibility~Accessibility#addKeystrokeInfoGroup} method.
|
242 | *
|
243 | * Groups narrow down the context in which the keystrokes are available. When `categoryId` is not specified, the group goes
|
244 | * to the `'contentEditing'` category (default).
|
245 | *
|
246 | * See {@link module:core/accessibility~Accessibility#addKeystrokeInfoCategory} and
|
247 | * {@link module:core/accessibility~Accessibility#addKeystrokeInfos}.
|
248 | */
|
249 | export interface AddKeystrokeInfoGroupData {
|
250 | /**
|
251 | * The category id the group belongs to.
|
252 | */
|
253 | categoryId?: string;
|
254 | /**
|
255 | * The unique id of the group.
|
256 | */
|
257 | id: string;
|
258 | /**
|
259 | * The label of the group (optional).
|
260 | */
|
261 | label?: string;
|
262 | /**
|
263 | * Keystroke definitions within the group.
|
264 | */
|
265 | keystrokes?: Array<KeystrokeInfoDefinition>;
|
266 | }
|
267 | /**
|
268 | * Description of keystrokes accepted by the {@link module:core/accessibility~Accessibility#addKeystrokeInfos} method.
|
269 | *
|
270 | * Keystrokes without specified `groupId` or `categoryId` go to the `'common'` group in the `'contentEditing'` category (default).
|
271 | *
|
272 | * See {@link module:core/accessibility~Accessibility#addKeystrokeInfoCategory} and
|
273 | * {@link module:core/accessibility~Accessibility#addKeystrokeInfoGroup}.
|
274 | */
|
275 | export interface AddKeystrokeInfosData {
|
276 | /**
|
277 | * The category id the keystrokes belong to.
|
278 | */
|
279 | categoryId?: string;
|
280 | /**
|
281 | * The group id the keystrokes belong to.
|
282 | */
|
283 | groupId?: string;
|
284 | /**
|
285 | * An array of keystroke definitions.
|
286 | */
|
287 | keystrokes: Array<KeystrokeInfoDefinition>;
|
288 | }
|
289 | export type KeystrokeInfos = Map<string, KeystrokeInfoCategory>;
|
290 | /**
|
291 | * A category of keystrokes in {@link module:core/accessibility~Accessibility#keystrokeInfos}.
|
292 | */
|
293 | export type KeystrokeInfoCategory = {
|
294 | /**
|
295 | * The unique id of the category.
|
296 | */
|
297 | id: string;
|
298 | /**
|
299 | * The label of the category.
|
300 | */
|
301 | label: string;
|
302 | /**
|
303 | * The description of the category (optional).
|
304 | */
|
305 | description?: string;
|
306 | /**
|
307 | * Groups of keystrokes within the category.
|
308 | */
|
309 | groups: Map<string, KeystrokeInfoGroup>;
|
310 | };
|
311 | /**
|
312 | * A group of keystrokes in {@link module:core/accessibility~Accessibility#keystrokeInfos}.
|
313 | */
|
314 | export type KeystrokeInfoGroup = {
|
315 | /**
|
316 | * The unique id of the group.
|
317 | */
|
318 | id: string;
|
319 | /**
|
320 | * The label of the group (optional).
|
321 | */
|
322 | label?: string;
|
323 | /**
|
324 | * Keystroke definitions within the group.
|
325 | */
|
326 | keystrokes: Array<KeystrokeInfoDefinition>;
|
327 | };
|
328 | /**
|
329 | * A keystroke info definition in {@link module:core/accessibility~Accessibility#keystrokeInfos}
|
330 | */
|
331 | export interface KeystrokeInfoDefinition {
|
332 | /**
|
333 | * The label of the keystroke. It should briefly describe the action that the keystroke performs. It may contain HTML.
|
334 | */
|
335 | label: string;
|
336 | /**
|
337 | * The keystroke string. In its basic form, it must be a combination of {@link module:utils/keyboard#keyCodes known key names}
|
338 | * joined by the `+` sign, the same as the keystroke format accepted by the
|
339 | * {@link module:utils/keystrokehandler~KeystrokeHandler#set `KeystrokeHandler#set()`} method used to register most of the
|
340 | * keystroke interactions in the editor.
|
341 | *
|
342 | * * The keystroke string can represent a single keystroke, for instance: `keystroke: 'Ctrl+B'`, `keystroke: 'Shift+Enter'`,
|
343 | * `keystroke: 'Alt+F10'`, etc.
|
344 | * * The keystroke can be activated by successive press of multiple keys. For instance `keystroke: [ [ 'arrowleft', 'arrowleft' ] ]`
|
345 | * will indicate that a specific action will be performed by pressing <kbd>←</kbd> twice in a row.
|
346 | * * Keystrokes can have alternatives. For instance `keystroke: [ [ 'Ctrl+Y' ], [ 'Ctrl+Shift+Z' ] ]` will indicate that
|
347 | * a specific action can be performed by pressing either <kbd>Ctrl</kbd> + <kbd>Y</kbd> or
|
348 | * <kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>Z</kbd>.
|
349 | *
|
350 | * Please note that the keystrokes are automatically translated to the environment-specific form. For example, `Ctrl+A`
|
351 | * will be rendered as `⌘A` in the {@link module:utils/env~EnvType#isMac Mac environment}. Always use the IBM PC keyboard
|
352 | * syntax, for instance `Ctrl` instead of `⌘`, `Alt` instead of `⌥`, etc.
|
353 | */
|
354 | keystroke: string | Array<string> | Array<Array<string>>;
|
355 | /**
|
356 | * This (optional) flag suggests that the keystroke(s) may require a function (<kbd>Fn</kbd>) key to be pressed
|
357 | * in order to work in the {@link module:utils/env~EnvType#isMac Mac environment}. If set `true`, an additional
|
358 | * information will be displayed next to the keystroke.
|
359 | */
|
360 | mayRequireFn?: boolean;
|
361 | }
|