8
0
Просмотр исходного кода

Implemented ListItemView#focus() method and enabled attribute–controlled tabindex behaviour.

Aleksander Nowodzinski 9 лет назад
Родитель
Сommit
efb06e2abf

+ 18 - 1
packages/ckeditor5-ui/src/list/listitemview.js

@@ -22,6 +22,15 @@ export default class ListItemView extends View {
 	constructor() {
 		super();
 
+		/**
+		 * Controls the `tabindex` attribute of the item.
+		 *
+		 * @observable
+		 * @default -1
+		 * @member {String} #tabindex
+		 */
+		this.set( 'tabindex', -1 );
+
 		const bind = this.bindTemplate;
 
 		this.template = new Template( {
@@ -31,7 +40,8 @@ export default class ListItemView extends View {
 				class: [
 					'ck-list__item'
 				],
-				style: bind.to( 'style' )
+				style: bind.to( 'style' ),
+				tabindex: bind.to( 'tabindex' )
 			},
 
 			children: [
@@ -65,4 +75,11 @@ export default class ListItemView extends View {
 		 * @event #execute
 		 */
 	}
+
+	/**
+	 * Focuses the list item.
+	 */
+	focus() {
+		this.element.focus();
+	}
 }

+ 22 - 0
packages/ckeditor5-ui/tests/list/listitemview.js

@@ -47,6 +47,18 @@ describe( 'ListItemView', () => {
 			} );
 		} );
 
+		describe( 'tabindex', () => {
+			it( 'is initially set ', () => {
+				expect( view.element.attributes.tabindex.value ).to.equal( '-1' );
+			} );
+
+			it( 'reacts on view#tabindex', () => {
+				view.tabindex = 3;
+
+				expect( view.element.attributes.tabindex.value ).to.equal( '3' );
+			} );
+		} );
+
 		describe( 'view#execute event', () => {
 			it( 'triggers view#execute event when "click" is fired in DOM', () => {
 				const spy = sinon.spy();
@@ -58,4 +70,14 @@ describe( 'ListItemView', () => {
 			} );
 		} );
 	} );
+
+	describe( 'focus()', () => {
+		it( 'focuses the item in DOM', () => {
+			const spy = sinon.spy( view.element, 'focus' );
+
+			view.focus();
+
+			sinon.assert.calledOnce( spy );
+		} );
+	} );
 } );