Merge pull request #128 from ckeditor/t/ckeditor5/1403

Fix: The UI buttons should be marked as toggleable for better assistive technologies support (see ckeditor/ckeditor5#1403).
ckeditor · Aug 12, 2019 · 5c41c1a · 5c41c1a
2 parents 94cfdff + 1476735
commit 5c41c1a
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 0 deletions.
diff --git a/src/headingbuttonsui.js b/src/headingbuttonsui.js
@@ -88,6 +88,7 @@ export default class HeadingButtonsUI extends Plugin {
 			view.label = option.title;
 			view.icon = option.icon || defaultIcons[ option.model ];
 			view.tooltip = true;
+			view.isToggleable = true;
 			view.bind( 'isEnabled' ).to( command );
 			view.bind( 'isOn' ).to( command, 'value', value => value == option.model );
 

diff --git a/tests/headingbuttonsui.js b/tests/headingbuttonsui.js
@@ -99,6 +99,17 @@ describe( 'HeadingButtonUI', () => {
 			sinon.assert.calledOnce( executeCommandSpy );
 			sinon.assert.calledWithExactly( executeCommandSpy, 'heading', { value: 'heading1' } );
 		} );
+
+		it( 'should be initialized as toggleable button', () => {
+			const factory = editor.ui.componentFactory;
+
+			expect( factory.create( 'heading1' ).isToggleable ).to.be.true;
+			expect( factory.create( 'heading2' ).isToggleable ).to.be.true;
+			expect( factory.create( 'heading3' ).isToggleable ).to.be.true;
+			expect( factory.create( 'heading4' ).isToggleable ).to.be.true;
+			expect( factory.create( 'heading5' ).isToggleable ).to.be.true;
+			expect( factory.create( 'heading6' ).isToggleable ).to.be.true;
+		} );
 	} );
 
 	describe( 'custom config', () => {