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

Implemented keyboard navigation with tab and shift + tab in the LinkForm.

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

+ 79 - 0
packages/ckeditor5-link/src/ui/linkformview.js

@@ -9,12 +9,16 @@
 
 import View from '@ckeditor/ckeditor5-ui/src/view';
 import Template from '@ckeditor/ckeditor5-ui/src/template';
+import ViewCollection from '@ckeditor/ckeditor5-ui/src/viewcollection';
 
 import ButtonView from '@ckeditor/ckeditor5-ui/src/button/buttonview';
 import LabeledInputView from '@ckeditor/ckeditor5-ui/src/labeledinput/labeledinputview';
 import InputTextView from '@ckeditor/ckeditor5-ui/src/inputtext/inputtextview';
 
 import submitHandler from '@ckeditor/ckeditor5-ui/src/bindings/submithandler';
+import FocusTracker from '@ckeditor/ckeditor5-utils/src/focustracker';
+import FocusCycler from '@ckeditor/ckeditor5-ui/src/focuscycler';
+import KeystrokeHandler from '@ckeditor/ckeditor5-utils/src/keystrokehandler';
 
 /**
  * The link form view controller class.
@@ -32,6 +36,22 @@ export default class LinkFormView extends View {
 
 		const t = locale.t;
 
+		/**
+		 * Tracks information about DOM focus in the form.
+		 *
+		 * @readonly
+		 * @member {module:utils/focustracker~FocusTracker}
+		 */
+		this.focusTracker = new FocusTracker();
+
+		/**
+		 * Instance of the {@link module:core/keystrokehandler~KeystrokeHandler}.
+		 *
+		 * @readonly
+		 * @member {module:core/keystrokehandler~KeystrokeHandler}
+		 */
+		this.keystrokes = new KeystrokeHandler();
+
 		/**
 		 * The url input view.
 		 *
@@ -61,6 +81,24 @@ export default class LinkFormView extends View {
 		 */
 		this.unlinkButtonView = this._createButton( t( 'Unlink' ), 'unlink' );
 
