Visually-hidden refresh button in Field UI fails WCAG Focus Visible.

Created on 4 August 2018, over 6 years ago
Updated 8 July 2024, 6 months ago

Problem/Motivation

The Entity Display forms ("manage display" and "manage form display") have a visually-hidden button:

<input class="visually-hidden button js-form-submit form-submit" data-drupal-selector="edit-refresh" id="edit-refresh" name="op" value="Refresh" type="submit">

This button is triggered programatically as part of Field UI's ajax behaviours. It seems this button is NOT intended to be activated by human users, hence the visually-hidden class. Mouse/pointer users cannot operate this button, because it has zero height and width.

However, this button is still in the keyboard tabbing order, and can be activated by a keyboard user. The visually-hidden class means the focused button isn't perceivable though, which is a failure of WCAG 2.4.7 Focus Visible. It acts as a confusing extra tab-stop for keyboard users, who can activate it by accident (though doing so seems to be harmless).

Proposed resolution

Hide the button from all users, not just sighted mouse/pointer users.

Possible Approaches:
The most reliable way to hide the button from all user is with display: none. This will hide it from screen readers, and remove it from the tabbing order for sighted keyboard-only users. There are a few ways we could do that.

  • . REJECTED in #2, it was being overridden by author styles.
  • Hide the refresh button with the .hidden class instead of .visually-hidden, and provide a more specific override (like toolbar and contextual modules do, see comment #8).
  • Use a custom class for this button, and use display:none on that. WORKS see comment #2.
  • Use the HTML5 hidden attribute instead of the .visually-hidden class. See comment #8.

Important: will the button still accept a programatically-triggered mousedown event?

  • YES, still works in Firefox.
  • TODO: confirm this still works in other browsers.

Remaining tasks

  • Patch to hide the button
  • Make sure the need to hide it from all users is documented in comments.
  • Cross-browser testing - test the tabbing order in all our supported browsers, confirm the button isn't tabbable.
  • Cross-browser manual testing - Confirm the trigger('mousedown') in Drupal.fieldUIOverview.AJAXRefreshRows() still works, in all our supported browsers.

User interface changes

Accessibility improvements - remove the confusing button from the keyboard-only and screen reader experience.
No visual design changes.

API changes

None.

Data model changes

None.

๐Ÿ› Bug report
Status

Fixed

Version

10.3 โœจ

Component
Field UIย  โ†’

Last updated 4 days ago

Created by

๐Ÿ‡ฌ๐Ÿ‡งUnited Kingdom andrewmacpherson

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.

  • CSS

    It involves the content or handling of Cascading Style Sheets.

Sign in to follow issues

Merge Requests

Comments & Activities

Not all content is available!

It's likely this issue predates Contrib.social: some issue and comment data are missing.

Production build 0.71.5 2024