diff --git a/src/core/features/editor/components/rich-text-editor/core-editor-rich-text-editor.html b/src/core/features/editor/components/rich-text-editor/core-editor-rich-text-editor.html
index ef4b82745..15e0859a2 100644
--- a/src/core/features/editor/components/rich-text-editor/core-editor-rich-text-editor.html
+++ b/src/core/features/editor/components/rich-text-editor/core-editor-rich-text-editor.html
@@ -16,98 +16,120 @@
-
-
+
+ (click)="buttonAction($event, 'strikethrough', 'strike')" (keyup)="buttonAction($event, 'strikethrough', 'strike')"
+ (mousedown)="downAction($event)" (keydown)="downAction($event)">
-
+
-
+
3
-
+
4
-
+
5
-
+
-
+
-
-
-
+
-
+
+ [attr.aria-label]="'core.next' | translate"
+ (click)="toolbarNext($event)" (keyup)="toolbarNext($event)"
+ (mousedown)="downAction($event)" (keydown)="downAction($event)" >
diff --git a/src/core/features/editor/components/rich-text-editor/rich-text-editor.ts b/src/core/features/editor/components/rich-text-editor/rich-text-editor.ts
index 3605d5c53..b1990106d 100644
--- a/src/core/features/editor/components/rich-text-editor/rich-text-editor.ts
+++ b/src/core/features/editor/components/rich-text-editor/rich-text-editor.ts
@@ -511,6 +511,10 @@ export class CoreEditorRichTextEditorComponent implements OnInit, AfterContentIn
* @param event The event.
*/
async toggleEditor(event: Event): Promise {
+ if (event.type == 'keyup' && !this.isValidKeyboardKey(event)) {
+ return;
+ }
+
this.stopBubble(event);
this.setContent(this.control?.value || '');
@@ -654,6 +658,10 @@ export class CoreEditorRichTextEditorComponent implements OnInit, AfterContentIn
* toolbar styles button when set.
*/
buttonAction(event: Event, command: string, parameters?: string): void {
+ if (event.type == 'keyup' && !this.isValidKeyboardKey(event)) {
+ return;
+ }
+
this.stopBubble(event);
if (!command) {
@@ -725,6 +733,10 @@ export class CoreEditorRichTextEditorComponent implements OnInit, AfterContentIn
* Hide the toolbar in phone mode.
*/
hideToolbar(event: Event): void {
+ if (event.type == 'keyup' && !this.isValidKeyboardKey(event)) {
+ return;
+ }
+
this.element.classList.remove('has-focus');
this.stopBubble(event);
@@ -734,6 +746,16 @@ export class CoreEditorRichTextEditorComponent implements OnInit, AfterContentIn
}
}
+ /**
+ * Checks if Space or Enter have been pressed.
+ *
+ * @param event Keyboard Event.
+ * @returns Wether space or enter have been pressed.
+ */
+ protected isValidKeyboardKey(event: KeyboardEvent): boolean {
+ return event.key == ' ' || event.key == 'Enter';
+ }
+
/**
* Show the toolbar.
*/
@@ -754,7 +776,7 @@ export class CoreEditorRichTextEditorComponent implements OnInit, AfterContentIn
* @param event Event.
*/
stopBubble(event: Event): void {
- if (event.type != 'mouseup') {
+ if (event.type != 'mouseup' && event.type != 'keyup') {
event.preventDefault();
}
event.stopPropagation();
@@ -765,7 +787,11 @@ export class CoreEditorRichTextEditorComponent implements OnInit, AfterContentIn
*
* @param event Event.
*/
- mouseDownAction(event: Event): void {
+ downAction(event: Event): void {
+ if (event.type == 'keydown' && !this.isValidKeyboardKey(event)) {
+ return;
+ }
+
const selection = window.getSelection()?.toString();
// When RTE is focused with a whole paragraph in desktop the stopBubble will not fire click.
@@ -778,6 +804,10 @@ export class CoreEditorRichTextEditorComponent implements OnInit, AfterContentIn
* Method that shows the next toolbar buttons.
*/
async toolbarNext(event: Event): Promise {
+ if (event.type == 'keyup' && !this.isValidKeyboardKey(event)) {
+ return;
+ }
+
this.stopBubble(event);
if (!this.toolbarNextHidden) {
@@ -792,6 +822,10 @@ export class CoreEditorRichTextEditorComponent implements OnInit, AfterContentIn
* Method that shows the previous toolbar buttons.
*/
async toolbarPrev(event: Event): Promise {
+ if (event.type == 'keyup' && !this.isValidKeyboardKey(event)) {
+ return;
+ }
+
this.stopBubble(event);
if (!this.toolbarPrevHidden) {