Pressing the Tab key in restricted editing mode enters a table that's non-editable

[mabryl]

📝 Provide detailed reproduction steps (if any)

1. Create a document that has some editable areas and a non-editable table
2. Place the caret in the first editable area
3. Keep pressing the Tab key

✔️ Expected result

The non-editable table should not be focusable when pressing Tab. At the very least, it should be possible to exit the table when pressing Tab again or when pressing Shift + Tab

❌ Actual result

Eventually, the caret will enter the table and get stuck there:

restricted-mode-table.mov

📃 Other details

• Browser: cross-browser
• OS: cross-OS
• First affected CKEditor version: N/A
• Installed CKEditor plugins: N/A

---

If you'd like to see this fixed sooner, add a 👍 reaction to this post.

[Witoso]

Rel: #11834.

[Witoso]

To make it aligned how tab works in the restricted editing (moving between fields), user should not be able to tab into the table.

If the table has a restricted field, it becomes a focus trap, and you cannot move out.

[stevenrai]

We have tested the release of V41.3.0 and noticed that there continues to be an issue if there is an editable field inside of a table for a restricted editing document.

The user is not able to exit the table and move to the next editable field outside of the table using the tab keys (stuck in an unlimited loop inside of the table).

Screen.Recording.2024-04-10.at.2.37.36.PM.mov

[niegowski]

We fixed native focus cycling and missed the custom tab/shift+tab handling.
The solution would be to remove those 2 lines:

ckeditor5/packages/ckeditor5-restricted-editing/src/restrictededitingmodeediting.ts

Lines 113 to 114 in 08270aa

	editor.keystrokes.set( 'Tab', getCommandExecuter( editor, 'goToNextRestrictedEditingException' ) );
	editor.keystrokes.set( 'Shift+Tab', getCommandExecuter( editor, 'goToPreviousRestrictedEditingException' ) );

And replace with this:

this.listenTo<ViewDocumentTabEvent>( editingView.document, 'tab', ( evt, data ) => {
	const commandName = !data.shiftKey ? 'goToNextRestrictedEditingException' : 'goToPreviousRestrictedEditingException';
	const command: Command = editor.commands.get( commandName )!;

	if ( command.isEnabled ) {
		editor.execute( commandName );

		// Stop the event in the DOM: no listener in the web page will be triggered by this event.
		data.preventDefault();
		data.stopPropagation();
	}

	// Stop the event bubbling in the editor: no more callbacks will be executed for this keystroke.
	evt.stop();
}, { context: '$capture' } );

This uses the event bubbling and stops bubbling at the $capture stage so other features should not react to that event.