Move the [aria-expanded] logic tp the menubutton and `panelbutton…

…` plugins.
ckeditor · Jul 9, 2022 · 045b727 · 045b727
1 parent d64605a
commit 045b727
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 3 deletions.
diff --git a/plugins/button/plugin.js b/plugins/button/plugin.js
@@ -15,6 +15,7 @@
 		' aria-describedby="{id}_description"' +
 		' aria-haspopup="{hasArrow}"' +
 		' aria-disabled="{ariaDisabled}"' +
+		'{hasArrowAriaHtml}' +
 		'{toggleAriaHtml}';
 
 	// Some browsers don't cancel key events in the keydown but in the
@@ -311,6 +312,7 @@
 				clickFn: clickFn,
 				style: CKEDITOR.skin.getIconStyle( iconPath, ( editor.lang.dir == 'rtl' ), overridePath, this.iconOffset ),
 				arrowHtml: this.hasArrow ? btnArrowTpl.output() : '',
+				hasArrowAriaHtml: this.hasArrow ? ' aria-expanded="false"' : '',
 				toggleAriaHtml: this.isToggle ? 'aria-pressed="false"' : ''
 			};
 
@@ -344,9 +346,6 @@
 					// Note: aria-pressed attribute should not be added to menuButton instances. (https://dev.ckeditor.com/ticket/11331).
 					// For other buttons, do not remove the attribute, instead set its value (#2444).
 					element.setAttribute( 'aria-pressed', state === CKEDITOR.TRISTATE_ON );
-				} else if ( this.hasArrow ) {
-					// Indicates that menu button is opened (#421).
-					element.setAttribute( 'aria-expanded', state == CKEDITOR.TRISTATE_ON );
 				}
 
 				return true;

diff --git a/plugins/menubutton/plugin.js b/plugins/menubutton/plugin.js
@@ -8,6 +8,7 @@ CKEDITOR.plugins.add( 'menubutton', {
 	onLoad: function() {
 		var clickFn = function( editor ) {
 				var _ = this._,
+					buttonElement = CKEDITOR.document.getById( _.id ),
 					menu = _.menu;
 
 				// Do nothing if this button is disabled.
@@ -34,6 +35,9 @@ CKEDITOR.plugins.add( 'menubutton', {
 						var modes = this.command ? editor.getCommand( this.command ).modes : this.modes;
 						this.setState( !modes || modes[ editor.mode ] ? _.previousState : CKEDITOR.TRISTATE_DISABLED );
 						_.on = 0;
+
+						// Indicates that menu button is closed (#421, #5144).
+						buttonElement.setAttribute( 'aria-expanded', 'false' );
 					}, this );
 
 					// Initialize the menu items at this point.
@@ -44,6 +48,9 @@ CKEDITOR.plugins.add( 'menubutton', {
 				this.setState( CKEDITOR.TRISTATE_ON );
 				_.on = 1;
 
+				// Indicates that menu button is open (#421, #5144).
+				buttonElement.setAttribute( 'aria-expanded', 'true' );
+
 				// This timeout is needed to give time for the panel get focus
 				// when JAWS is running. (https://dev.ckeditor.com/ticket/9842)
 				setTimeout( function() {

diff --git a/plugins/panelbutton/plugin.js b/plugins/panelbutton/plugin.js
@@ -78,6 +78,7 @@ CKEDITOR.plugins.add( 'panelbutton', {
 					var panelDefinition = this._.panelDefinition,
 						panelBlockDefinition = this._.panelDefinition.block,
 						panelParentElement = panelDefinition.parent || CKEDITOR.document.getBody(),
+						buttonElement = CKEDITOR.document.getById( this._.id ),
 						panel = this._.panel = new CKEDITOR.ui.floatPanel( editor, panelParentElement, panelDefinition ),
 						block = panel.addBlock( _.id, panelBlockDefinition ),
 						me = this,
@@ -90,6 +91,9 @@ CKEDITOR.plugins.add( 'panelbutton', {
 
 						me.setState( CKEDITOR.TRISTATE_ON );
 
+						// Indicates that panel button is open (#421, #5144).
+						buttonElement.setAttribute( 'aria-expanded', 'true' );
+
 						_.on = 1;
 
 						me.editorFocus && editor.focus();
@@ -113,6 +117,9 @@ CKEDITOR.plugins.add( 'panelbutton', {
 
 						_.on = 0;
 
+						// Indicates that panel button is closed (#421, #5144).
+						buttonElement.setAttribute( 'aria-expanded', 'false' );
+
 						if ( !preventOnClose && me.onClose ) {
 							me.onClose();
 						}