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
🐛
When jQuery UI constrains tabbing it does not consider summary elements
Fixed
.
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>.
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.
Post a patch, get additional confirmation the approach is OK, write test, commit.
A details render element will have a summary even if #title is not specified
N/A
N/A
N/A
Active
11.0 🔥
Last updated
It affects the ability of people with disabilities or special needs (such as blindness or color-blindness) to use Drupal.
Not all content is available!
It's likely this issue predates Contrib.social: some issue and comment data are missing.