Merge pull request #11869 from ckeditor/ck/5581-toolbar-button-toolti…

…ps-for-keyboard-users

Fix (toolbar): Added a toolbar button tooltip when focused improving accessibility for keyboard users. Closes #5581.

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

@@ -3,7 +3,7 @@
  * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
  */
 
-/* globals Event */
+/* globals Event, document, getComputedStyle */
 
 import testUtils from '@ckeditor/ckeditor5-core/tests/_utils/utils';
 import ButtonView from '../../src/button/buttonview';
@@ -12,6 +12,7 @@ import TooltipView from '../../src/tooltip/tooltipview';
 import View from '../../src/view';
 import ViewCollection from '../../src/viewcollection';
 import env from '@ckeditor/ckeditor5-utils/src/env';
+import ToolbarView from '../../src/toolbar/toolbarview';
 
 describe( 'ButtonView', () => {
 	let locale, view;
@@ -412,4 +413,31 @@ describe( 'ButtonView', () => {
 			sinon.assert.calledOnce( spy );
 		} );
 	} );
+
+	describe( 'Tooltip in toolbar button', () => {
+		let toolbar;
+
+		beforeEach( () => {
+			toolbar = new ToolbarView( locale );
+			toolbar.render();
+			document.body.append( toolbar.element );
+		} );
+
+		afterEach( () => {
+			toolbar.element.remove();
+			toolbar.destroy();
+		} );
+
+		it( 'is displayed when the button is focused', () => {
+			toolbar.items.add( view );
+
+			const tooltip = view.element.children[ 0 ];
+
+			expect( getComputedStyle( tooltip ).visibility ).to.equal( 'hidden' );
+
+			view.focus();
+
+			expect( getComputedStyle( tooltip ).visibility ).to.equal( 'visible' );
+		} );
+	} );
 } );

packages/ckeditor5-ui/theme/components/button/button.css

@@ -31,12 +31,9 @@ a.ck.ck-button {
 		justify-content: center;
 	}
 
-	&:hover {
+	&:hover,
+	/* Enable toolbar button tooltips for keyboard users too. See https://github.com/ckeditor/ckeditor5/issues/5581. */
+	&:focus {
 		@mixin ck-tooltip_visible;
 	}
-
-	/* Get rid of the native focus outline around the tooltip when focused (but not :hover). */
-	&:focus:not(:hover) {
-		@mixin ck-tooltip_disabled;
-	}
 }