CKEditor admin toolbar config buttons using ::before to add content: have invalid screen reader text

Some links on this:

• https://tink.uk/accessibility-support-for-css-generated-content/
• https://webaim.org/blog/screen-readers-and-css/

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?

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! 🤓

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

MR!7071 for review

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

updated issue description

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.

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" / "";

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

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

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

Thanks @nod_ I didn't know that about Firefox

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

nod_ → closed merge request !7071

Committed da64ff5 and pushed to 11.x. Thanks!

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