diff --git a/packages/ckeditor5-table/src/tablecellproperties/ui/tablecellpropertiesview.js b/packages/ckeditor5-table/src/tablecellproperties/ui/tablecellpropertiesview.js
index 303a983e746..e3922d60f81 100644
--- a/packages/ckeditor5-table/src/tablecellproperties/ui/tablecellpropertiesview.js
+++ b/packages/ckeditor5-table/src/tablecellproperties/ui/tablecellpropertiesview.js
@@ -409,8 +409,10 @@ export default class TableCellPropertiesView extends View {
 		[
 			this.borderStyleDropdown,
 			this.borderColorInput,
+			this.borderColorInput.fieldView.dropdownView.buttonView,
 			this.borderWidthInput,
 			this.backgroundInput,
+			this.backgroundInput.fieldView.dropdownView.buttonView,
 			this.widthInput,
 			this.heightInput,
 			this.paddingInput,
diff --git a/packages/ckeditor5-table/src/tableproperties/ui/tablepropertiesview.js b/packages/ckeditor5-table/src/tableproperties/ui/tablepropertiesview.js
index 3b22c120297..95b64d179cd 100644
--- a/packages/ckeditor5-table/src/tableproperties/ui/tablepropertiesview.js
+++ b/packages/ckeditor5-table/src/tableproperties/ui/tablepropertiesview.js
@@ -360,8 +360,10 @@ export default class TablePropertiesView extends View {
 		[
 			this.borderStyleDropdown,
 			this.borderColorInput,
+			this.borderColorInput.fieldView.dropdownView.buttonView,
 			this.borderWidthInput,
 			this.backgroundInput,
+			this.backgroundInput.fieldView.dropdownView.buttonView,
 			this.widthInput,
 			this.heightInput,
 			this.alignmentToolbar,
diff --git a/packages/ckeditor5-table/src/ui/colorinputview.js b/packages/ckeditor5-table/src/ui/colorinputview.js
index 7484d944c1f..60897a39cb3 100644
--- a/packages/ckeditor5-table/src/ui/colorinputview.js
+++ b/packages/ckeditor5-table/src/ui/colorinputview.js
@@ -7,8 +7,9 @@
  * @module table/ui/colorinputview
  */
 
-import { View, InputTextView, ButtonView, createDropdown, ColorGridView } from 'ckeditor5/src/ui';
+import { View, InputTextView, ButtonView, createDropdown, ColorGridView, FocusCycler, ViewCollection } from 'ckeditor5/src/ui';
 import { icons } from 'ckeditor5/src/core';
+import { FocusTracker, KeystrokeHandler } from 'ckeditor5/src/utils';
 
 import '../../theme/colorinput.css';
 
@@ -34,8 +35,6 @@ export default class ColorInputView extends View {
 	constructor( locale, options ) {
 		super( locale );
 
-		const bind = this.bindTemplate;
-
 		/**
 		 * The value of the input.
 		 *
@@ -45,14 +44,6 @@ export default class ColorInputView extends View {
 		 */
 		this.set( 'value', '' );
 
-		/**
-		 * The `id` attribute of the input (i.e. to pair with the `<label>` element).
-		 *
-		 * @observable
-		 * @member {String} #id
-		 */
-		this.set( 'id' );
-
 		/**
 		 * Controls whether the input view is in read-only mode.
 		 *
@@ -62,16 +53,6 @@ export default class ColorInputView extends View {
 		 */
 		this.set( 'isReadOnly', false );
 
-		/**
-		 * Set to `true` when the field has some error. Usually controlled via
-		 * {@link module:ui/labeledinput/labeledinputview~LabeledInputView#errorText}.
-		 *
-		 * @observable
-		 * @member {Boolean} #hasError
-		 * @default false
-		 */
-		this.set( 'hasError', false );
-
 		/**
 		 * An observable flag set to `true` when the input is focused by the user.
 		 * `false` otherwise.
@@ -94,40 +75,54 @@ export default class ColorInputView extends View {
 		this.set( 'isEmpty', true );
 
 		/**
-		 * The `id` of the element describing this field. When the field has
-		 * some error, it helps screen readers read the error text.
+		 * A cached reference to the options passed to the constructor.
+		 *
+		 * @member {Object}
+		 */
+		this.options = options;
+
+		/**
+		 * Tracks information about the DOM focus in the view.
 		 *
-		 * @observable
-		 * @member {String} #ariaDescribedById
+		 * @readonly
+		 * @member {module:utils/focustracker~FocusTracker}
 		 */
-		this.set( 'ariaDescribedById' );
+		this.focusTracker = new FocusTracker();
 
 		/**
-		 * A cached reference to the options passed to the constructor.
+		 * A collection of views that can be focused in the view.
 		 *
-		 * @member {Object}
+		 * @readonly
+		 * @protected
+		 * @member {module:ui/viewcollection~ViewCollection}
 		 */
-		this.options = options;
+		this._focusables = new ViewCollection();
 
 		/**
 		 * An instance of the dropdown allowing to select a color from a grid.
 		 *
-		 * @protected
 		 * @member {module:ui/dropdown/dropdown~DropdownView}
 		 */
-		this._dropdownView = this._createDropdownView();
+		this.dropdownView = this._createDropdownView();
 
 		/**
 		 * An instance of the input allowing the user to type a color value.
 		 *
-		 * @protected
 		 * @member {module:ui/inputtext/inputtextview~InputTextView}
 		 */
-		this._inputView = this._createInputTextView();
+		this.inputView = this._createInputTextView();
+
+		/**
+		 * An instance of the {@link module:utils/keystrokehandler~KeystrokeHandler}.
+		 *
+		 * @readonly
+		 * @member {module:utils/keystrokehandler~KeystrokeHandler}
+		 */
+		this.keystrokes = new KeystrokeHandler();
 
 		/**
 		 * The flag that indicates whether the user is still typing.
-		 * If set to true, it means that the text input field ({@link #_inputView}) still has the focus.
+		 * If set to true, it means that the text input field ({@link #inputView}) still has the focus.
 		 * So, we should interrupt the user by replacing the input's value.
 		 *
 		 * @protected
@@ -135,36 +130,72 @@ export default class ColorInputView extends View {
 		 */
 		this._stillTyping = false;
 
+		/**
+		 * Helps cycling over focusable items in the view.
+		 *
+		 * @readonly
+		 * @protected
+		 * @member {module:ui/focuscycler~FocusCycler}
+		 */
+		this._focusCycler = new FocusCycler( {
+			focusables: this._focusables,
+			focusTracker: this.focusTracker,
+			keystrokeHandler: this.keystrokes,
+			actions: {
+				// Navigate items backwards using the <kbd>Shift</kbd> + <kbd>Tab</kbd> keystroke.
+				focusPrevious: 'shift + tab',
+
+				// Navigate items forwards using the <kbd>Tab</kbd> key.
+				focusNext: 'tab'
+			}
+		} );
+
 		this.setTemplate( {
 			tag: 'div',
 			attributes: {
 				class: [
 					'ck',
-					'ck-input-color',
-					bind.if( 'hasError', 'ck-error' )
-				],
-				id: bind.to( 'id' ),
-				'aria-invalid': bind.if( 'hasError', true ),
-				'aria-describedby': bind.to( 'ariaDescribedById' )
+					'ck-input-color'
+				]
 			},
 			children: [
-				this._dropdownView,
-				this._inputView
+				this.dropdownView,
+				this.inputView
 			]
 		} );
 
 		this.on( 'change:value', ( evt, name, inputValue ) => this._setInputValue( inputValue ) );
 	}
 
+	/**
+	 * @inheritDoc
+	 */
+	render() {
+		super.render();
+
+		// Start listening for the keystrokes coming from the dropdown panel view.
+		this.keystrokes.listenTo( this.dropdownView.panelView.element );
+	}
+
 	/**
 	 * Focuses the input.
 	 */
 	focus() {
-		this._inputView.focus();
+		this.inputView.focus();
 	}
 
 	/**
-	 * Creates and configures the {@link #_dropdownView}.
+	 * @inheritDoc
+	 */
+	destroy() {
+		super.destroy();
+
+		this.focusTracker.destroy();
+		this.keystrokes.destroy();
+	}
+
+	/**
+	 * Creates and configures the {@link #dropdownView}.
 	 *
 	 * @private
 	 */
@@ -215,6 +246,12 @@ export default class ColorInputView extends View {
 		dropdown.panelView.children.add( colorGrid );
 		dropdown.bind( 'isEnabled' ).to( this, 'isReadOnly', value => !value );
 
+		this._focusables.add( removeColorButton );
+		this._focusables.add( colorGrid );
+
+		this.focusTracker.add( removeColorButton.element );
+		this.focusTracker.add( colorGrid.element );
+
 		return dropdown;
 	}
 
@@ -222,7 +259,7 @@ export default class ColorInputView extends View {
 	 * Creates and configures an instance of {@link module:ui/inputtext/inputtextview~InputTextView}.
 	 *
 	 * @private
-	 * @returns {module:ui/inputtext/inputtextview~InputTextView} A configured instance to be set as {@link #_inputView}.
+	 * @returns {module:ui/inputtext/inputtextview~InputTextView} A configured instance to be set as {@link #inputView}.
 	 */
 	_createInputTextView() {
 		const locale = this.locale;
@@ -275,7 +312,7 @@ export default class ColorInputView extends View {
 		removeColorButton.label = removeColorButtonLabel;
 		removeColorButton.on( 'execute', () => {
 			this.value = defaultColor;
-			this._dropdownView.isOpen = false;
+			this.dropdownView.isOpen = false;
 			this.fire( 'input' );
 		} );
 
@@ -283,7 +320,7 @@ export default class ColorInputView extends View {
 	}
 
 	/**
-	 * Creates and configures the color grid inside the {@link #_dropdownView}.
+	 * Creates and configures the color grid inside the {@link #dropdownView}.
 	 *
 	 * @private
 	 */
@@ -295,7 +332,7 @@ export default class ColorInputView extends View {
 
 		colorGrid.on( 'execute', ( evtData, data ) => {
 			this.value = data.value;
-			this._dropdownView.isOpen = false;
+			this.dropdownView.isOpen = false;
 			this.fire( 'input' );
 		} );
 		colorGrid.bind( 'selectedColor' ).to( this, 'value' );
@@ -304,7 +341,7 @@ export default class ColorInputView extends View {
 	}
 
 	/**
-	 * Sets {@link #_inputView}'s value property to the color value or color label,
+	 * Sets {@link #inputView}'s value property to the color value or color label,
 	 * if there is one and the user is not typing.
 	 *
 	 * Handles cases like:
@@ -322,9 +359,9 @@ export default class ColorInputView extends View {
 			const mappedColor = this.options.colorDefinitions.find( def => normalizedInputValue === normalizeColor( def.color ) );
 
 			if ( mappedColor ) {
-				this._inputView.value = mappedColor.label;
+				this.inputView.value = mappedColor.label;
 			} else {
-				this._inputView.value = inputValue || '';
+				this.inputView.value = inputValue || '';
 			}
 		}
 	}
diff --git a/packages/ckeditor5-table/src/utils/ui/table-properties.js b/packages/ckeditor5-table/src/utils/ui/table-properties.js
index e36e75deeaf..fcb77d8e66d 100644
--- a/packages/ckeditor5-table/src/utils/ui/table-properties.js
+++ b/packages/ckeditor5-table/src/utils/ui/table-properties.js
@@ -372,29 +372,29 @@ export const defaultColors = [
  */
 export function getLabeledColorInputCreator( options ) {
 	return ( labeledFieldView, viewUid, statusUid ) => {
-		const inputView = new ColorInputView( labeledFieldView.locale, {
+		const colorInputView = new ColorInputView( labeledFieldView.locale, {
 			colorDefinitions: colorConfigToColorGridDefinitions( options.colorConfig ),
 			columns: options.columns,
 			defaultColorValue: options.defaultColorValue
 		} );
 
-		inputView.set( {
+		colorInputView.inputView.set( {
 			id: viewUid,
 			ariaDescribedById: statusUid
 		} );
 
-		inputView.bind( 'isReadOnly' ).to( labeledFieldView, 'isEnabled', value => !value );
-		inputView.bind( 'hasError' ).to( labeledFieldView, 'errorText', value => !!value );
+		colorInputView.bind( 'isReadOnly' ).to( labeledFieldView, 'isEnabled', value => !value );
+		colorInputView.bind( 'hasError' ).to( labeledFieldView, 'errorText', value => !!value );
 
-		inputView.on( 'input', () => {
+		colorInputView.on( 'input', () => {
 			// UX: Make the error text disappear and disable the error indicator as the user
 			// starts fixing the errors.
 			labeledFieldView.errorText = null;
 		} );
 
-		labeledFieldView.bind( 'isEmpty', 'isFocused' ).to( inputView );
+		labeledFieldView.bind( 'isEmpty', 'isFocused' ).to( colorInputView );
 
-		return inputView;
+		return colorInputView;
 	};
 }
 
diff --git a/packages/ckeditor5-table/tests/tablecellproperties/ui/tablecellpropertiesview.js b/packages/ckeditor5-table/tests/tablecellproperties/ui/tablecellpropertiesview.js
index 1ad7daf65e6..5ff01bdd902 100644
--- a/packages/ckeditor5-table/tests/tablecellproperties/ui/tablecellpropertiesview.js
+++ b/packages/ckeditor5-table/tests/tablecellproperties/ui/tablecellpropertiesview.js
@@ -681,8 +681,10 @@ describe( 'table cell properties', () => {
 				expect( view._focusables.map( f => f ) ).to.have.members( [
 					view.borderStyleDropdown,
 					view.borderColorInput,
+					view.borderColorInput.fieldView.dropdownView.buttonView,
 					view.borderWidthInput,
 					view.backgroundInput,
+					view.backgroundInput.fieldView.dropdownView.buttonView,
 					view.widthInput,
 					view.heightInput,
 					view.paddingInput,
diff --git a/packages/ckeditor5-table/tests/tableproperties/ui/tablepropertiesview.js b/packages/ckeditor5-table/tests/tableproperties/ui/tablepropertiesview.js
index 9c2bbce56a8..24cd75fc72e 100644
--- a/packages/ckeditor5-table/tests/tableproperties/ui/tablepropertiesview.js
+++ b/packages/ckeditor5-table/tests/tableproperties/ui/tablepropertiesview.js
@@ -616,8 +616,10 @@ describe( 'table properties', () => {
 				expect( view._focusables.map( f => f ) ).to.have.members( [
 					view.borderStyleDropdown,
 					view.borderColorInput,
+					view.borderColorInput.fieldView.dropdownView.buttonView,
 					view.borderWidthInput,
 					view.backgroundInput,
+					view.backgroundInput.fieldView.dropdownView.buttonView,
 					view.widthInput,
 					view.heightInput,
 					view.alignmentToolbar,
@@ -810,7 +812,7 @@ describe( 'table properties', () => {
 
 						it( 'should replace "Remove color" with the "Restore default" label', () => {
 							const { borderColorInput } = view;
-							const { panelView } = borderColorInput.fieldView._dropdownView;
+							const { panelView } = borderColorInput.fieldView.dropdownView;
 
 							expect( panelView.children.first.label ).to.equal( 'Restore default' );
 						} );
@@ -820,7 +822,7 @@ describe( 'table properties', () => {
 				describe( 'background row', () => {
 					it( 'should replace "Remove color" with the "Restore default" label', () => {
 						const { backgroundInput } = view;
-						const { panelView } = backgroundInput.fieldView._dropdownView;
+						const { panelView } = backgroundInput.fieldView.dropdownView;
 
 						expect( panelView.children.first.label ).to.equal( 'Restore default' );
 					} );
diff --git a/packages/ckeditor5-table/tests/ui/colorinputview.js b/packages/ckeditor5-table/tests/ui/colorinputview.js
index 4f500f7c06a..0993cba19f0 100644
--- a/packages/ckeditor5-table/tests/ui/colorinputview.js
+++ b/packages/ckeditor5-table/tests/ui/colorinputview.js
@@ -9,7 +9,9 @@ import ColorInputView from '../../src/ui/colorinputview';
 import InputTextView from '@ckeditor/ckeditor5-ui/src/inputtext/inputtextview';
 import ColorGridView from '@ckeditor/ckeditor5-ui/src/colorgrid/colorgridview';
 import DropdownView from '@ckeditor/ckeditor5-ui/src/dropdown/dropdownview';
-import ButtonView from '@ckeditor/ckeditor5-ui/src/button/buttonview';
+import { ButtonView, FocusCycler, ViewCollection } from '@ckeditor/ckeditor5-ui';
+import { FocusTracker, KeystrokeHandler, keyCodes } from '@ckeditor/ckeditor5-utils';
+import { global } from 'ckeditor5/src/utils';
 
 const DEFAULT_COLORS = [
 	{
@@ -42,9 +44,9 @@ describe( 'ColorInputView', () => {
 		} );
 		view.render();
 
-		inputView = view._inputView;
-		removeColorButton = view._dropdownView.panelView.children.first;
-		colorGridView = view._dropdownView.panelView.children.last;
+		inputView = view.inputView;
+		removeColorButton = view.dropdownView.panelView.children.first;
+		colorGridView = view.dropdownView.panelView.children.last;
 	} );
 
 	afterEach( () => {
@@ -67,10 +69,6 @@ describe( 'ColorInputView', () => {
 			expect( view.isReadOnly ).to.be.false;
 		} );
 
-		it( 'should set #hasError', () => {
-			expect( view.hasError ).to.be.false;
-		} );
-
 		it( 'should set #isFocused', () => {
 			expect( view.isFocused ).to.be.false;
 		} );
@@ -95,31 +93,47 @@ describe( 'ColorInputView', () => {
 			expect( view.isFocused ).to.be.false;
 		} );
 
+		it( 'should have #focusTracker', () => {
+			expect( view.focusTracker ).to.be.instanceOf( FocusTracker );
+		} );
+
+		it( 'should have #_focusables', () => {
+			expect( view._focusables ).to.be.instanceOf( ViewCollection );
+		} );
+
+		it( 'should have #keystrokes', () => {
+			expect( view.keystrokes ).to.be.instanceOf( KeystrokeHandler );
+		} );
+
+		it( 'should have #_focusCycler', () => {
+			expect( view._focusCycler ).to.be.instanceOf( FocusCycler );
+		} );
+
 		describe( 'dropdown', () => {
 			it( 'should be created', () => {
-				expect( view._dropdownView ).to.be.instanceOf( DropdownView );
-				expect( view._dropdownView.buttonView.element.classList.contains( 'ck-input-color__button' ) ).to.be.true;
-				expect( view._dropdownView.buttonView.tooltip ).to.be.true;
-				expect( view._dropdownView.buttonView.label ).to.equal( 'Color picker' );
+				expect( view.dropdownView ).to.be.instanceOf( DropdownView );
+				expect( view.dropdownView.buttonView.element.classList.contains( 'ck-input-color__button' ) ).to.be.true;
+				expect( view.dropdownView.buttonView.tooltip ).to.be.true;
+				expect( view.dropdownView.buttonView.label ).to.equal( 'Color picker' );
 			} );
 
 			it( 'should bind #isEnabled to the view\'s #isReadOnly', () => {
 				view.isReadOnly = false;
-				expect( view._dropdownView.isEnabled ).to.be.true;
+				expect( view.dropdownView.isEnabled ).to.be.true;
 
 				view.isReadOnly = true;
-				expect( view._dropdownView.isEnabled ).to.be.false;
+				expect( view.dropdownView.isEnabled ).to.be.false;
 			} );
 
 			it( 'should have the color preview', () => {
-				const preview = view._dropdownView.buttonView.children.first;
+				const preview = view.dropdownView.buttonView.children.first;
 
 				expect( preview.element.classList.contains( 'ck' ) ).to.be.true;
 				expect( preview.element.classList.contains( 'ck-input-color__button__preview' ) ).to.be.true;
 			} );
 
 			it( 'should display no-color preview when color is not set', () => {
-				const preview = view._dropdownView.buttonView.children.first;
+				const preview = view.dropdownView.buttonView.children.first;
 				const noColorPreview = preview.element.firstChild;
 
 				view.value = 'hsl(0, 0, 50%)';
@@ -132,7 +146,7 @@ describe( 'ColorInputView', () => {
 			} );
 
 			it( 'should have the remove color button', () => {
-				const removeColorButton = view._dropdownView.panelView.children.first;
+				const removeColorButton = view.dropdownView.panelView.children.first;
 
 				expect( removeColorButton ).to.be.instanceOf( ButtonView );
 				expect( removeColorButton.label ).to.equal( 'Remove color' );
@@ -147,7 +161,7 @@ describe( 'ColorInputView', () => {
 					} );
 					view.render();
 
-					expect( view._dropdownView.panelPosition ).to.equal( 'sw' );
+					expect( view.dropdownView.panelPosition ).to.equal( 'sw' );
 				} );
 
 				it( 'should be SouthEast in RTL', () => {
@@ -158,9 +172,21 @@ describe( 'ColorInputView', () => {
 					} );
 					view.render();
 
-					expect( view._dropdownView.panelPosition ).to.equal( 'se' );
+					expect( view.dropdownView.panelPosition ).to.equal( 'se' );
 				} );
 			} );
+
+			it( 'should register panelView children in #_focusables', () => {
+				expect( view._focusables.map( f => f ) ).to.have.members( [
+					view.dropdownView.panelView.children.first,
+					view.dropdownView.panelView.children.last
+				] );
+			} );
+
+			it( 'should register panelView children elements in #focusTracker', () => {
+				expect( view.focusTracker._elements ).to.include( view.dropdownView.panelView.children.first.element );
+				expect( view.focusTracker._elements ).to.include( view.dropdownView.panelView.children.last.element );
+			} );
 		} );
 
 		describe( 'color grid', () => {
@@ -185,11 +211,11 @@ describe( 'ColorInputView', () => {
 			} );
 
 			it( 'should close the dropdown upon ColorTileView#execute', () => {
-				view._dropdownView.isOpen = true;
+				view.dropdownView.isOpen = true;
 
 				colorGridView.items.last.fire( 'execute' );
 
-				expect( view._dropdownView.isOpen ).to.be.false;
+				expect( view.dropdownView.isOpen ).to.be.false;
 			} );
 
 			it( 'should fire the ColorInputView#input event upon ColorTileView#execute', () => {
@@ -224,12 +250,12 @@ describe( 'ColorInputView', () => {
 				expect( view.value ).to.equal( '' );
 			} );
 
-			it( 'should close the #_dropdownView upon #execute', () => {
-				view._dropdownView.isOpen = true;
+			it( 'should close the #dropdownView upon #execute', () => {
+				view.dropdownView.isOpen = true;
 
 				removeColorButton.fire( 'execute' );
 
-				expect( view._dropdownView.isOpen ).to.be.false;
+				expect( view.dropdownView.isOpen ).to.be.false;
 			} );
 		} );
 
@@ -283,14 +309,6 @@ describe( 'ColorInputView', () => {
 				expect( inputView.isReadOnly ).to.equal( false );
 			} );
 
-			it( 'should have #hasError bound to the color input', () => {
-				view.hasError = true;
-				expect( inputView.hasError ).to.equal( true );
-
-				view.hasError = false;
-				expect( inputView.hasError ).to.equal( false );
-			} );
-
 			it( 'should set #value on #input event', () => {
 				inputView.element.value = 'foo';
 				inputView.fire( 'input' );
@@ -380,7 +398,7 @@ describe( 'ColorInputView', () => {
 		it( 'should set the template', () => {
 			expect( view.element.classList.contains( 'ck' ) ).to.be.true;
 			expect( view.element.classList.contains( 'ck-input-color' ) ).to.be.true;
-			expect( view.element.firstChild ).to.equal( view._dropdownView.element );
+			expect( view.element.firstChild ).to.equal( view.dropdownView.element );
 			expect( view.element.lastChild ).to.equal( inputView.element );
 		} );
 
@@ -414,36 +432,6 @@ describe( 'ColorInputView', () => {
 			} );
 		} );
 
-		describe( 'template bindings', () => {
-			it( 'should bind the element class to #hasError', () => {
-				expect( view.element.classList.contains( 'ck-error' ) ).to.be.false;
-
-				view.hasError = true;
-				expect( view.element.classList.contains( 'ck-error' ) ).to.be.true;
-			} );
-
-			it( 'should bind element id to #id', () => {
-				expect( view.element.id ).to.equal( '' );
-
-				view.id = 'foo';
-				expect( view.element.id ).to.equal( 'foo' );
-			} );
-
-			it( 'should bind the "aria-invalid" attribute to #hasError', () => {
-				expect( view.element.getAttribute( 'aria-invalid' ) ).to.be.null;
-
-				view.hasError = true;
-				expect( view.element.getAttribute( 'aria-invalid' ) ).to.equal( 'true' );
-			} );
-
-			it( 'should bind the "aria-describedby" attribute to #ariaDescribedById', () => {
-				expect( view.element.getAttribute( 'aria-describedby' ) ).to.be.null;
-
-				view.ariaDescribedById = 'foo';
-				expect( view.element.getAttribute( 'aria-describedby' ) ).to.equal( 'foo' );
-			} );
-		} );
-
 		describe( 'defaultColorValue option', () => {
 			let view, locale;
 
@@ -466,7 +454,7 @@ describe( 'ColorInputView', () => {
 					let removeColorButton;
 
 					beforeEach( () => {
-						removeColorButton = view._dropdownView.panelView.children.first;
+						removeColorButton = view.dropdownView.panelView.children.first;
 					} );
 
 					it( 'should replace "Remove color" with "Restore default"', () => {
@@ -484,6 +472,118 @@ describe( 'ColorInputView', () => {
 				} );
 			} );
 		} );
+
+		describe( 'keyboard navigation', () => {
+			let view, locale, colorGridView;
+
+			beforeEach( () => {
+				locale = { t: val => val };
+				view = new ColorInputView( locale, {
+					colorDefinitions: DEFAULT_COLORS,
+					columns: 2
+				} );
+				view.render();
+				global.document.body.appendChild( view.element );
+
+				colorGridView = view.dropdownView.panelView.children.last;
+			} );
+
+			afterEach( () => {
+				view.element.remove();
+				view.destroy();
+			} );
+
+			describe( 'activates keyboard navigation in the color input view', () => {
+				it( 'so "tab" focuses the next focusable item', () => {
+					const keyEvtData = {
+						keyCode: keyCodes.tab,
+						preventDefault: sinon.spy(),
+						stopPropagation: sinon.spy()
+					};
+
+					view.dropdownView.isOpen = true;
+
+					// Mock the remove color button view is focused.
+					view.focusTracker.isFocused = true;
+					view.focusTracker.focusedElement = view._focusables.first.element;
+
+					// Spy the next view which in this case is the color grid view.
+					const spy = sinon.spy( view._focusables.last, 'focus' );
+
+					view.keystrokes.press( keyEvtData );
+					sinon.assert.calledOnce( keyEvtData.preventDefault );
+					sinon.assert.calledOnce( keyEvtData.stopPropagation );
+					sinon.assert.calledOnce( spy );
+				} );
+
+				it( 'so "shift + tab" focuses the previous focusable item', () => {
+					const keyEvtData = {
+						keyCode: keyCodes.tab,
+						shiftKey: true,
+						preventDefault: sinon.spy(),
+						stopPropagation: sinon.spy()
+					};
+
+					view.dropdownView.isOpen = true;
+
+					// Mock the remove color button view is focused.
+					view.focusTracker.isFocused = true;
+					view.focusTracker.focusedElement = view._focusables.first.element;
+
+					// Spy the previous view which in this case is the color grid view.
+					const spy = sinon.spy( view._focusables.last, 'focus' );
+
+					view.keystrokes.press( keyEvtData );
+					sinon.assert.calledOnce( keyEvtData.preventDefault );
+					sinon.assert.calledOnce( keyEvtData.stopPropagation );
+					sinon.assert.calledOnce( spy );
+				} );
+			} );
+
+			describe( 'keyboard navigation in the color input grid', () => {
+				it( '"arrow right" should focus the next focusable color button', () => {
+					const keyEvtData = {
+						keyCode: keyCodes.arrowright,
+						preventDefault: sinon.spy(),
+						stopPropagation: sinon.spy()
+					};
+
+					view.dropdownView.isOpen = true;
+
+					// Mock the first color button is focused.
+					colorGridView.focusTracker.isFocused = true;
+					colorGridView.focusTracker.focusedElement = colorGridView.items.first.element;
+
+					const spy = sinon.spy( colorGridView.items.get( 1 ), 'focus' );
+
+					colorGridView.keystrokes.press( keyEvtData );
+					sinon.assert.calledOnce( keyEvtData.preventDefault );
+					sinon.assert.calledOnce( keyEvtData.stopPropagation );
+					sinon.assert.calledOnce( spy );
+				} );
+
+				it( '"arrow down" should focus the focusable color button in the second row', () => {
+					const keyEvtData = {
+						keyCode: keyCodes.arrowdown,
+						preventDefault: sinon.spy(),
+						stopPropagation: sinon.spy()
+					};
+
+					view.dropdownView.isOpen = true;
+
+					// Mock the first color button is focused.
+					colorGridView.focusTracker.isFocused = true;
+					colorGridView.focusTracker.focusedElement = colorGridView.items.first.element;
+
+					const spy = sinon.spy( colorGridView.items.get( 2 ), 'focus' );
+
+					colorGridView.keystrokes.press( keyEvtData );
+					sinon.assert.calledOnce( keyEvtData.preventDefault );
+					sinon.assert.calledOnce( keyEvtData.stopPropagation );
+					sinon.assert.calledOnce( spy );
+				} );
+			} );
+		} );
 	} );
 
 	describe( 'focus()', () => {
@@ -495,4 +595,39 @@ describe( 'ColorInputView', () => {
 			sinon.assert.calledOnce( spy );
 		} );
 	} );
+
+	describe( 'render()', () => {
+		it( 'starts listening for #keystrokes coming from the #element of the panel view in the dropdown view', () => {
+			const view = new ColorInputView( locale, {
+				colorDefinitions: DEFAULT_COLORS,
+				columns: 5
+			} );
+
+			const spy = sinon.spy( view.keystrokes, 'listenTo' );
+
+			view.render();
+			sinon.assert.calledOnce( spy );
+			sinon.assert.calledWithExactly( spy, view.dropdownView.panelView.element );
+
+			view.destroy();
+		} );
+	} );
+
+	describe( 'destroy()', () => {
+		it( 'should destroy the FocusTracker instance', () => {
+			const destroySpy = sinon.spy( view.focusTracker, 'destroy' );
+
+			view.destroy();
+
+			sinon.assert.calledOnce( destroySpy );
+		} );
+
+		it( 'should destroy the KeystrokeHandler instance', () => {
+			const destroySpy = sinon.spy( view.keystrokes, 'destroy' );
+
+			view.destroy();
+
+			sinon.assert.calledOnce( destroySpy );
+		} );
+	} );
 } );
diff --git a/packages/ckeditor5-table/tests/utils/ui/table-properties.js b/packages/ckeditor5-table/tests/utils/ui/table-properties.js
index 0f1ff9460cd..f5ab8cd9a2f 100644
--- a/packages/ckeditor5-table/tests/utils/ui/table-properties.js
+++ b/packages/ckeditor5-table/tests/utils/ui/table-properties.js
@@ -461,11 +461,11 @@ describe( 'table utils', () => {
 			} );
 
 			it( 'should set ColorInputView#id', () => {
-				expect( labeledField.fieldView.id ).to.match( /^ck-labeled-field-view-.+/ );
+				expect( labeledField.fieldView.inputView.id ).to.match( /^ck-labeled-field-view-.+/ );
 			} );
 
 			it( 'should set ColorInputView#ariaDescribedById', () => {
-				expect( labeledField.fieldView.ariaDescribedById ).to.match( /^ck-labeled-field-view-status-.+/ );
+				expect( labeledField.fieldView.inputView.ariaDescribedById ).to.match( /^ck-labeled-field-view-status-.+/ );
 			} );
 
 			it( 'should bind ColorInputView#isReadOnly to LabeledFieldView#isEnabled', () => {
diff --git a/packages/ckeditor5-theme-lark/theme/ckeditor5-table/colorinput.css b/packages/ckeditor5-theme-lark/theme/ckeditor5-table/colorinput.css
index f627c9c6342..3017c51e9a1 100644
--- a/packages/ckeditor5-theme-lark/theme/ckeditor5-table/colorinput.css
+++ b/packages/ckeditor5-theme-lark/theme/ckeditor5-table/colorinput.css
@@ -17,6 +17,12 @@
 			border-top-left-radius: 0;
 			border-bottom-left-radius: 0;
 		}
+
+		/* Make sure the focused input is always on top of the dropdown button so its
+		   outline and border are never cropped (also when the input is read-only). */
+		&:focus {
+			z-index: 0;
+		}
 	}
 
 	& > .ck.ck-dropdown {
@@ -24,15 +30,21 @@
 			padding: 0;
 
 			@mixin ck-dir ltr {
-				border-left-width: 0;
 				border-top-left-radius: 0;
 				border-bottom-left-radius: 0;
+
+				&:not(:focus) {
+					border-left: 1px solid transparent;
+				}
 			}
 
 			@mixin ck-dir rtl {
-				border-right-width: 0;
 				border-top-right-radius: 0;
 				border-bottom-right-radius: 0;
+
+				&:not(:focus) {
+					border-right: 1px solid transparent;
+				}
 			}
 
 			&.ck-disabled {
@@ -62,12 +74,15 @@
 
 	& .ck.ck-input-color__remove-color {
 		width: 100%;
-		border-bottom: 1px solid var(--ck-color-input-border);
 		padding: calc(var(--ck-spacing-standard) / 2) var(--ck-spacing-standard);
 
 		border-bottom-left-radius: 0;
 		border-bottom-right-radius: 0;
 
+		&:not(:focus) {
+			border-bottom: 1px solid var(--ck-color-input-border);
+		}
+
 		@mixin ck-dir ltr {
 			border-top-right-radius: 0;
 		}