Non-visible buttons are still tabbable and read out by screenreaders

Created on 21 June 2023, almost 2 years ago

Problem/Motivation

Keyboard and screen reader users land on a hidden field which is in the tab order, with ID edit-autosave-form-save. This also reads out for screen reader users.

This is an inconvenience for anyone using the keyboard to tab through fields, and an accessibility issue (WCAG 2.1 SC 1.3.2 & 2.4.3 Https://www.w3.org/WAI/WCAG21/Understanding/meaningful-sequence.html https://www.w3.org/WAI/WCAG21/Understanding/focus-order.html:

Steps to reproduce

- Open an editing form with this module enabled
- Tab through the fields/inputs in the form
- Observe that you land on a hidden field

Proposed resolution

- Ensure that these buttons are hidden from screenreaders and are not in the tab order

🐛 Bug report
Status

Active

Version

1.0

Component

Code

Created by

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.

Sign in to follow issues

Merge Requests

Comments & Activities

  • Issue created by @keelanfh
  • Open on Drupal.org →
    Core: 9.5.x + Environment: PHP 8.1 & MariaDB 10.3.22
    last update almost 2 years ago
    Waiting for branch to pass
  • I've created an MR with a change for this. I've changed to use a hidden attribute rather than visually-hidden, but this is often overridden by a theme, so I've also added a display: none; inline style.

  • Status changed to Needs review almost 2 years ago
  • 🇩🇪Germany rkoller Nürnberg, Germany

    I've added the drupal cms a11y tag as well as wcag SC2.4.7 applies here as well. sighted keyboard users might get confused if on one tab no focus is visible. will manually test the MR over the weekend, but the proposed solution looks good from my perspective. and i've also set the priority back to normal.

  • 🇩🇪Germany rkoller Nürnberg, Germany
  • 🇩🇪Germany rkoller Nürnberg, Germany

    I've tested the MR tonight. With the feature branch checked out the autosave button seems to be hidden and is not visible to sighted users nor screenreader users, but if i search for the class autosave-form-save in the web inspector i have no matches at all on the entire node edit form. so it seems like the autosave button isn't available at the moment? cuz there is also a deprecation error shown:

    Deprecated function: Creation of dynamic property Drupal\autosave_form\Form\AutosaveFormBuilder::$_serviceId is deprecated in Drupal\Component\DependencyInjection\Container->createService() (line 285 of /var/www/html/repos/drupal/core/lib/Drupal/Component/DependencyInjection/Container.php).
    Drupal\Component\DependencyInjection\Container->createService() (Line: 177)
    Drupal\Component\DependencyInjection\Container->get() (Line: 430)
    Drupal\Component\DependencyInjection\Container->resolveServicesAndParameters() (Line: 237)
    Drupal\Component\DependencyInjection\Container->createService() (Line: 445)
    Drupal\Component\DependencyInjection\Container->resolveServicesAndParameters() (Line: 237)
    Drupal\Component\DependencyInjection\Container->createService() (Line: 177)
    Drupal\Component\DependencyInjection\Container->get() (Line: 28)
    Drupal\Core\DependencyInjection\ClassResolver->getInstanceFromDefinition() (Line: 100)
    Drupal\Core\Utility\CallableResolver->getCallableFromDefinition() (Line: 34)
    Drupal\Core\Controller\ControllerResolver->getControllerFromDefinition() (Line: 49)
    Drupal\Core\Controller\ControllerResolver->getController() (Line: 166)
    Symfony\Component\HttpKernel\HttpKernel->handleRaw() (Line: 76)
    Symfony\Component\HttpKernel\HttpKernel->handle() (Line: 53)
    Drupal\Core\StackMiddleware\Session->handle() (Line: 48)
    Drupal\Core\StackMiddleware\KernelPreHandle->handle() (Line: 28)
    Drupal\Core\StackMiddleware\ContentLength->handle() (Line: 32)
    Drupal\big_pipe\StackMiddleware\ContentLength->handle() (Line: 116)
    Drupal\page_cache\StackMiddleware\PageCache->pass() (Line: 90)
    Drupal\page_cache\StackMiddleware\PageCache->handle() (Line: 48)
    Drupal\Core\StackMiddleware\ReverseProxyMiddleware->handle() (Line: 51)
    Drupal\Core\StackMiddleware\NegotiationMiddleware->handle() (Line: 36)
    Drupal\Core\StackMiddleware\AjaxPageState->handle() (Line: 51)
    Drupal\Core\StackMiddleware\StackedHttpKernel->handle() (Line: 709)
    Drupal\Core\DrupalKernel->handle() (Line: 19)

    tested on ddev on drupal 11.x and php 8.3. I'll set the issue back to needs work

  • First commit to issue fork.
  • 🇩🇪Germany hchonov 🇪🇺🇩🇪🇧🇬

    @rkoller I tested the MR and I was able to see the autosave-form-save class in the DOM and also that the autosaving still works, as well as resuming from a draft or rejecting a draft.

    Regarding the deprecation notice this was resolved with https://www.drupal.org/project/autosave_form/issues/3355495 🐛 PHP 8.2 deprecation issue with AutosaveFormBuilder Needs work some time ago.

    I have merged the MR now.

  • 🇩🇪Germany rkoller Nürnberg, Germany
  • Automatically closed - issue fixed for 2 weeks with no activity.

Production build 0.71.5 2024