@ckeditor/ckeditor5-table 35.1.0 → 35.2.0

package/build/translations/ko.js

@@ -1 +1 @@
-!function(e){const t=e.ko=e.ko||{};t.dictionary=Object.assign(t.dictionary||{},{"Align cell text to the bottom":"셀 텍스트를 아래로 정렬","Align cell text to the center":"셀 텍스트를 가로 가운데로 정렬","Align cell text to the left":"셀 텍스트를 왼쪽으로 정렬","Align cell text to the middle":"셀 텍스트를 세로 가운데로 정렬","Align cell text to the right":"셀 텍스트를 오른쪽으로 정렬","Align cell text to the top":"셀 텍스트를 위로 정렬","Align table to the left":"테이블을 왼쪽으로 정렬","Align table to the right":"테이블을 오른쪽으로 정렬",Alignment:"정렬",Background:"배경색",Border:"테두리","Cell properties":"셀 속성","Center table":"테이블을 가운데로 정렬",Color:"색","Color picker":"색상 선택기",Column:"열",Dashed:"파선","Delete column":"열 삭제","Delete row":"행 삭제",Dimensions:"크기",Dotted:"점선",Double:"이중선","Enter table caption":"테이블 캡션 입력",Groove:"음각선","Header column":"헤더 열","Header row":"헤더 행",Height:"세로","Horizontal text alignment toolbar":"가로 텍스트 정렬 도구 모음","Insert column left":"왼쪽에 열 삽입","Insert column right":"오른쪽에 열 삽입","Insert row above":"위에 행 삽입","Insert row below":"아래에 행 삽입","Insert table":"테이블 삽입",Inset:"측면 음각선","Justify cell text":"셀 텍스트를 양쪽으로 정렬","Merge cell down":"아래 셀과 병합","Merge cell left":"왼쪽 셀과 병합","Merge cell right":"오른쪽 셀과 병합","Merge cell up":"위 셀과 병합","Merge cells":"셀 병합",None:"선 없음",Outset:"측면 양각선",Padding:"여백",Ridge:"양각선",Row:"행","Select column":"열 선택","Select row":"행 선택",Solid:"실선","Split cell horizontally":"가로로 셀 분할","Split cell vertically":"세로로 셀 분할",Style:"스타일","Table alignment toolbar":"표 정렬 도구 모음","Table cell text alignment":"표 셀 텍스트 정렬","Table properties":"표 속성","Table toolbar":"표 도구 모음",'The color is invalid. Try "#FF0000" or "rgb(255,0,0)" or "red".':'유효하지 않은 색입니다. "#FF0000"이나 "rgb(255,0,0)", 또는 "red"를 입력해 보세요.','The value is invalid. Try "10px" or "2em" or simply "2".':'유효하지 않은 값입니다. "10px"이나 "2em", 또는 그냥 "2"를 입력해 보세요.',"Toggle caption off":"캡션 지우기","Toggle caption on":"캡션 넣기","Vertical text alignment toolbar":"세로 텍스트 정렬 도구 모음",Width:"가로"})}(window.CKEDITOR_TRANSLATIONS||(window.CKEDITOR_TRANSLATIONS={}));
+!function(e){const t=e.ko=e.ko||{};t.dictionary=Object.assign(t.dictionary||{},{"Align cell text to the bottom":"셀 텍스트를 아래로 정렬","Align cell text to the center":"셀 텍스트를 가로 가운데로 정렬","Align cell text to the left":"셀 텍스트를 왼쪽으로 정렬","Align cell text to the middle":"셀 텍스트를 세로 가운데로 정렬","Align cell text to the right":"셀 텍스트를 오른쪽으로 정렬","Align cell text to the top":"셀 텍스트를 위로 정렬","Align table to the left":"테이블을 왼쪽으로 정렬","Align table to the right":"테이블을 오른쪽으로 정렬",Alignment:"정렬",Background:"배경색",Border:"테두리","Cell properties":"셀 속성","Center table":"테이블을 가운데로 정렬",Color:"색","Color picker":"색상 선택기",Column:"열",Dashed:"파선","Delete column":"열 삭제","Delete row":"행 삭제",Dimensions:"크기",Dotted:"점선",Double:"이중선","Enter table caption":"테이블 캡션 입력",Groove:"음각선","Header column":"헤더 열","Header row":"헤더 행",Height:"세로","Horizontal text alignment toolbar":"가로 텍스트 정렬 도구 모음","Insert column left":"왼쪽에 열 삽입","Insert column right":"오른쪽에 열 삽입","Insert row above":"위에 행 삽입","Insert row below":"아래에 행 삽입","Insert table":"테이블 삽입",Inset:"측면 음각선","Justify cell text":"셀 텍스트를 양쪽으로 정렬","Merge cell down":"아래 셀과 병합","Merge cell left":"왼쪽 셀과 병합","Merge cell right":"오른쪽 셀과 병합","Merge cell up":"위 셀과 병합","Merge cells":"셀 병합",None:"선 없음",Outset:"측면 양각선",Padding:"여백",Ridge:"양각선",Row:"행","Select column":"열 선택","Select row":"행 선택",Solid:"실선","Split cell horizontally":"가로로 셀 분할","Split cell vertically":"세로로 셀 분할",Style:"스타일","Table alignment toolbar":"표 정렬 도구 모음","Table cell text alignment":"표 셀 텍스트 정렬","Table properties":"표 속성","Table toolbar":"표 도구 모음",'The color is invalid. Try "#FF0000" or "rgb(255,0,0)" or "red".':'유효하지 않은 색입니다. "#FF0000"이나 "rgb(255,0,0)", 또는 "red"를 입력해 보세요.','The value is invalid. Try "10px" or "2em" or simply "2".':'유효하지 않은 값입니다. "10px"나 "2em" 또는 그냥 "2"를 입력해 보세요.',"Toggle caption off":"캡션 지우기","Toggle caption on":"캡션 넣기","Vertical text alignment toolbar":"세로 텍스트 정렬 도구 모음",Width:"가로"})}(window.CKEDITOR_TRANSLATIONS||(window.CKEDITOR_TRANSLATIONS={}));

