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

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

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

+ 18 - 1
packages/ckeditor5-ui/src/button/buttonview.js

@@ -100,6 +100,15 @@ export default class ButtonView extends View {
 		 */
 		this.set( 'icon' );
 
+		/**
+		 * Controls the `tabindex` attribute of the button.
+		 *
+		 * @observable
+		 * @default -1
+		 * @member {String} #tabindex
+		 */
+		this.set( 'tabindex', -1 );
+
 		/**
 		 * Tooltip of the button bound to the template.
 		 *
@@ -139,7 +148,8 @@ export default class ButtonView extends View {
 				type: bind.to( 'type', value => value ? value : 'button' ),
 				'data-ck-tooltip': [
 					bind.to( '_tooltipString' )
-				]
+				],
+				tabindex: bind.to( 'tabindex' )
 			},
 
 			children: [
@@ -204,6 +214,13 @@ export default class ButtonView extends View {
 		return promise.then( () => super.init() );
 	}
 
+	/**
+	 * Focuses the button.
+	 */
+	focus() {
+		this.element.focus();
+	}
+
 	/**
 	 * Gets value for the `data-ck-tooltip` attribute from the combination of
 	 * {@link #tooltip}, {@link #label} and {@link #keystroke} attributes.

+ 22 - 0
packages/ckeditor5-ui/tests/button/buttonview.js

@@ -168,6 +168,18 @@ describe( 'ButtonView', () => {
 			} );
 		} );
 
+		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( 'mousedown event', () => {
 			it( 'should be prevented', () => {
 				const ret = view.element.dispatchEvent( new Event( 'mousedown', { cancelable: true } ) );
@@ -229,4 +241,14 @@ describe( 'ButtonView', () => {
 			} );
 		} );
 	} );
+
+	describe( 'focus()', () => {
+		it( 'focuses the button in DOM', () => {
+			const spy = sinon.spy( view.element, 'focus' );
+
+			view.focus();
+
+			sinon.assert.calledOnce( spy );
+		} );
+	} );
 } );