+		/**
+		 * A collection of views which can be focused in the form.
+		 *
+		 * @readonly
+		 * @protected
+		 * @member {module:ui/viewcollection~ViewCollection}
+		 */
+		this._focusables = new ViewCollection();
+
+		/**
+		 * Helps cycling over {@link #_focusables} in the form.
+		 *
+		 * @readonly
+		 * @protected
+		 * @member {module:ui/focuscycler~FocusCycler}
+		 */
+		this._focusCycler = new FocusCycler( this._focusables, this.focusTracker );
+
 		Template.extend( this.saveButtonView.template, {
 			attributes: {
 				class: [
@@ -101,6 +139,47 @@ export default class LinkFormView extends View {
 		submitHandler( {
 			view: this
 		} );
+
+		const childViews = [
+			this.urlInputView, this.saveButtonView, this.cancelButtonView, this.unlinkButtonView
+		];
+
+		childViews.forEach( v => {
+			// Register the view as focusable.
+			this._focusables.add( v );
+
+			// Register the view in the focus tracker.
+			this.focusTracker.add( v.element );
+		} );
+
+		// Register child views. It tells #destroy() to handle theme.
+		this.addChildren( childViews );
+	}
+
+	/**
+	 * @inheritDoc
+	 */
+	init() {
+		this.keystrokes.listenTo( this.element );
+
+		this.keystrokes.set( 'tab', ( data, cancel ) => {
+			this._focusCycler.next.focus();
+			cancel();
+		} );
+
+		this.keystrokes.set( 'shift + tab', ( data, cancel ) => {
+			this._focusCycler.previous.focus();
+			cancel();
+		} );
+
+		return super.init();
+	}
+
+	/**
+	 * Focuses the fist {@link #_focusables} in the form.
+	 */
+	focus() {
+		this._focusCycler.first.focus();
 	}
 
 	/**

+ 122 - 1
packages/ckeditor5-link/tests/ui/linkformview.js

@@ -4,7 +4,15 @@
  */
 
 import View from '@ckeditor/ckeditor5-ui/src/view';
-import LinkFormView from '../../src/ui/linkformview';
+import LinkFormView from '@ckeditor/ckeditor5-link/src/ui/linkformview';
+import { keyCodes } from '@ckeditor/ckeditor5-utils/src/keyboard';
+import KeystrokeHandler from '@ckeditor/ckeditor5-utils/src/keystrokehandler';
+import FocusTracker from '@ckeditor/ckeditor5-utils/src/focustracker';
+import FocusCycler from '@ckeditor/ckeditor5-ui/src/focuscycler';
+import ViewCollection from '@ckeditor/ckeditor5-ui/src/viewcollection';
+import testUtils from '@ckeditor/ckeditor5-core/tests/_utils/utils';
+
+testUtils.createSinonSandbox();
 
 describe( 'LinkFormView', () => {
 	let view;
@@ -32,6 +40,55 @@ describe( 'LinkFormView', () => {
 			expect( view._unboundChildren.get( 3 ) ).to.equal( view.unlinkButtonView );
 		} );
 
+		it( 'should create #focusTracker instance', () => {
+			expect( view.focusTracker ).to.be.instanceOf( FocusTracker );
+		} );
+
+		it( 'should create #keystrokes instance', () => {
+			expect( view.keystrokes ).to.be.instanceOf( KeystrokeHandler );
+		} );
+
+		it( 'should create #_focusCycler instance', () => {
+			expect( view._focusCycler ).to.be.instanceOf( FocusCycler );
+		} );
+
+		it( 'should create #_focusables view collection', () => {
+			expect( view._focusables ).to.be.instanceOf( ViewCollection );
+		} );
+
+		it( 'should register child views in #_focusables', () => {
+			expect( view._focusables.map( f => f ) ).to.have.members( [
+				view.urlInputView,
+				view.saveButtonView,
+				view.cancelButtonView,
+				view.unlinkButtonView
+			] );
+		} );
+
+		it( 'should register child views\' #element in #focusTracker', () => {
+			const spy = testUtils.sinon.spy( FocusTracker.prototype, 'add' );
+
+			view = new LinkFormView( { t: () => {} } );
+
+			sinon.assert.calledWithExactly( spy.getCall( 0 ), view.urlInputView.element );
+			sinon.assert.calledWithExactly( spy.getCall( 1 ), view.saveButtonView.element );
+			sinon.assert.calledWithExactly( spy.getCall( 2 ), view.cancelButtonView.element );
+			sinon.assert.calledWithExactly( spy.getCall( 3 ), view.unlinkButtonView.element );
+		} );
+
+		it( 'should register child views as children', () => {
+			const spy = testUtils.sinon.spy( LinkFormView.prototype, 'addChildren' );
+
+			view = new LinkFormView( { t: () => {} } );
+
+			sinon.assert.calledWithExactly( spy, [
+				view.urlInputView,
+				view.saveButtonView,
+				view.cancelButtonView,
+				view.unlinkButtonView
+			] );
+		} );
+
 		it( 'should fire `cancel` event on cancelButtonView#execute', () => {
 			const spy = sinon.spy();
 
@@ -71,6 +128,60 @@ describe( 'LinkFormView', () => {
 		} );
 	} );
 
+	describe( 'init()', () => {
+		it( 'starts listening for #keystrokes coming from #element', () => {
+			view = new LinkFormView( { t: () => {} } );
+
+			const spy = sinon.spy( view.keystrokes, 'listenTo' );
+
+			return view.init().then( () => {
+				sinon.assert.calledOnce( spy );
+				sinon.assert.calledWithExactly( spy, view.element );
+			} );
+		} );
+
+		describe( 'activates keyboard navigation for the toolbar', () => {
+			it( 'so "tab" the next focusable item', () => {
+				const keyEvtData = {
+					keyCode: keyCodes.tab,
+					preventDefault: sinon.spy(),
+					stopPropagation: sinon.spy()
+				};
+
+				// Mock the url input is focused.
+				view.focusTracker.isFocused = true;
+				view.focusTracker.focusedElement = view.urlInputView.element;
+
+				const spy = sinon.spy( view.saveButtonView, '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()
+				};
+
+				// Mock the cancel button is focused.
+				view.focusTracker.isFocused = true;
+				view.focusTracker.focusedElement = view.cancelButtonView.element;
+
+				const spy = sinon.spy( view.saveButtonView, 'focus' );
+
+				view.keystrokes.press( keyEvtData );
+				sinon.assert.calledOnce( keyEvtData.preventDefault );
+				sinon.assert.calledOnce( keyEvtData.stopPropagation );
+				sinon.assert.calledOnce( spy );
+			} );
+		} );
+	} );
+
 	describe( 'DOM bindings', () => {
 		describe( 'submit event', () => {
 			it( 'should trigger submit event', () => {
@@ -83,4 +194,14 @@ describe( 'LinkFormView', () => {
 			} );
 		} );
 	} );
+
+	describe( 'focus()', () => {
+		it( 'focuses the #urlInputView', () => {
+			const spy = sinon.spy( view.urlInputView, 'focus' );
+
+			view.focus();
+
+			sinon.assert.calledOnce( spy );
+		} );
+	} );
 } );