package/lang/translations/ko.po

@@ -242,7 +242,7 @@ msgstr "유효하지 않은 색입니다. \"#FF0000\"이나 \"rgb(255,0,0)\",
 
 msgctxt "The localized error string that can be displayed next to length (padding, border width) fields that have an invalid value."
 msgid "The value is invalid. Try \"10px\" or \"2em\" or simply \"2\"."
-msgstr "유효하지 않은 값입니다. \"10px\"이나 \"2em\", 또는 그냥 \"2\"를 입력해 보세요."
+msgstr "유효하지 않은 값입니다. \"10px\"나 \"2em\" 또는 그냥 \"2\"를 입력해 보세요."
 
 msgctxt "The label used by assistive technologies describing a button that opens a color picker, where user can choose a configured color for a certain properties (eg.: background color, color, border-color etc.)."
 msgid "Color picker"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ckeditor/ckeditor5-table",
-  "version": "35.1.0",
+  "version": "35.2.0",
   "description": "Table feature for CKEditor 5.",
   "keywords": [
     "ckeditor",
@@ -12,34 +12,34 @@
   ],
   "main": "src/index.js",
   "dependencies": {
-    "ckeditor5": "^35.1.0",
+    "ckeditor5": "^35.2.0",
     "lodash-es": "^4.17.15"
   },
   "devDependencies": {
-    "@ckeditor/ckeditor5-alignment": "^35.1.0",
-    "@ckeditor/ckeditor5-basic-styles": "^35.1.0",
-    "@ckeditor/ckeditor5-block-quote": "^35.1.0",
-    "@ckeditor/ckeditor5-clipboard": "^35.1.0",
-    "@ckeditor/ckeditor5-core": "^35.1.0",
-    "@ckeditor/ckeditor5-dev-utils": "^30.0.0",
-    "@ckeditor/ckeditor5-editor-classic": "^35.1.0",
-    "@ckeditor/ckeditor5-engine": "^35.1.0",
-    "@ckeditor/ckeditor5-highlight": "^35.1.0",
-    "@ckeditor/ckeditor5-horizontal-line": "^35.1.0",
-    "@ckeditor/ckeditor5-html-support": "^35.1.0",
-    "@ckeditor/ckeditor5-image": "^35.1.0",
-    "@ckeditor/ckeditor5-indent": "^35.1.0",
-    "@ckeditor/ckeditor5-link": "^35.1.0",
-    "@ckeditor/ckeditor5-list": "^35.1.0",
-    "@ckeditor/ckeditor5-media-embed": "^35.1.0",
-    "@ckeditor/ckeditor5-paragraph": "^35.1.0",
-    "@ckeditor/ckeditor5-theme-lark": "^35.1.0",
-    "@ckeditor/ckeditor5-typing": "^35.1.0",
-    "@ckeditor/ckeditor5-ui": "^35.1.0",
-    "@ckeditor/ckeditor5-undo": "^35.1.0",
-    "@ckeditor/ckeditor5-utils": "^35.1.0",
-    "@ckeditor/ckeditor5-widget": "^35.1.0",
-    "@ckeditor/ckeditor5-source-editing": "^35.1.0",
+    "@ckeditor/ckeditor5-alignment": "^35.2.0",
+    "@ckeditor/ckeditor5-basic-styles": "^35.2.0",
+    "@ckeditor/ckeditor5-block-quote": "^35.2.0",
+    "@ckeditor/ckeditor5-clipboard": "^35.2.0",
+    "@ckeditor/ckeditor5-core": "^35.2.0",
+    "@ckeditor/ckeditor5-dev-utils": "^31.0.0",
+    "@ckeditor/ckeditor5-editor-classic": "^35.2.0",
+    "@ckeditor/ckeditor5-engine": "^35.2.0",
+    "@ckeditor/ckeditor5-highlight": "^35.2.0",
+    "@ckeditor/ckeditor5-horizontal-line": "^35.2.0",
+    "@ckeditor/ckeditor5-html-support": "^35.2.0",
+    "@ckeditor/ckeditor5-image": "^35.2.0",
+    "@ckeditor/ckeditor5-indent": "^35.2.0",
+    "@ckeditor/ckeditor5-link": "^35.2.0",
+    "@ckeditor/ckeditor5-list": "^35.2.0",
+    "@ckeditor/ckeditor5-media-embed": "^35.2.0",
+    "@ckeditor/ckeditor5-paragraph": "^35.2.0",
+    "@ckeditor/ckeditor5-theme-lark": "^35.2.0",
+    "@ckeditor/ckeditor5-typing": "^35.2.0",
+    "@ckeditor/ckeditor5-ui": "^35.2.0",
+    "@ckeditor/ckeditor5-undo": "^35.2.0",
+    "@ckeditor/ckeditor5-utils": "^35.2.0",
+    "@ckeditor/ckeditor5-widget": "^35.2.0",
+    "@ckeditor/ckeditor5-source-editing": "^35.2.0",
     "json-diff": "^0.5.4",
     "webpack": "^5.58.1",
     "webpack-cli": "^4.9.0"

package/src/index.js

@@ -15,6 +15,7 @@ export { default as TableToolbar } from './tabletoolbar';
 export { default as TableCellProperties } from './tablecellproperties';
 export { default as TableCellPropertiesEditing } from './tablecellproperties/tablecellpropertiesediting';
 export { default as TableCellPropertiesUI } from './tablecellproperties/tablecellpropertiesui';
+export { default as TableCellWidthEditing } from './tablecellwidth/tablecellwidthediting';
 export { default as TableProperties } from './tableproperties';
 export { default as TablePropertiesEditing } from './tableproperties/tablepropertiesediting';
 export { default as TablePropertiesUI } from './tableproperties/tablepropertiesui';

package/src/tablecellproperties/tablecellpropertiesediting.js

@@ -10,10 +10,10 @@
 import { Plugin } from 'ckeditor5/src/core';
 import { addBorderRules, addPaddingRules, addBackgroundRules } from 'ckeditor5/src/engine';
 
-import { downcastAttributeToStyle, upcastStyleToAttribute, upcastBorderStyles } from './../converters/tableproperties';
+import { downcastAttributeToStyle, upcastBorderStyles } from './../converters/tableproperties';
 import TableEditing from './../tableediting';
+import TableCellWidthEditing from '../tablecellwidth/tablecellwidthediting';
 import TableCellPaddingCommand from './commands/tablecellpaddingcommand';
-import TableCellWidthCommand from './commands/tablecellwidthcommand';
 import TableCellHeightCommand from './commands/tablecellheightcommand';
 import TableCellBackgroundColorCommand from './commands/tablecellbackgroundcolorcommand';
 import TableCellVerticalAlignmentCommand from './commands/tablecellverticalalignmentcommand';
@@ -22,6 +22,7 @@ import TableCellBorderStyleCommand from './commands/tablecellborderstylecommand'
 import TableCellBorderColorCommand from './commands/tablecellbordercolorcommand';
 import TableCellBorderWidthCommand from './commands/tablecellborderwidthcommand';
 import { getNormalizedDefaultProperties } from '../utils/table-properties';
+import { enableProperty } from '../utils/common';
 
 const VALIGN_VALUES_REG_EXP = /^(top|middle|bottom)$/;
 const ALIGN_VALUES_REG_EXP = /^(left|center|right|justify)$/;
@@ -59,7 +60,7 @@ export default class TableCellPropertiesEditing extends Plugin {
 	 * @inheritDoc
 	 */
 	static get requires() {
-		return [ TableEditing ];
+		return [ TableEditing, TableCellWidthEditing ];
 	}
 
 	/**
@@ -92,13 +93,6 @@ export default class TableCellPropertiesEditing extends Plugin {
 		editor.commands.add( 'tableCellBorderColor', new TableCellBorderColorCommand( editor, defaultTableCellProperties.borderColor ) );
 		editor.commands.add( 'tableCellBorderWidth', new TableCellBorderWidthCommand( editor, defaultTableCellProperties.borderWidth ) );
 
-		enableProperty( schema, conversion, {
-			modelAttribute: 'tableCellWidth',
-			styleName: 'width',
-			defaultValue: defaultTableCellProperties.width
-		} );
-		editor.commands.add( 'tableCellWidth', new TableCellWidthCommand( editor, defaultTableCellProperties.width ) );
-
 		enableProperty( schema, conversion, {
 			modelAttribute: 'tableCellHeight',
 			styleName: 'height',
@@ -288,23 +282,3 @@ function enableVerticalAlignmentProperty( schema, conversion, defaultValue ) {
 			}
 		} );
 }
-
-// Enables conversion for an attribute for simple view-model mappings.
-//
-// @param {module:engine/model/schema~Schema} schema
-// @param {module:engine/conversion/conversion~Conversion} conversion
-// @param {Object} options
-// @param {String} options.modelAttribute
-// @param {String} options.styleName
-// @param {String} options.defaultValue The default value for the specified `modelAttribute`.
-// @param {Boolean} [options.reduceBoxSides=false]
-function enableProperty( schema, conversion, options ) {
-	const { modelAttribute } = options;
-
-	schema.extend( 'tableCell', {
-		allowAttributes: [ modelAttribute ]
-	} );
-
-	upcastStyleToAttribute( conversion, { viewElement: /^(td|th)$/, ...options } );
-	downcastAttributeToStyle( conversion, { modelElement: 'tableCell', ...options } );
-}

package/src/tablecellproperties/tablecellpropertiesui.js

@@ -33,8 +33,8 @@ const propertyToCommandMap = {
 	borderStyle: 'tableCellBorderStyle',
 	borderColor: 'tableCellBorderColor',
 	borderWidth: 'tableCellBorderWidth',
-	width: 'tableCellWidth',
 	height: 'tableCellHeight',
+	width: 'tableCellWidth',
 	padding: 'tableCellPadding',
 	backgroundColor: 'tableCellBackgroundColor',
 	horizontalAlignment: 'tableCellHorizontalAlignment',

package/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,

package/src/{tablecellproperties → tablecellwidth}/commands/tablecellwidthcommand.js

@@ -6,14 +6,13 @@
 /**
  * @module table/tablecellproperties/commands/tablecellwidthcommand
  */
-
-import TableCellPropertyCommand from './tablecellpropertycommand';
+import TableCellPropertyCommand from '../../tablecellproperties/commands/tablecellpropertycommand';
 import { addDefaultUnitToNumericValue } from '../../utils/table-properties';
 
 /**
  * The table cell width command.
  *
- * The command is registered by the {@link module:table/tablecellproperties/tablecellpropertiesediting~TableCellPropertiesEditing} as
+ * The command is registered by the {@link module:table/tablecellwidth/tablecellwidthediting~TableCellWidthEditing} as
  * the `'tableCellWidth'` editor command.
  *
  * To change the width of selected cells, execute the command:

package/src/tablecellwidth/tablecellwidthediting.js

@@ -0,0 +1,58 @@
+/**
+ * @license Copyright (c) 2003-2022, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+
+/**
+ * @module table/tablecellwidth/tablecellwidthediting
+ */
+
+import { Plugin } from 'ckeditor5/src/core';
+
+import TableEditing from './../tableediting';
+import TableCellWidthCommand from './commands/tablecellwidthcommand';
+import { getNormalizedDefaultProperties } from '../utils/table-properties';
+import { enableProperty } from '../utils/common';
+
+/**
+ * The table cell width editing feature.
+ *
+ * Introduces `tableCellWidth` table cell model attribute alongside with its converters
+ * and a command.
+ *
+ * @extends module:core/plugin~Plugin
+ */
+export default class TableCellWidthEditing extends Plugin {
+	/**
+	 * @inheritDoc
+	 */
+	static get pluginName() {
+		return 'TableCellWidthEditing';
+	}
+
+	/**
+	 * @inheritDoc
+	 */
+	static get requires() {
+		return [ TableEditing ];
+	}
+
+	/**
+	 * @inheritDoc
+	 */
+	init() {
+		const editor = this.editor;
+
+		const defaultTableCellProperties = getNormalizedDefaultProperties(
+			editor.config.get( 'table.tableCellProperties.defaultProperties' )
+		);
+
+		enableProperty( editor.model.schema, editor.conversion, {
+			modelAttribute: 'tableCellWidth',
+			styleName: 'width',
+			defaultValue: defaultTableCellProperties.width
+		} );
+
+		editor.commands.add( 'tableCellWidth', new TableCellWidthCommand( editor, defaultTableCellProperties.width ) );
+	}
+}

package/src/tablecolumnresize.js

@@ -9,6 +9,7 @@
 
 import { Plugin } from 'ckeditor5/src/core';
 import TableColumnResizeEditing from './tablecolumnresize/tablecolumnresizeediting';
+import TableCellWidthEditing from './tablecellwidth/tablecellwidthediting';
 
 import '../theme/tablecolumnresize.css';
 
@@ -24,7 +25,7 @@ export default class TableColumnResize extends Plugin {
 	 * @inheritDoc
  	 */
 	static get requires() {
-		return [ TableColumnResizeEditing ];
+		return [ TableColumnResizeEditing, TableCellWidthEditing ];
 	}
 
 	/**

package/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,

package/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 || '';
 			}
 		}
 	}