Opened 3 years ago

Last modified 2 years ago

#14237 confirmed Bug

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

Reported by: Lynne Kues Owned by:
Priority: Nice to have (we want to work on it) Milestone: CKEditor 4.7.1
Component: UI : Widgets Version: 4.4.2
Keywords: Cc: lynne_kues@…

Description

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)'.

Change History (20)

comment:1 Changed 3 years ago by Lynne Kues

Cc: lynne_kues@… added

comment:2 Changed 3 years ago by Tomasz Jakut

Status: newconfirmed

comment:3 Changed 3 years ago by Tomasz Jakut

Milestone: CKEditor 4.5.7
Owner: set to Tomasz Jakut
Status: confirmedassigned

comment:4 Changed 3 years ago by Tomasz Jakut

Status: assignedreview

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.

comment:5 Changed 3 years ago by Marek Lewandowski

#12519 was marked as a DUP.

comment:6 Changed 3 years ago by Marek Lewandowski

Milestone: CKEditor 4.5.7CKEditor 4.5.8

comment:7 Changed 3 years ago by Marek Lewandowski

Status: reviewreview_failed

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.

comment:8 Changed 3 years ago by Marek Lewandowski

Milestone: CKEditor 4.5.8CKEditor 4.5.9

comment:9 Changed 3 years ago by 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 Bootstrap's 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).

Last edited 3 years ago by Tomasz Jakut (previous) (diff)

comment:10 Changed 3 years ago by Marek Lewandowski

Milestone: CKEditor 4.5.9CKEditor 4.5.10

comment:11 Changed 3 years ago by Marek Lewandowski

Milestone: CKEditor 4.5.10CKEditor 4.5.11

Moving tickets to the next milestone.

comment:12 Changed 3 years ago by Marek Lewandowski

Milestone: CKEditor 4.5.11CKEditor 4.6.1

comment:13 Changed 2 years ago by Marek Lewandowski

Milestone: CKEditor 4.6.1CKEditor 4.6.2

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

comment:14 Changed 2 years ago by Marek Lewandowski

Milestone: CKEditor 4.6.2
Priority: NormalNice to have (we want to work on it)

comment:15 Changed 2 years ago by Tomasz Jakut

Owner: Tomasz Jakut deleted
Status: review_failedconfirmed

comment:16 Changed 2 years ago by Tomasz Jakut

Status: confirmedpending

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

Last edited 2 years ago by Tomasz Jakut (previous) (diff)

comment:17 Changed 2 years ago by 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.

comment:18 Changed 2 years ago by 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

Last edited 2 years ago by Jon (previous) (diff)

comment:19 Changed 2 years ago by Marek Lewandowski

Milestone: CKEditor 4.7.1

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

comment:20 Changed 2 years ago by Marek Lewandowski

Status: pendingconfirmed
Note: See TracTickets for help on using tickets.
© 2003 – 2019 CKSource – Frederico Knabben. All rights reserved. | Terms of use | Privacy policy