Problem/Motivation
In #3100937: Update modernizr to 3.8.0, it was discovered that Modernizr's touchevent test is deprecated. https://github.com/Modernizr/Modernizr/pull/2432
There are also problems with that test from Modernizr 3.7.1 onward, which requires an override of that test in Drupal core (added in the aformentioned issue).
Core's custom touchevent, added in #3100937 currently works fine, but may become outdated as newer browser versions are released and different ways of detecting touchevent become available.
What touchevents currently does for core
Modernizr adds a .touchevents or .no-touchevents class to <html> based on if the touchevents test is true or false.
The following CSS files have styles that expect one of these two classes.
./core/misc/dialog/off-canvas.tabledrag.css
./core/misc/dialog/off-canvas.button.css
./core/modules/contextual/css/contextual.theme.css
./core/modules/system/css/components/tabledrag.module.css
./core/themes/stable/css/core/dialog/off-canvas.tabledrag.css
./core/themes/stable/css/core/dialog/off-canvas.button.css
./core/themes/stable/css/contextual/contextual.theme.css
./core/themes/stable/css/system/components/tabledrag.module.css
./core/themes/stable9/css/core/dialog/off-canvas.tabledrag.css
./core/themes/stable9/css/core/dialog/off-canvas.button.css
./core/themes/stable9/css/contextual/contextual.theme.css
./core/themes/stable9/css/system/components/tabledrag.module.css
./core/themes/claro/css/components/dropbutton.css
./core/themes/claro/css/components/form--text.css
./core/themes/claro/css/components/table--file-multiple-widget.css
./core/themes/claro/css/components/tabledrag.css
./core/themes/claro/css/components/button.css
./core/themes/claro/css/components/form--select.css
./core/themes/claro/css/components/action-link.css
./core/themes/claro/css/theme/views_ui.admin.theme.css
./core/themes/seven/css/components/buttons.css
./core/themes/olivero/css/components/tabledrag.css
In many (most?) cases this is not trivial styling, but fairly significant changes.
Contextual Links also use the value of Modernizr.touchevents in two places:
./core/modules/contextual/js/views/VisualView.es6.js
// We only want mouse hover events on non-touch.
if (!Modernizr.touchevents) {
mapping.mouseenter = function () {
this.model.focus();
};
}./core/modules/contextual/js/views/RegionView.es6.j
// We don't want mouse hover events on touch.
if (Modernizr.touchevents) {
mapping = {};
}Proposed resolution
Determine if there is another library capable of detecting touchevent in a way that is useful to core. If so, add that library and deprecate Modernizr touchevent.
If there isn't another library that fits that exact need, determine if it's better to support Drupal core's custom touchevent test, or using a different library that may require refactoring how touchevent/no-touchevent classes are applied and what CSS rules are based on them.
I propose building on the existing logic in core/misc/modernizr-additional-tests.es6.js. This is in core because Modernizr itself has deprecated touchevents , and for good reason: it's not an accurate test. However, the criteria used by the former Modernizr.touchevents is very established in core, with many styles (and a little bit of JS) relying on its verdict. Switching to logic that is different from this (admittedly flawed) touchevents check would be very disruptive. The fact that it was disruptive is why core/misc/modernizr-additional-tests.es6.js is in core to begin with.
So I suggest keeeping the logic in core/misc/modernizr-additional-tests.es6.js, but making it a standalone asset, not a modernizr feature. This would be expanded to add the .touchevents/.no-touchevents as needed, and the contextual links JavaScript could either look for
'html.touchevents' or we can move the touchevents result into drupalSettings.
TLDR: although better touchevents detection might exist, changing this would be prohibitively disruptive. 50% of the logic is already part of core, so adding the missing 50% will get us closer to being able to remove Modernizr altogether.