Some dialogs do not receive focus when opened

Created on 23 September 2016, over 7 years ago
Updated 8 December 2023, 6 months ago

Problem/Motivation

When a keyboard user operates a "place block" button on the block layout page (admin/structure/block) a modal dialog presents the available blocks, but the keyboard focus does not move to the dialog content. Focus remains on the place-block button.

This is a different behaviour to the dialogs in Views UI, which move focus to the first focusable item in the dialog's main content.

A demo recording of this problem is on YouTube, from the Drupal Usability Meeting - 15 May 2018, starting around 31m.

Some additional consequences:

  • Pressing ESC is expected to dismiss modal dialogs. However this doesn't work until focus has entered the dialog. So a sighted keyboard user can open a dialog, then see that it's not what they want, but it can't be dismissed by the normal behaviour.
  • Screen reader users may not be immediately aware that the dialog has opened - it would be announced when entering the dialogue (i.e. when focus moves to a child element inside the dialog). Focus remains on a place-block button, which apparently did nothing.

The problem is somewhat mitigated by the fact that pressing tab will move focus to the "add custom block" link, which is the first visible focusable control in the dialog content. Screen readers announce the dialog at this point, and the ESC behaviour comes into play.

The current working draft of the W3C WAI-ARIA Authoring Practices describes the expected behaviour:

When a modal dialog opens focus goes to the first focusable item in the dialog.

Dialogs which are affected

Dialogs which are NOT affected

  • Dialogs in Views UI. (Haven't tried them all, but tried a variety from dialogs from all sections)
  • "This workflow applies to" dialog from Content Moderation module.
  • ajax_test module, all instances of "link" which open a dialog, at ajax-test/dialog
  • off_canvas_test module, all instances at /off-canvas-test-links

Proposed resolution

When the dialog is opened, move focus programatically to the first control in the dialog content (the add custom block link).

Remaining tasks

Fix it - are we programatically focussing the wrong element?

User interface changes

  • No visible inteface changes.
  • Corrects the keyboard behaviour of a modal dialog, to match the behaviour of dialogs elsewhere in Drupal's admin interface.

API changes

None expected.

Data model changes

None expected.

๐Ÿ› Bug report
Status

Fixed

Version

10.2 โœจ

Component
Blockย  โ†’

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.

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.69.0 2024