8
0
Эх сурвалжийг харах

Provide toggleable observable to button interface. Include it in switchbutton constructor. Correct unit test related to chanegs.

Mateusz Samsel 6 жил өмнө
parent
commit
ac77d77e44

+ 8 - 0
packages/ckeditor5-ui/src/button/button.jsdoc

@@ -95,6 +95,14 @@
  * @member {Boolean} #isVisible
  * @member {Boolean} #isVisible
  */
  */
 
 
+/**
+ * Controls whether the button view is recognized as toggle button for assistive technologies.
+ *
+ * @observable
+ * @default false
+ * @member {Boolean} #isToggleable
+ */
+
 /**
 /**
  * (Optional) Controls whether the label of the button is hidden (e.g. an icon–only button).
  * (Optional) Controls whether the label of the button is hidden (e.g. an icon–only button).
  *
  *

+ 4 - 10
packages/ckeditor5-ui/src/button/buttonview.js

@@ -45,7 +45,7 @@ export default class ButtonView extends View {
 	 * @param {Object} [config] additional configuration
 	 * @param {Object} [config] additional configuration
 	 * @param {Boolean} [config.toggle=false] set button as a toggle
 	 * @param {Boolean} [config.toggle=false] set button as a toggle
 	 */
 	 */
-	constructor( locale, { toggle = false } = {} ) {
+	constructor( locale ) {
 		super( locale );
 		super( locale );
 
 
 		const bind = this.bindTemplate;
 		const bind = this.bindTemplate;
@@ -58,6 +58,7 @@ export default class ButtonView extends View {
 		this.set( 'isEnabled', true );
 		this.set( 'isEnabled', true );
 		this.set( 'isOn', false );
 		this.set( 'isOn', false );
 		this.set( 'isVisible', true );
 		this.set( 'isVisible', true );
+		this.set( 'isToggleable', false );
 		this.set( 'keystroke' );
 		this.set( 'keystroke' );
 		this.set( 'label' );
 		this.set( 'label' );
 		this.set( 'tabindex', -1 );
 		this.set( 'tabindex', -1 );
@@ -137,7 +138,8 @@ export default class ButtonView extends View {
 				type: bind.to( 'type', value => value ? value : 'button' ),
 				type: bind.to( 'type', value => value ? value : 'button' ),
 				tabindex: bind.to( 'tabindex' ),
 				tabindex: bind.to( 'tabindex' ),
 				'aria-labelledby': `ck-editor__aria-label_${ ariaLabelUid }`,
 				'aria-labelledby': `ck-editor__aria-label_${ ariaLabelUid }`,
-				'aria-disabled': bind.if( 'isEnabled', true, value => !value )
+				'aria-disabled': bind.if( 'isEnabled', true, value => !value ),
+				'aria-pressed': bind.to( 'isOn', value => this.isToggleable ? String( value ) : false )
 			},
 			},
 
 
 			children: this.children,
 			children: this.children,
@@ -160,14 +162,6 @@ export default class ButtonView extends View {
 				} )
 				} )
 			}
 			}
 		} );
 		} );
-
-		if ( toggle ) {
-			this.extendTemplate( {
-				attributes: {
-					'aria-pressed': bind.to( 'isOn', value => value ? 'true' : 'false' )
-				}
-			} );
-		}
 	}
 	}
 
 
 	/**
 	/**

+ 9 - 0
packages/ckeditor5-ui/src/button/switchbuttonview.js

@@ -43,6 +43,15 @@ export default class SwitchButtonView extends ButtonView {
 		 */
 		 */
 		this.toggleSwitchView = this._createToggleView();
 		this.toggleSwitchView = this._createToggleView();
 
 
+		/**
+		 * Controls whether the button view is recognized as toggle button for assistive technologies.
+		 *
+		 * @observable
+		 * @default true
+		 * @member {Boolean} #isToggleable
+		 */
+		this.isToggleable = true;
+
 		this.extendTemplate( {
 		this.extendTemplate( {
 			attributes: {
 			attributes: {
 				class: 'ck-switchbutton'
 				class: 'ck-switchbutton'

+ 9 - 0
packages/ckeditor5-ui/tests/button/buttonview.js

@@ -245,12 +245,21 @@ describe( 'ButtonView', () => {
 			} );
 			} );
 
 
 			it( '-pressed reacts to #isOn', () => {
 			it( '-pressed reacts to #isOn', () => {
+				view.isToggleable = true;
 				view.isOn = true;
 				view.isOn = true;
 				expect( view.element.attributes[ 'aria-pressed' ].value ).to.equal( 'true' );
 				expect( view.element.attributes[ 'aria-pressed' ].value ).to.equal( 'true' );
 
 
 				view.isOn = false;
 				view.isOn = false;
 				expect( view.element.attributes[ 'aria-pressed' ].value ).to.equal( 'false' );
 				expect( view.element.attributes[ 'aria-pressed' ].value ).to.equal( 'false' );
 			} );
 			} );
+
+			it( '-pressed is not present for not toggleable button', () => {
+				view.isOn = true;
+				expect( view.element.hasAttribute( 'aria-pressed' ) ).to.be.false;
+
+				view.isOn = false;
+				expect( view.element.hasAttribute( 'aria-pressed' ) ).to.be.false;
+			} );
 		} );
 		} );
 
 
 		describe( 'mousedown event', () => {
 		describe( 'mousedown event', () => {

+ 4 - 0
packages/ckeditor5-ui/tests/button/switchbuttonview.js

@@ -24,6 +24,10 @@ describe( 'SwitchButtonView', () => {
 		it( 'sets CSS class', () => {
 		it( 'sets CSS class', () => {
 			expect( view.element.classList.contains( 'ck-switchbutton' ) ).to.be.true;
 			expect( view.element.classList.contains( 'ck-switchbutton' ) ).to.be.true;
 		} );
 		} );
+
+		it( 'sets isToggleable flag to true', () => {
+			expect( view.isToggleable ).to.be.true;
+		} );
 	} );
 	} );
 
 
 	describe( 'render', () => {
 	describe( 'render', () => {