UNPKG

12.9 kBTypeScriptView Raw
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 */
5import type Editor from './editor/editor.js';
6export 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 */
16export 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 {@link #keystrokeInfos keystroke information database} with a label and optional description.
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 {@link #keystrokeInfos}, {@link #addKeystrokeInfoGroup}, and {@link #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 */
222export 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 */
249export 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 */
275export 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}
289export type KeystrokeInfos = Map<string, KeystrokeInfoCategory>;
290/**
291 * A category of keystrokes in {@link module:core/accessibility~Accessibility#keystrokeInfos}.
292 */
293export 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 */
314export 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 */
331export 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}