a11y: kg-toggle-card not usable properly with a screenreader

[jrothwell]

When viewing a Ghost site using a screenreader, the Toggle card (to allow people to show/hide text in a box) does not work properly. I have tested this with VoiceOver on Safari on iOS 15.2, but I expect it will be similar for people with other screenreaders. I spotted this on ghost.io, but I can also see how it would happen looking at https://github.com/TryGhost/Koenig/blob/main/packages/kg-default-cards/lib/cards/toggle.js.

Steps to reproduce

1. On a page using the Koenig editor, make a new Toggle unit.
2. Set the title/body of the Toggle unit. (For instance, try the title Spoilers for Murder on the Orient Express below the fold! Haven't read? Don't read! and the body text Turns out they all did it!)
3. Save and publish the page.
4. Navigate to the public-facing URL, preferably on a phone.
5. Turn on your screenreader.
6. Try and read the page without being spoiled about the ending of Murder on the Orient Express.

Problem

• There is no indication on moving the screenreader cursor over the title that you can activate it to expand/collapse the content
• The expand/collapse button is unlabelled but not marked as aria-hidden, meaning that VoiceOver simply reads it as an unlabelled button. On activating it, there is no indication what the button just did
• The cursor can highlight the body of the card, even when it's supposed to be hidden. This does mean that people aren't missing out on any content, but it also means:
  • some people may find the mismatch between the screen content and the content read by the screenreader confusing. This is especially true for people who may use screenreaders in combination with other tools (e.g. Switch Control.)
  • this is a problem for people who might use toggle cards to hide content—e.g. answers to quiz questions, spoiler warnings, potentially triggering content hidden by a content warning, etc.

For another example, see this screen recording (sound on):

RPReplay_Final1641518125.MOV

Possible solution

For context on what an accessible toggle/expander/accordion style component looks like, try using the Expander component on this NHS service manual page using a screenreader. This is a standard HTML <detail> and <summary> arrangement, with polyfills for IE11. You may want to try doing something similar—that way we can trust the browser/screenreader to do the right thing.

[benjaminrancourt]

Additionally, using the basic HTML <detail> and <summary> elements, the script to make the current code work (https://github.com/TryGhost/Ghost/blob/main/ghost/core/core/frontend/src/cards/js/toggle.js) would no longer be necessary, thus speeding up page loading.