Keyboard handling for grid components in font color and list style

packages/ckeditor5-font/src/ui/colortableview.js

@@ -141,11 +141,11 @@ export default class ColorTableView extends View {
 			focusTracker: this.focusTracker,
 			keystrokeHandler: this.keystrokes,
 			actions: {
-				// Navigate list items backwards using the Arrow Up key.
-				focusPrevious: 'arrowup',
+				// Navigate list items backwards using the <kbd>Shift</kbd> + <kbd>Tab</kbd> keystroke.
+				focusPrevious: 'shift + tab',
 
-				// Navigate list items forwards using the Arrow Down key.
-				focusNext: 'arrowdown'
+				// Navigate list items forwards using the <kbd>Tab</kbd> key.
+				focusNext: 'tab'
 			}
 		} );
 
@@ -256,6 +256,7 @@ export default class ColorTableView extends View {
 		this.staticColorsGrid = this._createStaticColorsGrid();
 
 		this.items.add( this.staticColorsGrid );
+		this.focusTracker.add( this.staticColorsGrid.element );
 
 		if ( this.documentColorsCount ) {
 			// Create a label for document colors.
@@ -274,6 +275,8 @@ export default class ColorTableView extends View {
 			this.items.add( label );
 			this.documentColorsGrid = this._createDocumentColorsGrid();
 			this.items.add( this.documentColorsGrid );
+
+			this.focusTracker.add( this.documentColorsGrid.element );
 		}
 	}
 

packages/ckeditor5-font/tests/ui/colortableview.js

@@ -79,8 +79,9 @@ describe( 'ColorTableView', () => {
 			documentColorsLabel: 'Document colors',
 			documentColorsCount: 4
 		} );
-		colorTableView.appendGrids();
+		// Grids rendering is deferred (#6192) therefeore render happens before appending grids.
 		colorTableView.render();
+		colorTableView.appendGrids();
 	} );
 
 	afterEach( () => {
@@ -382,8 +383,9 @@ describe( 'ColorTableView', () => {
 					removeButtonLabel: 'Remove color',
 					documentColorsCount: 0
 				} );
-				colorTableView.appendGrids();
+				// Grids rendering is deferred (#6192) therefeore render happens before appending grids.
 				colorTableView.render();
+				colorTableView.appendGrids();
 			} );
 
 			afterEach( () => {

packages/ckeditor5-list/src/listproperties/ui/listpropertiesview.js

@@ -13,7 +13,8 @@ import {
 	FocusCycler,
 	SwitchButtonView,
 	LabeledFieldView,
-	createLabeledInputNumber
+	createLabeledInputNumber,
+	addKeyboardHandlingForGrid
 } from 'ckeditor5/src/ui';
 import {
 	FocusTracker,
@@ -178,19 +179,23 @@ export default class ListPropertiesView extends View {
 		super.render();
 
 		if ( this.stylesView ) {
-			for ( const styleButtonView of this.stylesView.children ) {
-				// Register the view as focusable.
-				this.focusables.add( styleButtonView );
-
-				// Register the view in the focus tracker.
-				this.focusTracker.add( styleButtonView.element );
-			}
+			this.focusables.add( this.stylesView );
+			this.focusTracker.add( this.stylesView.element );
 
 			// Register the collapsible toggle button to the focus system.
 			if ( this.startIndexFieldView || this.reversedSwitchButtonView ) {
 				this.focusables.add( this.children.last.buttonView );
 				this.focusTracker.add( this.children.last.buttonView.element );
 			}
+
+			for ( const item of this.stylesView.children ) {
+				this.stylesView.focusTracker.add( item.element );
+			}
+
+			this.stylesView.keystrokes = new KeystrokeHandler();
+			this.stylesView.keystrokes.listenTo( this.stylesView.element );
+
+			addKeyboardHandlingForGrid( this.stylesView.keystrokes, this.stylesView.focusTracker, this.stylesView.children, 4 );
 		}
 
 		if ( this.startIndexFieldView ) {
@@ -276,6 +281,12 @@ export default class ListPropertiesView extends View {
 
 		stylesView.children.delegate( 'execute' ).to( this );
 
+		stylesView.focus = function() {
+			this.children.first.focus();
+		};
+
+		stylesView.focusTracker = new FocusTracker();
+
 		return stylesView;
 	}
 

packages/ckeditor5-list/tests/listproperties/ui/listpropertiesview.js

@@ -308,14 +308,20 @@ describe( 'ListPropertiesView', () => {
 			describe( 'when styles and all numbered list properties are enabled', () => {
 				it( 'should register child views in #focusables', () => {
 					expect( view.focusables.map( f => f ) ).to.have.members( [
-						view.stylesView.children.first,
-						view.stylesView.children.last,
+						view.children.first,
 						view.children.last.buttonView,
 						view.startIndexFieldView,
 						view.reversedSwitchButtonView
 					] );
 				} );
 
+				it( 'should register child views of stylesView in its focusTracker', () => {
+					expect( [ ...view.stylesView.focusTracker._elements ] ).to.have.members( [
+						view.stylesView.children.first.element,
+						view.stylesView.children.last.element
+					] );
+				} );
+
 				it( 'should register child views\' #element in #focusTracker', () => {
 					const view = new ListPropertiesView( locale, {
 						enabledProperties: {
@@ -330,15 +336,18 @@ describe( 'ListPropertiesView', () => {
 						styleGridAriaLabel: 'Foo'
 					} );
 
-					const spy = sinon.spy( view.focusTracker, 'add' );
+					const spyView = sinon.spy( view.focusTracker, 'add' );
+					const spyStylesView = sinon.spy( view.stylesView.focusTracker, 'add' );
 
 					view.render();
 
-					sinon.assert.calledWithExactly( spy.getCall( 0 ), view.stylesView.children.first.element );
-					sinon.assert.calledWithExactly( spy.getCall( 1 ), view.stylesView.children.last.element );
-					sinon.assert.calledWithExactly( spy.getCall( 2 ), view.children.last.buttonView.element );
-					sinon.assert.calledWithExactly( spy.getCall( 3 ), view.startIndexFieldView.element );
-					sinon.assert.calledWithExactly( spy.getCall( 4 ), view.reversedSwitchButtonView.element );
+					sinon.assert.calledWithExactly( spyStylesView.getCall( 0 ), view.stylesView.children.first.element );
+					sinon.assert.calledWithExactly( spyStylesView.getCall( 1 ), view.stylesView.children.last.element );
+
+					sinon.assert.calledWithExactly( spyView.getCall( 0 ), view.children.first.element );
+					sinon.assert.calledWithExactly( spyView.getCall( 1 ), view.children.last.buttonView.element );
+					sinon.assert.calledWithExactly( spyView.getCall( 2 ), view.startIndexFieldView.element );
+					sinon.assert.calledWithExactly( spyView.getCall( 3 ), view.reversedSwitchButtonView.element );
 
 					view.destroy();
 				} );
@@ -423,11 +432,12 @@ describe( 'ListPropertiesView', () => {
 						stopPropagation: sinon.spy()
 					};
 
-					// Mock the first style button is focused.
+					// Mock the styles view is focused.
 					view.focusTracker.isFocused = true;
-					view.focusTracker.focusedElement = view.stylesView.children.first.element;
+					view.focusTracker.focusedElement = view.children.first.element;
 
-					const spy = sinon.spy( view.stylesView.children.last, 'focus' );
+					// Spy the next view which in this case is the ListProperties button
+					const spy = sinon.spy( view.children.last.buttonView, 'focus' );
 
 					view.keystrokes.press( keyEvtData );
 					sinon.assert.calledOnce( keyEvtData.preventDefault );
@@ -443,18 +453,38 @@ describe( 'ListPropertiesView', () => {
 						stopPropagation: sinon.spy()
 					};
 
-					// Mock the first style button is focused.
+					// Mock the styles view is focused.
 					view.focusTracker.isFocused = true;
-					view.focusTracker.focusedElement = view.stylesView.children.first.element;
+					view.focusTracker.focusedElement = view.children.first.element;
 					view.children.last.isCollapsed = false;
 
+					// Spy the previous view which in this case is the Reversed order switch button
 					const spy = sinon.spy( view.reversedSwitchButtonView, 'focus' );
 
 					view.keystrokes.press( keyEvtData );
 					sinon.assert.calledOnce( keyEvtData.preventDefault );
 					sinon.assert.calledOnce( keyEvtData.stopPropagation );
 					sinon.assert.calledOnce( spy );
 				} );
+
+				it( 'so "arrow right" focuses the next focusable item', () => {
+					const keyEvtData = {
+						keyCode: keyCodes.arrowright,
+						preventDefault: sinon.spy(),
+						stopPropagation: sinon.spy()
+					};
+
+					// Mock the first style button is focused.
+					view.stylesView.focusTracker.isFocused = true;
+					view.stylesView.focusTracker.focusedElement = view.stylesView.children.first.element;
+
+					const spy = sinon.spy( view.stylesView.children.last, 'focus' );
+
+					view.stylesView.keystrokes.press( keyEvtData );
+					sinon.assert.calledOnce( keyEvtData.preventDefault );
+					sinon.assert.calledOnce( keyEvtData.stopPropagation );
+					sinon.assert.calledOnce( spy );
+				} );
 			} );
 
 			it( 'intercepts the arrow* events and overrides the default (parent) toolbar behavior', () => {

packages/ckeditor5-special-characters/src/specialcharacters.js

@@ -14,6 +14,7 @@ import { CKEditorError } from 'ckeditor5/src/utils';
 import SpecialCharactersNavigationView from './ui/specialcharactersnavigationview';
 import CharacterGridView from './ui/charactergridview';
 import CharacterInfoView from './ui/characterinfoview';
+import SpecialCharactersView from './ui/specialcharactersview';
 
 import specialCharactersIcon from '../theme/icons/specialcharacters.svg';
 import '../theme/specialcharacters.css';
@@ -97,9 +98,14 @@ export default class SpecialCharacters extends Plugin {
 				if ( !dropdownPanelContent ) {
 					dropdownPanelContent = this._createDropdownPanelContent( locale, dropdownView );
 
-					dropdownView.panelView.children.add( dropdownPanelContent.navigationView );
-					dropdownView.panelView.children.add( dropdownPanelContent.gridView );
-					dropdownView.panelView.children.add( dropdownPanelContent.infoView );
+					const specialCharactersView = new SpecialCharactersView(
+						locale,
+						dropdownPanelContent.navigationView,
+						dropdownPanelContent.gridView,
+						dropdownPanelContent.infoView
+					);
+
+					dropdownView.panelView.children.add( specialCharactersView );
 				}
 
 				dropdownPanelContent.infoView.set( {

packages/ckeditor5-special-characters/src/ui/charactergridview.js

@@ -7,7 +7,9 @@
  * @module special-characters/ui/charactergridview
  */
 
-import { View, ButtonView } from 'ckeditor5/src/ui';
+import { View, ButtonView, addKeyboardHandlingForGrid } from 'ckeditor5/src/ui';
+
+import { KeystrokeHandler, FocusTracker } from 'ckeditor5/src/utils';
 
 import '../../theme/charactergrid.css';
 
@@ -56,6 +58,18 @@ export default class CharacterGridView extends View {
 			}
 		} );
 
+		/**
+		 * Tracks information about the DOM focus in the grid.
+		 *
+		 * @readonly
+		 * @member {module:utils/focustracker~FocusTracker}
+		 */
+		this.focusTracker = new FocusTracker();
+
+		this.keystrokes = new KeystrokeHandler();
+
+		addKeyboardHandlingForGrid( this.keystrokes, this.focusTracker, this.tiles, 10 );
+
 		/**
 		 * Fired when any of {@link #tiles grid tiles} is clicked.
 		 *
@@ -113,4 +127,40 @@ export default class CharacterGridView extends View {
 
 		return tile;
 	}
+
+	render() {
+		super.render();
+
+		for ( const item of this.tiles ) {
+			this.focusTracker.add( item.element );
+		}
+
+		this.tiles.on( 'change', ( eventInfo, { added, removed } ) => {
+			if ( added.length > 0 ) {
+				for ( const item of added ) {
+					this.focusTracker.add( item.element );
+				}
+			}
+			if ( removed.length > 0 ) {
+				for ( const item of removed ) {
+					this.focusTracker.remove( item.element );
+				}
+			}
+		} );
+
+		this.keystrokes.listenTo( this.element );
+	}
+
+	/**
+	 * @inheritDoc
+	 */
+	destroy() {
+		super.destroy();
+
+		this.keystrokes.destroy();
+	}
+
+	focus() {
+		this.tiles.get( 0 ).focus();
+	}
 }