Drupal 8 makes theming of the HTML5 details element easy – thanks to its built-in shim provided by the core/misc/collapse.js script (that’s the part of the core/drupal.collapse library). But while working on Claro’s Details style update, I discovered some bugs and other interesting behaviors that I want to share with you.

Firefox and Safari on macOS

Like buttons or links, :focus state of the HTML5 details summary element behaves differently on macOS or iOS than on other systems: it only gets the focus state if it was triggered by keyboard navigation.

Does clicking on a <button> give it the focus?

Desktop Browsers Windows 8.1 OS X 10.X
Firefox Yes - Firefox 30.0 No (nor with a tabindex) - Firefox 63
Chrome Yes - Chrome 35 Yes - Chrome 65
Safari N/A No (nor with a tabindex) - Safari 12
Internet Explorer Yes - IE 11 N/A
Presto Yes - Opera 12 Yes - Opera 12

I decided to make that behavior coherent across browsers with a little Javascript:



1
2
3
4
5
6
7
8
9
10
11
12
13



(($, Drupal) => {
  Drupal.behaviors.claroDetails = {
    attach(context) {
      $(context)
        .once('claroDetails')
        .on('click', (event) => {
          if (event.target.nodeName === 'SUMMARY') {
            $(event.target).trigger('focus');
          }
        });
    },
  };
})(jQuery, Drupal);

Safari

On Safari, the custom marker’s animation does not work properly: check out this demo page.

I tried to work around this bug as well:



1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17



(($, Drupal) => {
  Drupal.behaviors.claroDetailsSafariFix = {
    attach(context) {
      $(context)
        .find('details')
        .once('claroDetailsSafariFix')
        .on('toggle', (event) => {
          if ($(event.target).prop('open')) {
            $(event.target).addClass('is-expanded');
          }
          else {
            $(event.target).removeClass('is-expanded');
          }
        });
    },
  };
})(jQuery, Drupal);

Well, it worked like a charm… But only for LTR languages! With an RTL document the final functionality was worse than without this script. No luck this time 🙁.

Internet Explorer 11 and Edge

Well, neither Internet Explorer 11 nor Microsoft Edge supports HTML5 details. But since Drupal uses details in many forms, it also contains a built-in shim which is added to Details on non-supporting browsers.

When we are customizing the <summary> styles, we only have to undo some of them if the parent of the <summary> tag has the .collapse-processed CSS class and repeat them for the .details-title anchor element that will be added into the summary.

Sources: