Browsing the various menus in the toolbar, their name (label) is not announced by screen readers any longer.

The CKEditor online demo does not have this problem, so I think that something is wrong in our Drupal integration...

Comments

falcon03’s picture

falcon03 CreditAttribution: falcon03 commented
Project: CKEditor for WYSIWYG Module » Drupal core
Version: 8.x-1.x-dev » 8.x-dev
Component: User interface » ckeditor.module

mgifford’s picture

mgifford
he/him
Primary language English
CreditAttribution: mgifford commented

I don't know if this is still a problem or not. I didn't have a problem when navigating the toolbar with VoiceOver just now. Should be reviewed against a fresh install like http://simplytest.me/project/drupal/8.x

falcon03’s picture

falcon03 CreditAttribution: falcon03 commented

Sorry Mike, I noticed that my report wasn't clear. Just to avoid any chance of misunderstandings, I am reporting exact steps to reproduce the issue.

If you're using Voiceover, when you reach a "rich textarea", stop interacting with it by pressing "CTRL + Option + Shift + Up arrow" once, then move to the left by pressing "Control + Option + Left arrow" once and interact with the toolbar by pressing "CTRL + Option + Shift + Down arrow" once.

If you move between these menus using CTRL + Option + Left or Right arrow you could notice that the menus have no labels.

Please let me know if you can ear these labels, since this will mean that something is wrong when using CKEditor in languages other than English.

And, I was forgetting: I am not referring to buttons' labels, they work properly.

BTW, I am amazed to notice how powerful simplytest.me is! After leaving the website, do a sandbox get deleted automatically?
This service would let me test patches out of my development environment, simply amazing!

mgifford’s picture

mgifford
he/him
Primary language English
CreditAttribution: mgifford commented

This is very helpful. The exact reporting steps are unfortunately required. Using VO can get rather complicated if you don't have a bunch of keystrokes memorized.

I was looking at one of the groups of buttons that I see highlighted when I review it (note I've got some more descriptions under the block of code below):

<span id="cke_16" class="cke_toolbar" role="toolbar">
<span class="cke_toolbar_start"></span>
<span class="cke_toolgroup" role="presentation">
<a id="cke_17" class="cke_button cke_button__blockquote cke_button_off " onclick="CKEDITOR.tools.callFunction(31,this);return false;" onmousedown="return CKEDITOR.tools.callFunction(30,event);" onfocus="return CKEDITOR.tools.callFunction(29,event);" onkeydown="return CKEDITOR.tools.callFunction(28,event);" onblur="this.style.cssText = this.style.cssText;" onkeypress="return false;" aria-haspopup="false" aria-labelledby="cke_17_label" role="button" hidefocus="true" tabindex="-1" title="Block Quote">
<a id="cke_18" class="cke_button cke_button__image cke_button_off " onclick="CKEDITOR.tools.callFunction(35,this);return false;" onmousedown="return CKEDITOR.tools.callFunction(34,event);" onfocus="return CKEDITOR.tools.callFunction(33,event);" onkeydown="return CKEDITOR.tools.callFunction(32,event);" onblur="this.style.cssText = this.style.cssText;" onkeypress="return false;" aria-haspopup="false" aria-labelledby="cke_18_label" role="button" hidefocus="true" tabindex="-1" title="Image">
</span>
<span class="cke_toolbar_end"></span>
</span>

I think that there should be something in <span class="cke_toolbar_start"></span> to describe it as a group. I think that might be part of where VO is getting stuck.

There is a title for the images, but also aria-labelledby="cke_17_label"

<span id="cke_17_label" class="cke_button_label cke_button__blockquote_label">Block Quote</span

So there is both a title & a proper looking aria-labelledby element for the individual links.

This looks like it's a CKEditor problem though.

mgifford’s picture

mgifford
he/him
Primary language English
CreditAttribution: mgifford commented

I think I still need more on this. I was wondering if it was related to:
http://dev.ckeditor.com/ticket/10004

So basically, the Drupal menu labels are lost when going from CKEditor back up to the Toolbar at the top of the page.

I assume Patrick's got this so that the virtual drive is blown away every time. What do you think of the accessibility of simplytest.me now?

Wim Leers’s picture

Wim Leers
Location Ghent 🇧🇪🇪🇺
CreditAttribution: Wim Leers commented
Assigned: Unassigned » Wim Leers
Status: Active » Closed (duplicate)
Issue tags: +CKEditor in core

Please see #1872206-71: Improve CKEditor toolbar configuration accessibility to learn why there's a difference between the official CKEditor demo and Drupal's CKEditor integration.

The only way this is going to change is by changing it in that other issue. This issue is a symptom (a consequence) of the other. Hence marking this as a duplicate. Please see comment 71 in that other issue.

(I didn't find this issue before because it's not tagged with "CKEditor in core". Sorry.)