Problem/Motivation

Style, Heading, Language buttons have invalid announcement text when using a screen reader

example:

Steps to reproduce

- enable voice over (or other screen reader)
- tab to Style, Heading, Language buttons
- buttons are announce as "headingactive button heading"
- it's expected to be announced as "active button Heading"

Proposed resolution

- this issue exists because config screen displays faux-buttons for CKEditor and uses ::before CSS pseudo-element to display the name of the button with `content` property
- rendered CKEditor buttons don't have this issue
- Follow this recommendation from W3C to resolve the issue: https://www.w3.org/TR/css-content-3/#alt

Remaining tasks

- MR ready for review

User interface changes

- none

API changes

- none

Data model changes

- none

Release notes snippet

- Updated CSS property `content` for faux-buttons on CKEditor 5 toolbar config admin page to make sure screen reader text is valid

CommentFileSizeAuthor
#8 style.png195.23 KBjannakha
#8 heading.png197.84 KBjannakha
#8 language.png110.8 KBjannakha
lang-button-pseudo.jpg195.46 KBbnjmnm

Issue fork drupal-3270139

Command icon Show commands

Start within a Git clone of the project using the version control instructions.

Or, if you do not have SSH keys set up on git.drupalcode.org:

About issue forks

Comments

bnjmnm created an issue. See original summary.

Version: 9.4.x-dev » 9.5.x-dev

Drupal 9.4.0-alpha1 was released on May 6, 2022, which means new developments and disruptive changes should now be targeted for the 9.5.x-dev branch. For more information see the Drupal core minor version schedule and the Allowed changes during the Drupal core release cycle.

Version: 9.5.x-dev » 10.1.x-dev

Drupal 9.5.0-beta2 and Drupal 10.0.0-beta2 were released on September 29, 2022, which means new developments and disruptive changes should now be targeted for the 10.1.x-dev branch. For more information see the Drupal core minor version schedule and the Allowed changes during the Drupal core release cycle.

Version: 10.1.x-dev » 11.x-dev

Drupal core is moving towards using a “main” branch. As an interim step, a new 11.x branch has been opened, as Drupal.org infrastructure cannot currently fully support a branch named main. New developments and disruptive changes should now be targeted for the 11.x branch, which currently accepts only minor-version allowed changes. For more information, see the Drupal core minor version schedule and the Allowed changes during the Drupal core release cycle.

mgifford’s picture

mgifford
he/him
Primary language English
commented

Some links on this:

mgifford’s picture

mgifford
he/him
Primary language English
commented

So this looks like it is a Drupal specific issue, not related to the upstream situation.

Also, looks like we just need to add a space so the text isn't blended together, right?

wim leers’s picture

wim leers
Location Ghent 🇧🇪🇪🇺
commented

I … didn't realize it could be this simple? 😄

If you can reproduce what's in the photo and can fix it with a single space, I'll be happy to RTBC your one-line patch! 🤓

jannakha’s picture

jannakha commented
StatusFileSize
new language.png110.8 KB
new heading.png197.84 KB
new style.png195.23 KB

to reproduce, navigate to /admin/config/content/formats/[your html format name]
- turn on voice over and tab through available/activated buttons
- same issue found on Headings/Styles/Language fake-dropdown buttons

- this issue exists because config screen displays fake-buttons for CKEditor (real CKEditor buttons don't have this issue)

- Follow this recommendation from W3C to resolve the issue: https://www.w3.org/TR/css-content-3/#alt

patch is WIP

jannakha opened merge request !7071

jannakha’s picture

jannakha commented
Status: Active » Needs review

MR!7071 for review

smustgrave’s picture

smustgrave commented
Status: Needs review » Needs work

Can the issue summary be updated to include what the proposed solution is.

jannakha’s picture

jannakha commented
Title: Toolbar config buttons using ::before to add content: presents oddly to AT » CKEditor admin toolbar config buttons using ::before to add content: presents oddly to AT
Issue summary: View changes
Status: Needs work » Needs review

updated issue description

smustgrave’s picture

smustgrave commented
Status: Needs review » Reviewed & tested by the community

The extra spacing may be considered out of scope. But personally find the css easier to read. So since the main fix is included going to go ahead and mark.

nod_’s picture

nod_
Primary language French
Location Lille
commented
Status: Reviewed & tested by the community » Needs work

Solution is not supported by Firefox, we need to go old school and add a duplicate rule that's valid on FF before the new one. 

  content: "Style";
  content: "Style" / "";
jannakha’s picture

jannakha commented
Title: CKEditor admin toolbar config buttons using ::before to add content: presents oddly to AT » CKEditor admin toolbar config buttons using ::before to add content: have invalid screen reader text
jannakha’s picture

jannakha commented
Status: Needs work » Needs review

applied #14 suggestion
FF announces "Heading available button Heading" - at least there's a space for the screen reader

nod_’s picture

nod_
Primary language French
Location Lille
commented

Can you add a comment as to why we need the duplicate rule. To make sure we don't break it later. after that it's good to go

smustgrave’s picture

smustgrave commented
Status: Needs review » Needs work

As mentioned in #17 probably fine to self RTBC after the comment.

Thanks @nod_ I didn't know that about Firefox

jannakha’s picture

jannakha commented
Status: Needs work » Reviewed & tested by the community

added comment as per #17
self-RTBC :-)

  • nod_ committed da64ff5c on 11.x 
    Issue #3270139 by jannakha, bnjmnm, smustgrave, mgifford: CKEditor admin...

  • nod_ committed 9ee61322 on 10.3.x 
    Issue #3270139 by jannakha, bnjmnm, smustgrave, mgifford: CKEditor admin...

  • nod_ committed 0086ce6b on 10.2.x 
    Issue #3270139 by jannakha, bnjmnm, smustgrave, mgifford: CKEditor admin...

nod_ closed merge request !7071

nod_’s picture

nod_
Primary language French
Location Lille
commented
Version: 11.x-dev » 10.2.x-dev
Status: Reviewed & tested by the community » Fixed

Committed da64ff5 and pushed to 11.x. Thanks!

Status: Fixed » Closed (fixed)

Automatically closed - issue fixed for 2 weeks with no activity.