Merge pull request #16025 from ckeditor/ck/6032

Feature (ui): Added the `tabindex` DOM attribute support to the `InputBase` class.

packages/ckeditor5-ui/src/input/inputbase.ts

@@ -46,6 +46,13 @@ export default abstract class InputBase<TElement extends HTMLInputElement | HTML
 	 */
 	declare public placeholder: string | undefined;
 
+	/**
+	 * The `tabindex` attribute of the input.
+	 *
+	 * @observable
+	 */
+	declare public tabIndex: number | undefined;
+
 	/**
 	 * The `aria-label` attribute of the input.
 	 *
@@ -105,6 +112,7 @@ export default abstract class InputBase<TElement extends HTMLInputElement | HTML
 		this.set( 'value', undefined );
 		this.set( 'id', undefined );
 		this.set( 'placeholder', undefined );
+		this.set( 'tabIndex', undefined );
 		this.set( 'isReadOnly', false );
 		this.set( 'hasError', false );
 		this.set( 'ariaDescribedById', undefined );
@@ -129,6 +137,7 @@ export default abstract class InputBase<TElement extends HTMLInputElement | HTML
 				],
 				id: bind.to( 'id' ),
 				placeholder: bind.to( 'placeholder' ),
+				tabindex: bind.to( 'tabIndex' ),
 				readonly: bind.to( 'isReadOnly' ),
 				'aria-invalid': bind.if( 'hasError', true ),
 				'aria-describedby': bind.to( 'ariaDescribedById' ),

packages/ckeditor5-ui/tests/input/inputbase.js

@@ -219,6 +219,16 @@ describe( 'InputBase', () => {
 			} );
 		} );
 
+		describe( 'tabIndex', () => {
+			it( 'should react on view#tabIndex', () => {
+				expect( view.element.getAttribute( 'tabIndex' ) ).to.be.null;
+
+				view.tabIndex = 123;
+
+				expect( view.element.getAttribute( 'tabIndex' ) ).to.equal( '123' );
+			} );
+		} );
+
 		describe( 'aria-label', () => {
 			it( 'should react on view#ariaLabel', () => {
 				expect( view.element.getAttribute( 'aria-label' ) ).to.be.null;