MenuButton with label puts "(Selected)" at the end of the label when clicked

[Lynne Kues]

Steps to reproduce

1. Add a Menu Button to the toolbar, using the menubutton plugin.
2. Change the skin css to show the label for the button.
3. Open the editor and click on the menu button

Expected result

The menu button label should not change.

Actual result

The menu button label changes from 'Label' to 'Label (Selected)'.

[Tomasz Jakut]

I replaced code that was causing the change in label with [aria-expanded] attribute. Although it's not a part of ​authoring practices, it seems to be industry standard for such things (it's used by Bootstrap and ​Paypal).

Pushed ​branch:t/14237.

[Marek Lewandowski]

#12519 was marked as a DUP.

[Marek Lewandowski]

I've pushed some minor adjustments and rebased it to master.

Issue where the label was added is #11331. By going through it's history you can see that the problem was: we were looking for a way to tell that the menu button is pressed. And the problem was that adding aria-pressed was changing it into toggle button, read the source issue for more details.

aria-expanded does not solve this problem, we need to find a different way.

[Tomasz Jakut]

According to the ​ARIA specification, [aria-expanded] is a way to go:

Indicates whether the element, or another grouping element it controls, is currently expanded or collapsed.

Having this in mind, I've done some research taking ​dropdown buttons as reference. Their behavior seems to be the most user friendly in my opinion. If the focus is on one of them, JAWS announces it in the following manner:

<button's label> button menu collapsed/expanded.

This behavior is caused by adding [aria-expanded]. However after adding it to our CKE's button, I got:

<button's label> button menu. Press Space to activate the menu, then navigate with arrow keys.

I was really curious why the same behavior is not present in my fix, even if I use [aria-expanded]. So I've prepared ​some experiments and… results are quite shocking. The result present in Bootstrap could be achieved by removing [role=application] and [role=toolbar] elements from CKE's code (use JAWS with "CKE without toolbar and application and with button" section in the fiddle).

The second most promising result was achieved by removing moving focus to the menu element ("CKE without moving focus to the menu" in fiddle). In that case JAWS announces all state changes to the button, saying "collapsed" or "expanded". However if we keep the menu open and Tab through all elements back to the button, the state is not announced (the message with "navigate with arrow keys" is said instead).

I was also hoping that adding [aria-label] with "selected" text would help and JAWS would read it, but apparently it ignores [aria-label] attribute if [aria-labelledby] one is already added.

Very promising are also experiments with [aria-describedby] (CKE with [aria-describedby]…" in the fiddle). I was able to produce the following message:

<button's label> button menu collapsed/expanded. Press Space to activate the menu, then navigate with arrow keys.

If the [aria-expanded] attribute is also present (as in "CKE with [aria-describedby] and [aria-expanded]"), the changes of state while pressing the button are also presented.

The problem with that solution is the fact that there is one more element inside the button's markup and probably it could cause the same problems as the "(Selected)" added to the label (especially with styling).

[Marek Lewandowski]

Moving tickets to the next milestone.

[Marek Lewandowski]

Moving to 4.6.2 minor release, as 4.6.1 is mostly about polishing 4.6.0.

[Tomasz Jakut]

Guys, could anyone from CKEditor 4 team have a look at it?

[Jon]

Could you fix this bug, we are trying to use a text label instead of an icon in a new plugin with the menu button and the "(selected)" text makes this impossible to use.

Also it would be nice to support in menu button the same pattern as for richComboBox where you could use both a label and title for the tooltip.

[Jon]

I suggest that fixing it you look at the "Menu Button design pattern in the ARIA Authoring Practices, they have several examples that should help you to see how ARIA should be used for a menu button and popup menu.

Design Pattern ​https://www.w3.org/TR/wai-aria-practices-1.1/#menubutton

Example: ​https://www.w3.org/TR/wai-aria-practices-1.1/examples/menu-button/menu-button-1/menu-button-1.html

[Marek Lewandowski]

Let's revisit this issue in 4.7.1 and do this right.