ReadonlykeystrokeStores information about keystrokes brought by editor features for the users to interact with the editor, mainly keystroke combinations and their accessible labels.
This information is particularly useful for screen reader and other assistive technology users. It gets displayed by the module:ui/editorui/accessibilityhelp/accessibilityhelp~AccessibilityHelp Accessibility help dialog.
Keystrokes are organized in categories and groups. They can be added using (#addKeystrokeInfoCategory, #addKeystrokeInfoGroup, and #addKeystrokeInfos) methods.
Please note that:
'contentEditing' for keystrokes related to content creation,'navigation' for keystrokes related to navigation in the UI and the content.'contentEditing' category and the 'common'
keystroke group within that category while using the #addKeystrokeInfos method.Adds a top-level category in the #keystrokeInfos keystroke information database with a label and optional description.
Categories organize keystrokes and help users to find the right keystroke. Each category can have multiple groups
of keystrokes that narrow down the context in which the keystrokes are available. Every keystroke category comes
with a 'common' group by default.
By default, two categories are available:
'contentEditing' for keystrokes related to content creation,'navigation' for keystrokes related to navigation in the UI and the content.To create a new keystroke category with new groups, use the following code:
class MyPlugin extends Plugin {
// ...
init() {
const editor = this.editor;
const t = editor.t;
// ...
editor.accessibility.addKeystrokeInfoCategory( {
id: 'myCategory',
label: t( 'My category' ),
description: t( 'My category description.' ),
groups: [
{
id: 'myGroup',
label: t( 'My keystroke group' ),
keystrokes: [
{
label: t( 'Keystroke label 1' ),
keystroke: 'Ctrl+Shift+N'
},
{
label: t( 'Keystroke label 2' ),
keystroke: 'Ctrl+Shift+M'
}
]
}
]
};
}
}
See #keystrokeInfos, #addKeystrokeInfoGroup, and #addKeystrokeInfos.
Adds a group of keystrokes in a specific category to the #keystrokeInfos keystroke information database.
Groups narrow down the context in which the keystrokes are available. When categoryId is not specified,
the group goes to the 'contentEditing' category (default).
To create a new group within an existing category, use the following code:
class MyPlugin extends Plugin {
// ...
init() {
const editor = this.editor;
const t = editor.t;
// ...
editor.accessibility.addKeystrokeInfoGroup( {
id: 'myGroup',
categoryId: 'navigation',
label: t( 'My keystroke group' ),
keystrokes: [
{
label: t( 'Keystroke label 1' ),
keystroke: 'Ctrl+Shift+N'
},
{
label: t( 'Keystroke label 2' ),
keystroke: 'Ctrl+Shift+M'
}
]
} );
}
}
See #keystrokeInfos, #addKeystrokeInfoCategory, and #addKeystrokeInfos.
Adds information about keystrokes to the #keystrokeInfos keystroke information database.
Keystrokes without specified groupId or categoryId go to the 'common' group in the 'contentEditing' category (default).
To add a keystroke brought by your plugin (using default group and category), use the following code:
class MyPlugin extends Plugin {
// ...
init() {
const editor = this.editor;
const t = editor.t;
// ...
editor.accessibility.addKeystrokeInfos( {
keystrokes: [
{
label: t( 'Keystroke label' ),
keystroke: 'CTRL+B'
}
]
} );
}
}
To add a keystroke in a specific existing 'widget' group in the default 'contentEditing' category:
class MyPlugin extends Plugin {
// ...
init() {
const editor = this.editor;
const t = editor.t;
// ...
editor.accessibility.addKeystrokeInfos( {
// Add a keystroke to the existing "widget" group.
groupId: 'widget',
keystrokes: [
{
label: t( 'A an action on a selected widget' ),
keystroke: 'Ctrl+D',
}
]
} );
}
}
To add a keystroke to another existing category (using default group):
class MyPlugin extends Plugin {
// ...
init() {
const editor = this.editor;
const t = editor.t;
// ...
editor.accessibility.addKeystrokeInfos( {
// Add keystrokes to the "navigation" category (one of defaults).
categoryId: 'navigation',
keystrokes: [
{
label: t( 'Keystroke label' ),
keystroke: 'CTRL+B'
}
]
} );
}
}
See #keystrokeInfos, #addKeystrokeInfoGroup, and #addKeystrokeInfoCategory.
A common namespace for various accessibility features of the editor.
Information about editor keystrokes