Make the preview window easier reachable via the keyboard with a skip to preview link

Created on 25 March 2023, over 1 year ago
Updated 27 March 2023, over 1 year ago

Problem/Motivation

If take a look at the video you notice that currently after the preview window is opened the focus remains on the toggle preview button. if the user continues to tab first all focusable elements on the node edit form has to be passed until the preview window is reached. plus currently there aren't really any directly apparent preview related destinations in case the user tries to navigate by rotor.

Steps to reproduce

Proposed resolution

@cosmicdreams proposed in #3343006-2: [meta] Address accessibility concerns to a skip to preview link similar the skip to main link. meaning after the user hits the tab key one time a skip to preview link gets visible next to the toggle preview button bringing the focus into the preview iframe when clicked.

Remaining tasks

User interface changes

API changes

Data model changes

📌 Task
Status

Needs work

Version

1.0

Component

Code

Created by

🇩🇪Germany rkoller Nürnberg, Germany

Live updates comments and jobs are added and updated live.
  • Accessibility

    It affects the ability of people with disabilities or special needs (such as blindness or color-blindness) to use Drupal.

  • Usability

    Makes Drupal easier to use. Preferred over UX, D7UX, etc.

Sign in to follow issues

Comments & Activities

  • Issue created by @rkoller
  • First commit to issue fork.
  • 🇺🇸United States cosmicdreams Minneapolis/St. Paul

    @rkoller to my knowledge this is already provided by Drupal core. see:

  • 🇩🇪Germany rkoller Nürnberg, Germany

    yes skip to main is already provided by Drupal core. But the suggestion in [meta] Address accessibility concerns Active was to provide a similar link for skip to preview making the switch to the preview window easier. cuz at the moment a user has to tab through all the focusable elements that come after the toggle preview button as illustrated in tab.mp4

  • @cosmicdreams opened merge request.
  • 🇩🇪Germany rkoller Nürnberg, Germany

    i've applied the patch. one initial feedback. at first i haven't found the skip to preview button until i've noticed that the button is shown when you tab inside the preview window. i've assumed it would show up outside on the node edit form meaning on the the first tab press when the user is leaving the focus of the toggle preview button.

    but i've realized after testing a little bit more that without the patch a user would be unable to get inside the preview window (always circling inbetween quit, refreseh, new window and view mode), that's an complete oversight on my end. but i wonder if it would make sense to add such a visually-hidden button on the node edit form as described above additionally. that way a user could easily skip to the off-canvas preview if the preferred way of navigation is the tab key. and then within the preview controls there would be the option to skip inside the preview as well.

    but in the end there would have to be an easy way out aka link as well i suppose? otherwise the user would be stuck inside the preview iframe.

  • 🇺🇸United States cosmicdreams Minneapolis/St. Paul

    @rkoller There are two ways we could move the "skip to preview button" out of the PreviewControlsForm that we're adding with this module.

    1. Hack / Override Core's node template. We've been avoiding such overrides because we'd then have to continue supporting that for everything theme.
    2. Use javascript to override that link (also problematic).

    Adding our own link is the path of least resistance and the easier thing to support as we're not breaking expectations / backwards compatibility by adding something new.

    -----

    Let's create a new issue for adding another (skip to preview) link to the node edit form.

  • Status changed to Needs review over 1 year ago
  • 🇺🇸United States cosmicdreams Minneapolis/St. Paul
  • Status changed to Needs work over 1 year ago
  • 🇩🇪Germany rkoller Nürnberg, Germany

    In #6 📌 Make the preview window easier reachable via the keyboard with a skip to preview link Needs work i've only tried to find the skip to preview link by tabbing i haven't had actually clicked it. there are actually two problems with it.

    1. when clicking the skip to preview content button the inception turned up again (ref 🐛 Installation on already existing sites broken with no real preview shown Fixed - see inception.mp4)
    2. clicking the skip to preview content button actually opens a new window. that way you have for keyboard users redundant functionality. first the visually hidden skip to preview content button opening a preview (and technically speaking it isnt skipping but opening a new window) then the refresh button and then the new window button. i wonder if it wouldnt be the better choice to remove the skip to preview content and work on the wording for the new window string. cuz new window isn't necessarily clear to the user what it means and implies. me for example, i associate new window with the new window command in the browser aka i would expect an empty browser window in particular if i am able to see the actual preview underneath already. therefore it always makes me think for a second.

Production build 0.71.5 2024