8
0
Просмотр исходного кода

Implemented the aria-expanded attribute support on the SplitButtonView#arrowView element.

Aleksander Nowodzinski 6 лет назад
Родитель
Сommit
edafeef6b2

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

@@ -204,13 +204,15 @@ export default class SplitButtonView extends View {
 	 */
 	 */
 	_createArrowView() {
 	_createArrowView() {
 		const arrowView = new ButtonView();
 		const arrowView = new ButtonView();
+		const bind = arrowView.bindTemplate;
 
 
 		arrowView.icon = dropdownArrowIcon;
 		arrowView.icon = dropdownArrowIcon;
 
 
 		arrowView.extendTemplate( {
 		arrowView.extendTemplate( {
 			attributes: {
 			attributes: {
 				class: 'ck-splitbutton__arrow',
 				class: 'ck-splitbutton__arrow',
-				'aria-haspopup': true
+				'aria-haspopup': true,
+				'aria-expanded': bind.to( 'isOn', value => String( value ) )
 			}
 			}
 		} );
 		} );
 
 

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

@@ -70,6 +70,14 @@ describe( 'SplitButtonView', () => {
 			expect( view.element.classList.contains( 'ck-splitbutton_open' ) ).to.be.false;
 			expect( view.element.classList.contains( 'ck-splitbutton_open' ) ).to.be.false;
 		} );
 		} );
 
 
+		it( 'binds arrowView aria-expanded attribute to #isOn', () => {
+			view.arrowView.isOn = true;
+			expect( view.arrowView.element.getAttribute( 'aria-expanded' ) ).to.equal( 'true' );
+
+			view.arrowView.isOn = false;
+			expect( view.arrowView.element.getAttribute( 'aria-expanded' ) ).to.equal( 'false' );
+		} );
+
 		describe( 'activates keyboard navigation for the toolbar', () => {
 		describe( 'activates keyboard navigation for the toolbar', () => {
 			it( 'so "arrowright" on view#arrowView does nothing', () => {
 			it( 'so "arrowright" on view#arrowView does nothing', () => {
 				const keyEvtData = {
 				const keyEvtData = {