Problem/Motivation

TLDR - it is possible to use <details> without <summary>, but it is bad for keyboard navigation. If the details render element had a default value for #title, then details elements will always have summary and the keyboard navigation concerns are addressed.

Discovered while working on #3038336: When jQuery UI constrains tabbing it does not consider summary elements.
There is a potential tab navigation problem if <details> elements are used without <summary>. At the moment, this seems specific to when they are used in jQuery UI, but this could potentially impact more scenarios than that.

<details> is a tabbable element. It can be used without <summary> and accessed and opened/closed via keyboard navigation without having to explicitly set a tabindex.

Although <details> is tabbable, it is not considered focusable by Javascript. Calling focus() on a <details> node results in a whole lot of nothing.

The scenario in which I found this to be a problem is using <details> without <summary> in a jQuery UI dialog. When the jQuery UI dialog opens it calls focus() on the first focusable element in the dialog. If there is a <details> without <summary>, there is nothing focusable, despite it being an element that can be accessed and manipulated via keyboard navigation. This prevents jQuery UI from moving focus to the dialog -- it instead remains on the triggering element.

However, Javascript considers <summary> to be focusable. If the details render element provided a default value for #title, then details would always have <summary>, and there would be no problem of there being a tabbable-but-not-focusable element screwing with the ability to determine focus constraints.

When no <summary> is specified, the end result is very similar - details are still opened/closed by clicking a string that says 'details', but it's not wrapped in <summary>.

Proposed resolution

See if there are any concerns with the approach
In Drupal\Core\Render\Element\Details check if $element['#title'] does not exist. If it doesn't, set $element['#title'] = '';. This will result in a <summary> element that says 'details' for opening and closing the details tag -- this replaces an unwrapped string that says 'details', which opens and closes the details tag.

Remaining tasks

Post a patch, get additional confirmation the approach is OK, write test, commit.

User interface changes

A details render element will have a summary even if #title is not specified

API changes

N/A

Data model changes

N/A

Release notes snippet

N/A

Issue fork drupal-3044440

Command icon Show commands

Start within a Git clone of the project using the version control instructions.

Or, if you do not have SSH keys set up on git.drupalcode.org:

About issue forks

Comments

bnjmnm created an issue. See original summary.

mgifford’s picture

mgifford
he/him
Primary language English
commented

Here's a reference for using <details> without <summary> https://developer.mozilla.org/en-US/docs/Web/HTML/Element/details

Version: 8.8.x-dev » 8.9.x-dev

Drupal 8.8.0-alpha1 will be released the week of October 14th, 2019, which means new developments and disruptive changes should now be targeted against the 8.9.x-dev branch. (Any changes to 8.9.x will also be committed to 9.0.x in preparation for Drupal 9’s release, but some changes like significant feature additions will be deferred to 9.1.x.). For more information see the Drupal 8 and 9 minor version schedule and the Allowed changes during the Drupal 8 and 9 release cycles.

Version: 8.9.x-dev » 9.1.x-dev

Drupal 8.9.0-beta1 was released on March 20, 2020. 8.9.x is the final, long-term support (LTS) minor release of Drupal 8, which means new developments and disruptive changes should now be targeted against the 9.1.x-dev branch. For more information see the Drupal 8 and 9 minor version schedule and the Allowed changes during the Drupal 8 and 9 release cycles.

Version: 9.1.x-dev » 9.2.x-dev

Drupal 9.1.0-alpha1 will be released the week of October 19, 2020, which means new developments and disruptive changes should now be targeted for the 9.2.x-dev branch. For more information see the Drupal 9 minor version schedule and the Allowed changes during the Drupal 9 release cycle.

Version: 9.2.x-dev » 9.3.x-dev

Drupal 9.2.0-alpha1 will be released the week of May 3, 2021, which means new developments and disruptive changes should now be targeted for the 9.3.x-dev branch. For more information see the Drupal core minor version schedule and the Allowed changes during the Drupal core release cycle.

Version: 9.3.x-dev » 9.4.x-dev

Drupal 9.3.0-rc1 was released on November 26, 2021, which means new developments and disruptive changes should now be targeted for the 9.4.x-dev branch. For more information see the Drupal core minor version schedule and the Allowed changes during the Drupal core release cycle.

Version: 9.4.x-dev » 9.5.x-dev

Drupal 9.4.0-alpha1 was released on May 6, 2022, which means new developments and disruptive changes should now be targeted for the 9.5.x-dev branch. For more information see the Drupal core minor version schedule and the Allowed changes during the Drupal core release cycle.

Version: 9.5.x-dev » 10.1.x-dev

Drupal 9.5.0-beta2 and Drupal 10.0.0-beta2 were released on September 29, 2022, which means new developments and disruptive changes should now be targeted for the 10.1.x-dev branch. For more information see the Drupal core minor version schedule and the Allowed changes during the Drupal core release cycle.

Version: 10.1.x-dev » 11.x-dev

Drupal core is moving towards using a “main” branch. As an interim step, a new 11.x branch has been opened, as Drupal.org infrastructure cannot currently fully support a branch named main. New developments and disruptive changes should now be targeted for the 11.x branch, which currently accepts only minor-version allowed changes. For more information, see the Drupal core minor version schedule and the Allowed changes during the Drupal core release cycle.

mgifford’s picture

mgifford
he/him
Primary language English
commented
Issue tags: +wcag247

Tagging for https://www.w3.org/WAI/WCAG21/Understanding/focus-visible

kalanh made their first commit to this issue’s fork.

kalanh’s picture

kalanh
Primary language English
commented
Assigned: Unassigned » kalanh

Version: 11.x-dev » main

Drupal core is now using the main branch as the primary development branch. New developments and disruptive changes should now be targeted to the main branch.

Read more in the announcement.