Răsfoiți Sursa

Implemented arrowdown keystroke to focus the fist list item and arrowup to focus the last list item in createListDropdown() helper.

Aleksander Nowodzinski 9 ani în urmă
părinte
comite
1ee72b1334

+ 18 - 0
packages/ckeditor5-ui/src/dropdown/list/createlistdropdown.js

@@ -53,6 +53,24 @@ export default function createListDropdown( model, locale ) {
 		dropdownView.isOpen = false;
 	} );
 
+	// If the dropdown panel is already open, the arrow down key should
+	// focus the first element in list.
+	dropdownView.keystrokes.set( 'arrowdown', ( data, cancel ) => {
+		if ( dropdownView.isOpen ) {
+			listView.focus();
+			cancel();
+		}
+	} );
+
+	// If the dropdown panel is already open, the arrow down key should
+	// focus the last element in the list.
+	dropdownView.keystrokes.set( 'arrowup', ( data, cancel ) => {
+		if ( dropdownView.isOpen ) {
+			listView.focusLast();
+			cancel();
+		}
+	} );
+
 	return dropdownView;
 }
 

+ 37 - 0
packages/ckeditor5-ui/tests/dropdown/list/createlistdropdown.js

@@ -10,6 +10,7 @@ import createListDropdown from 'ckeditor5-ui/src/dropdown/list/createlistdropdow
 import Collection from 'ckeditor5-utils/src/collection';
 import ListView from 'ckeditor5-ui/src/list/listview';
 import ListItemView from 'ckeditor5-ui/src/list/listitemview';
+import { keyCodes } from 'ckeditor5-utils/src/keyboard';
 
 describe( 'createListDropdown', () => {
 	let view, model, locale, items;
@@ -140,5 +141,41 @@ describe( 'createListDropdown', () => {
 			// Dropdown is still open.
 			expect( view.isOpen ).to.be.true;
 		} );
+
+		describe( 'activates keyboard navigation for the dropdown', () => {
+			it( 'so "arrowdown" focuses the #listView if dropdown is open', () => {
+				const keyEvtData = {
+					keyCode: keyCodes.arrowdown,
+					preventDefault: sinon.spy(),
+					stopPropagation: sinon.spy()
+				};
+				const spy = sinon.spy( view.listView, 'focus' );
+
+				view.isOpen = false;
+				view.keystrokes.press( keyEvtData );
+				sinon.assert.notCalled( spy );
+
+				view.isOpen = true;
+				view.keystrokes.press( keyEvtData );
+				sinon.assert.calledOnce( spy );
+			} );
+
+			it( 'so "arrowup" focuses the last #item in #listView if dropdown is open', () => {
+				const keyEvtData = {
+					keyCode: keyCodes.arrowup,
+					preventDefault: sinon.spy(),
+					stopPropagation: sinon.spy()
+				};
+				const spy = sinon.spy( view.listView, 'focusLast' );
+
+				view.isOpen = false;
+				view.keystrokes.press( keyEvtData );
+				sinon.assert.notCalled( spy );
+
+				view.isOpen = true;
+				view.keystrokes.press( keyEvtData );
+				sinon.assert.calledOnce( spy );
+			} );
+		} );
 	} );
 } );