Implemented focusing first item after opening a dropdown

packages/ckeditor5-alignment/src/alignmentui.js

@@ -79,7 +79,7 @@ export default class AlignmentUI extends Plugin {
 
 			// Add existing alignment buttons to dropdown's toolbar.
 			const buttons = options.map( option => componentFactory.create( `alignment:${ option.name }` ) );
-			addToolbarToDropdown( dropdownView, buttons );
+			addToolbarToDropdown( dropdownView, buttons, { enableActiveItemFocusOnDropdownOpen: true } );
 
 			// Configure dropdown properties an behavior.
 			dropdownView.buttonView.set( {

packages/ckeditor5-alignment/tests/alignmentui.js

@@ -259,6 +259,17 @@ describe( 'Alignment UI', () => {
 			expect( items.includes( 'Justify' ) ).to.be.true;
 		} );
 
+		it( 'should focus the first active button when dropdown is opened', () => {
+			const buttonAlignLeft = dropdown.toolbarView.items.get( 0 );
+			const buttonAlignRight = dropdown.toolbarView.items.get( 1 );
+			const spy = sinon.spy( buttonAlignRight, 'focus' );
+
+			buttonAlignLeft.isOn = false;
+			buttonAlignRight.isOn = true;
+			dropdown.isOpen = true;
+			sinon.assert.calledOnce( spy );
+		} );
+
 		describe( 'config', () => {
 			beforeEach( async () => {
 				// Clean up the editor created in main test suite hook.

packages/ckeditor5-font/src/ui/colorui.js

@@ -8,7 +8,7 @@
  */
 
 import { Plugin } from 'ckeditor5/src/core';
-import { createDropdown, normalizeColorOptions, getLocalizedColorOptions } from 'ckeditor5/src/ui';
+import { createDropdown, normalizeColorOptions, getLocalizedColorOptions, focusChildOnDropdownOpen } from 'ckeditor5/src/ui';
 
 import { addColorTableToDropdown } from '../utils';
 
@@ -141,6 +141,9 @@ export default class ColorUI extends Plugin {
 				}
 			} );
 
+			// Accessibility: focus the first active color when opening the dropdown.
+			focusChildOnDropdownOpen( dropdownView, () => dropdownView.colorTableView.staticColorsGrid.items.find( item => item.isOn ) );
+
 			return dropdownView;
 		} );
 	}

packages/ckeditor5-font/tests/ui/colorui.js

@@ -163,6 +163,20 @@ describe( 'ColorUI', () => {
 			}
 		} );
 
+		it( 'should focus the first active button when dropdown is opened', () => {
+			global.document.body.appendChild( dropdown.element );
+
+			const secondButton = dropdown.colorTableView.staticColorsGrid.items.get( 1 );
+			const spy = sinon.spy( secondButton, 'focus' );
+
+			secondButton.isOn = true;
+			dropdown.isOpen = false;
+			dropdown.isOpen = true;
+			sinon.assert.calledOnce( spy );
+
+			dropdown.element.remove();
+		} );
+
 		describe( 'model to command binding', () => {
 			it( 'isEnabled', () => {
 				command.isEnabled = false;

packages/ckeditor5-highlight/src/highlightui.js

@@ -219,7 +219,7 @@ export default class HighlightUI extends Plugin {
 			buttons.push( new ToolbarSeparatorView() );
 			buttons.push( componentFactory.create( 'removeHighlight' ) );
 
-			addToolbarToDropdown( dropdownView, buttons );
+			addToolbarToDropdown( dropdownView, buttons, { enableActiveItemFocusOnDropdownOpen: true } );
 			bindToolbarIconStyleToActiveColor( dropdownView );
 
 			dropdownView.toolbarView.ariaLabel = t( 'Text highlight toolbar' );

packages/ckeditor5-highlight/tests/highlightui.js

@@ -132,6 +132,15 @@ describe( 'HighlightUI', () => {
 				.to.deep.equal( [ false, true, false, false, false, false, undefined, false ] );
 		} );
 
+		it( 'should focus the first active button when dropdown is opened', () => {
+			const greenMarker = dropdown.toolbarView.items.get( 1 );
+			const spy = sinon.spy( greenMarker, 'focus' );
+
+			greenMarker.isOn = true;
+			dropdown.isOpen = true;
+			sinon.assert.calledOnce( spy );
+		} );
+
 		it( 'should mark as toggleable all markers and pens', () => {
 			const toolbar = dropdown.toolbarView;
 

packages/ckeditor5-image/src/imageinsert/imageinsertui.js

@@ -130,8 +130,6 @@ export default class ImageInsertUI extends Plugin {
 			const selectedElement = editor.model.document.selection.getSelectedElement();
 
 			if ( dropdownView.isOpen ) {
-				imageInsertView.focus();
-
 				if ( imageUtils.isImage( selectedElement ) ) {
 					imageInsertView.imageURLInputValue = selectedElement.getAttribute( 'src' );
 					insertButtonView.label = t( 'Update' );

packages/ckeditor5-image/src/imagestyle/imagestyleui.js

@@ -131,7 +131,7 @@ export default class ImageStyleUI extends Plugin {
 			const splitButtonView = dropdownView.buttonView;
 			const splitButtonViewArrow = splitButtonView.arrowView;
 
-			addToolbarToDropdown( dropdownView, buttonViews );
+			addToolbarToDropdown( dropdownView, buttonViews, { enableActiveItemFocusOnDropdownOpen: true } );
 
 			splitButtonView.set( {
 				label: getDropdownButtonTitle( title, defaultButton.label ),

packages/ckeditor5-image/tests/imagestyle/imagestyleui.js

@@ -260,6 +260,17 @@ describe( 'ImageStyleUI', () => {
 			}
 		} );
 
+		it( 'should focus the first active button when dropdown is opened', () => {
+			for ( const { view } of dropdowns ) {
+				const secondButton = view.toolbarView.items.get( 1 );
+				const spy = sinon.spy( secondButton, 'focus' );
+
+				secondButton.isOn = true;
+				view.isOpen = true;
+				sinon.assert.calledOnce( spy );
+			}
+		} );
+
 		it( 'should keep the same label of the secondary (arrow) button when the user changes styles of the image', () => {
 			const dropdownView = editor.ui.componentFactory.create( 'imageStyle:breakText' );
 

packages/ckeditor5-list/src/listproperties/listpropertiesui.js

@@ -8,7 +8,7 @@
  */
 
 import { Plugin } from 'ckeditor5/src/core';
-import { ButtonView, SplitButtonView, createDropdown } from 'ckeditor5/src/ui';
+import { ButtonView, SplitButtonView, createDropdown, focusChildOnDropdownOpen } from 'ckeditor5/src/ui';
 
 import ListPropertiesView from './ui/listpropertiesview';
 
@@ -184,6 +184,9 @@ function getDropdownViewCreator( { editor, parentCommandName, buttonLabel, butto
 
 		dropdownView.panelView.children.add( listPropertiesView );
 
+		// Accessibility: focus the first active style when opening the dropdown.
+		focusChildOnDropdownOpen( dropdownView, () => listPropertiesView.stylesView.children.find( child => child.isOn ) );
+
 		return dropdownView;
 	};
 }

packages/ckeditor5-list/tests/listproperties/listpropertiesui.js

@@ -268,6 +268,15 @@ describe( 'ListPropertiesUI', () => {
 					sinon.assert.calledOnce( spy );
 				} );
 
+				it( 'on dropdown open should focus the first active button', () => {
+					const button = stylesView.children.get( 1 );
+					const spy = sinon.spy( button, 'focus' );
+
+					button.isOn = true;
+					bulletedListDropdown.isOpen = true;
+					sinon.assert.calledOnce( spy );
+				} );
+
 				describe( 'style button', () => {
 					let styleButtonView;
 
@@ -558,6 +567,15 @@ describe( 'ListPropertiesUI', () => {
 					sinon.assert.calledOnce( spy );
 				} );
 
+				it( 'on dropdown open should focus the first active button', () => {
+					const button = stylesView.children.get( 1 );
+					const spy = sinon.spy( button, 'focus' );
+
+					button.isOn = true;
+					numberedListDropdown.isOpen = true;
+					sinon.assert.calledOnce( spy );
+				} );
+
 				describe( 'style button', () => {
 					let styleButtonView;
 

packages/ckeditor5-media-embed/src/mediaembedui.js

@@ -87,7 +87,6 @@ export default class MediaEmbedUI extends Plugin {
 			// command.
 			form.url = command.value || '';
 			form.urlInputView.fieldView.select();
-			form.focus();
 			form.enableCssTransitions();
 		}, { priority: 'low' } );
 

packages/ckeditor5-media-embed/tests/mediaembedui.js

@@ -121,13 +121,6 @@ describe( 'MediaEmbedUI', () => {
 					sinon.assert.calledOnce( spy );
 				} );
 
-				it( 'should focus the form', () => {
-					const spy = sinon.spy( form, 'focus' );
-
-					button.fire( 'open' );
-					sinon.assert.calledOnce( spy );
-				} );
-
 				it( 'should disable CSS transitions to avoid unnecessary animations (and then enable them again)', () => {
 					const disableCssTransitionsSpy = sinon.spy( form, 'disableCssTransitions' );
 					const enableCssTransitionsSpy = sinon.spy( form, 'enableCssTransitions' );

packages/ckeditor5-special-characters/src/ui/specialcharactersnavigationview.js

@@ -59,6 +59,13 @@ export default class SpecialCharactersNavigationView extends FormHeaderView {
 		return this.groupDropdownView.value;
 	}
 
+	/**
+	 * Focuses the character categories dropdown.
+	 */
+	focus() {
+		this.groupDropdownView.focus();
+	}
+
 	/**
 	 * Returns a dropdown that allows selecting character groups.
 	 *

packages/ckeditor5-special-characters/tests/ui/specialcharactersnavigationview.js

@@ -149,4 +149,14 @@ describe( 'SpecialCharactersNavigationView', () => {
 			} );
 		} );
 	} );
+
+	describe( 'focus()', () => {
+		it( 'focuses the character categories dropdown', () => {
+			const spy = sinon.spy( view.groupDropdownView, 'focus' );
+
+			view.focus();
+
+			sinon.assert.calledOnce( spy );
+		} );
+	} );
 } );

packages/ckeditor5-ui/src/button/buttonview.js

@@ -151,10 +151,6 @@ export default class ButtonView extends View {
 			children: this.children,
 
 			on: {
-				mousedown: bind.to( evt => {
-					evt.preventDefault();
-				} ),
-
 				click: bind.to( evt => {
 					// We can't make the button disabled using the disabled attribute, because it won't be focusable.
 					// Though, shouldn't this condition be moved to the button controller?

packages/ckeditor5-ui/src/dropdown/dropdownpanelview.js

@@ -8,6 +8,7 @@
  */
 
 import View from '../view';
+import { logWarning } from '@ckeditor/ckeditor5-utils/src/ckeditorerror';
 
 /**
  * The dropdown panel view class.
@@ -81,13 +82,32 @@ export default class DropdownPanelView extends View {
 	}
 
 	/**
-	 * Focuses the view element or first item in view collection on opening dropdown's panel.
+	 * Focuses the first view in the {@link #children} collection.
 	 *
 	 * See also {@link module:ui/dropdown/dropdownpanelfocusable~DropdownPanelFocusable}.
 	 */
 	focus() {
 		if ( this.children.length ) {
-			this.children.first.focus();
+			if ( typeof this.children.first.focus === 'function' ) {
+				this.children.first.focus();
+			} else {
+				/**
+				 * The child view of a dropdown could not be focused because it is missing the `focus()` method.
+				 *
+				 * This warning appears when a dropdown {@link module:ui/dropdown/dropdownview~DropdownView#isOpen gets open} and it
+				 * attempts to focus the {@link module:ui/dropdown/dropdownpanelview~DropdownPanelView#children first child} of its panel
+				 * but the child does not implement the
+				 * {@link module:ui/dropdown/dropdownpanelfocusable~DropdownPanelFocusable focusable interface}.
+				 *
+				 * Focusing the content of a dropdown on open greatly improves the accessibility. Please make sure the view instance
+				 * provides the `focus()` method for the best user experience.
+				 *
+				 * @error ui-dropdown-panel-focus-child-missing-focus
+				 * @param {module:ui/view~View} childView
+				 * @param {module:ui/dropdown/dropdownpanelview~DropdownPanelView} dropdownPanel
+				 */
+				logWarning( 'ui-dropdown-panel-focus-child-missing-focus', { childView: this.children.first, dropdownPanel: this } );
+			}
 		}
 	}
 

packages/ckeditor5-ui/src/dropdown/dropdownview.js

@@ -106,6 +106,10 @@ export default class DropdownView extends View {
 		/**
 		 * Controls whether the dropdown view is open, i.e. shows or hides the {@link #panelView panel}.
 		 *
+		 * **Note**: When the dropdown gets open, it will attempt to call `focus()` on the first child of its {@link #panelView}.
+		 * See {@link module:ui/dropdown/utils~addToolbarToDropdown}, {@link module:ui/dropdown/utils~addListToDropdown}, and
+		 * {@link module:ui/dropdown/utils~focusChildOnDropdownOpen} to learn more about focus management in dropdowns.
+		 *
 		 * @observable
 		 * @member {Boolean} #isOpen
 		 */
@@ -263,6 +267,9 @@ export default class DropdownView extends View {
 			} else {
 				this.panelView.position = this.panelPosition;
 			}
+
+			// Focus the first item in the dropdown when the dropdown opened
+			this.panelView.focus();
 		} );
 
 		// Listen for keystrokes coming from within #element.