Преглед на файлове

Merge branch 'master' into t/ckeditor5-table/12

Piotrek Koszuliński преди 7 години
родител
ревизия
a0c38fca47

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

@@ -11,6 +11,7 @@ import View from '../view';
 import IconView from '../icon/iconview';
 import TooltipView from '../tooltip/tooltipview';
 
+import uid from '@ckeditor/ckeditor5-utils/src/uid';
 import { getEnvKeystrokeText } from '@ckeditor/ckeditor5-utils/src/keyboard';
 
 import '../../theme/components/button/button.css';
@@ -42,6 +43,7 @@ export default class ButtonView extends View {
 		super( locale );
 
 		const bind = this.bindTemplate;
+		const ariaLabelUid = uid();
 
 		// Implement the Button interface.
 		this.set( 'icon' );
@@ -78,7 +80,7 @@ export default class ButtonView extends View {
 		 * @readonly
 		 * @member {module:ui/view~View} #labelView
 		 */
-		this.labelView = this._createLabelView();
+		this.labelView = this._createLabelView( ariaLabelUid );
 
 		/**
 		 * The icon view of the button. Will be added to {@link #children} when the
@@ -124,7 +126,10 @@ export default class ButtonView extends View {
 					bind.if( 'withText', 'ck-button_with-text' )
 				],
 				type: bind.to( 'type', value => value ? value : 'button' ),
-				tabindex: bind.to( 'tabindex' )
+				tabindex: bind.to( 'tabindex' ),
+				'aria-labelledby': `ck-editor__aria-label_${ ariaLabelUid }`,
+				'aria-disabled': bind.if( 'isEnabled', true, value => !value ),
+				'aria-pressed': bind.if( 'isOn', true )
 			},
 
 			children: this.children,
@@ -191,9 +196,10 @@ export default class ButtonView extends View {
 	 * Creates a label view instance and binds it with button attributes.
 	 *
 	 * @private
+	 * @param {String} ariaLabelUid The aria label UID.
 	 * @returns {module:ui/view~View}
 	 */
-	_createLabelView() {
+	_createLabelView( ariaLabelUid ) {
 		const labelView = new View();
 
 		labelView.setTemplate( {
@@ -203,7 +209,8 @@ export default class ButtonView extends View {
 				class: [
 					'ck',
 					'ck-button__label'
-				]
+				],
+				id: `ck-editor__aria-label_${ ariaLabelUid }`,
 			},
 
 			children: [

+ 6 - 0
packages/ckeditor5-ui/src/dropdown/button/dropdownbuttonview.js

@@ -47,6 +47,12 @@ export default class DropdownButtonView extends ButtonView {
 		 */
 		this.arrowView = this._createArrowView();
 
+		this.extendTemplate( {
+			attributes: {
+				'aria-haspopup': true
+			}
+		} );
+
 		// The DropdownButton interface expects the open event upon which will open the dropdown.
 		this.delegate( 'execute' ).to( this, 'open' );
 	}

+ 2 - 1
packages/ckeditor5-ui/src/dropdown/button/splitbuttonview.js

@@ -207,7 +207,8 @@ export default class SplitButtonView extends View {
 
 		arrowView.extendTemplate( {
 			attributes: {
-				class: 'ck-splitbutton__arrow'
+				class: 'ck-splitbutton__arrow',
+				'aria-haspopup': true
 			}
 		} );
 

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

@@ -213,6 +213,30 @@ describe( 'ButtonView', () => {
 			} );
 		} );
 
+		describe( 'aria', () => {
+			it( '-labelledby is set', () => {
+				expect( view.element.attributes[ 'aria-labelledby' ].value )
+					.to.equal( view.element.lastChild.id )
+					.to.match( /^ck-editor__aria-label_\w+$/ );
+			} );
+
+			it( '-disabled reacts to #isEnabled', () => {
+				view.isEnabled = true;
+				expect( view.element.attributes[ 'aria-disabled' ] ).to.be.undefined;
+
+				view.isEnabled = false;
+				expect( view.element.attributes[ 'aria-disabled' ].value ).to.equal( 'true' );
+			} );
+
+			it( '-pressed reacts to #isOn', () => {
+				view.isOn = true;
+				expect( view.element.attributes[ 'aria-pressed' ].value ).to.equal( 'true' );
+
+				view.isOn = false;
+				expect( view.element.attributes[ 'aria-pressed' ] ).to.be.undefined;
+			} );
+		} );
+
 		describe( 'mousedown event', () => {
 			it( 'should be prevented', () => {
 				const ret = view.element.dispatchEvent( new Event( 'mousedown', { cancelable: true } ) );

+ 1 - 0
packages/ckeditor5-ui/tests/dropdown/button/dropdownbuttonview.js

@@ -30,6 +30,7 @@ describe( 'DropdownButtonView', () => {
 
 		it( 'creates element from template', () => {
 			expect( view.element.tagName ).to.equal( 'BUTTON' );
+			expect( view.element.attributes[ 'aria-haspopup' ].value ).to.equal( 'true' );
 		} );
 	} );
 

+ 1 - 0
packages/ckeditor5-ui/tests/dropdown/button/splitbuttonview.js

@@ -33,6 +33,7 @@ describe( 'SplitButtonView', () => {
 		it( 'creates view#arrowView', () => {
 			expect( view.arrowView ).to.be.instanceOf( ButtonView );
 			expect( view.arrowView.element.classList.contains( 'ck-splitbutton__arrow' ) ).to.be.true;
+			expect( view.arrowView.element.attributes[ 'aria-haspopup' ].value ).to.equal( 'true' );
 			expect( view.arrowView.icon ).to.be.not.undefined;
 		} );