Merge pull request #287 from ckeditor/i/6497

Fix: Added missing tooltips to the table and table cell properties buttons. Closes ckeditor/ckeditor5#6497.

lang/contexts.json

@@ -53,5 +53,6 @@
 	"Center table": "The label used by assistive technologies describing a button that centers the table.",
 	"Align table to the right": "The label used by assistive technologies describing a button that aligns the table to the right.",
 	"The color is invalid. Try \"#FF0000\" or \"rgb(255,0,0)\" or \"red\".": "The localized error string that can be displayed next to color (background, border) fields that have an invalid value",
-	"The value is invalid. Try \"10px\" or \"2em\" or simply \"2\".": "The localized error string that can be displayed next to length (padding, border width) fields that have an invalid value."
+	"The value is invalid. Try \"10px\" or \"2em\" or simply \"2\".": "The localized error string that can be displayed next to length (padding, border width) fields that have an invalid value.",
+	"Color picker": "The label used by assistive technologies describing a button that opens a color picker, where user can choose a configured color for a certain properties (eg.: background color, color, border-color etc.)."
 }

src/ui/colorinputview.js

@@ -138,6 +138,7 @@ export default class ColorInputView extends View {
 	 */
 	_createDropdownView() {
 		const locale = this.locale;
+		const t = locale.t;
 		const bind = this.bindTemplate;
 		const colorGrid = this._createColorGrid( locale );
 		const dropdown = createDropdown( locale );
@@ -174,6 +175,7 @@ export default class ColorInputView extends View {
 		} );
 
 		dropdown.buttonView.children.add( colorPreview );
+		dropdown.buttonView.tooltip = t( 'Color picker' );
 
 		dropdown.panelPosition = locale.uiLanguageDirection === 'rtl' ? 'se' : 'sw';
 		dropdown.panelView.children.add( removeColorButton );

src/ui/utils.js

@@ -256,7 +256,8 @@ export function fillToolbar( { view, icons, toolbar, labels, propertyName, nameT
 
 		button.set( {
 			label: labels[ name ],
-			icon: icons[ name ]
+			icon: icons[ name ],
+			tooltip: labels[ name ]
 		} );
 
 		button.bind( 'isOn' ).to( view, propertyName, value => {

tests/ui/colorinputview.js

@@ -73,6 +73,7 @@ describe( 'ColorInputView', () => {
 			it( 'should be created', () => {
 				expect( view._dropdownView ).to.be.instanceOf( DropdownView );
 				expect( view._dropdownView.buttonView.element.classList.contains( 'ck-input-color__button' ) ).to.be.true;
+				expect( view._dropdownView.buttonView.tooltip ).to.equal( 'Color picker' );
 			} );
 
 			it( 'should bind #isEnabled to the view\'s #isReadOnly', () => {

tests/ui/utils.js

@@ -518,6 +518,12 @@ describe( 'UI Utils', () => {
 			expect( toolbar.items.last.icon ).to.equal( icons.third );
 		} );
 
+		it( 'should set button tooltips', () => {
+			expect( toolbar.items.first.tooltip ).to.equal( labels.first );
+			expect( toolbar.items.get( 1 ).tooltip ).to.equal( labels.second );
+			expect( toolbar.items.last.tooltip ).to.equal( labels.third );
+		} );
+
 		it( 'should bind button #isOn to an observable property', () => {
 			expect( toolbar.items.first.isOn ).to.be.false;
 			expect( toolbar.items.get( 1 ).isOn ).to.be.false;