Deprecate the touchevents JavaScript library and update CSS

The last submitted patch, 2: 3375181.patch, failed testing. View results →

This might increase layout shift at least in Claro because touchevents impact how buttons are rendered there. I've advocated before that we should just try to get rid of the whole library because making decisions on whether touchevents are enabled or not doesn't necessarily make a lot of sense because it doesn't mean that the user is navigating using touch.

I think those test failures might be real.

Getting rid of the detection altogether sounds sensible - especially now there's desktop touch monitors and etc and the fact that as far as I can tell we don't use actual touch events API for anything anyway. I guess the question then would be do we just always style it as if touchevents are on given most browser support that to make it the least change?

Re-titled for the less specific solution.

I think we'd probably want to adopt the no-touchevent styles at least as a starting point. We may have to look if there are some styles (e.g. the small variation of the dropbutton) that we have to update.

Put up a start.

Still todo:

1. We need to change all the Claro CSS to remove the .no-touchevents selectors so that the styles are applied without the library being in use.

2. Need to figure out what to do in stable9, and whether the .no-touchevents class should be added to page.tpl.php or somewhere in stable9.

Another possibilty to removing support altogether:

https://dev.to/cooty/a-new-way-to-test-for-touch-devices-without-javascr...

If we did that, we could keep the existing CSS styling but remove the classes and use media queries instead.

Made a commit for that.

Advantage if this approach is OK, is that we can keep the Claro design identical while removing the JS. If we then want to change the Claro design later, that could be done separately. It also gives contrib themes a clear direction for the upgrade path.

Yeah, I like the path of using media queries. The CSS looks good, although we need to spend a bit of extra time to make sure the rulesets still apply since the specificity is changing (the media queries don't add specificity like the HTML classes did).

Tests are failing, but I'm not sure why.

Fixed and verified the specificity. This should be RTBC as soon as the tests are passing.

I only did a sample of files because my CSS is not great, as evidenced by the review.

We still have a lot of touchevents references in core with the current state of the MR that will need similar conversions. It looks like more work than it is because of the .pcss.css vs.. .css files.

tests/Drupal/FunctionalJavascriptTests/TableDrag/TableDragTest.php
modules/contextual/tests/src/FunctionalJavascript/ContextualLinksTest.php
modules/contextual/css/contextual.theme.css
modules/contextual/contextual.libraries.yml
modules/system/tests/src/FunctionalJavascript/OffCanvasTest.php
misc/cspell/dictionary.txt
misc/touchevents-test.js
misc/dialog/off-canvas/css/button.css
misc/dialog/off-canvas/css/tabledrag.css
misc/dialog/off-canvas/css/tabledrag.pcss.css
misc/dialog/off-canvas/css/button.pcss.css
misc/components/tabledrag.module.css
themes/stable9/css/core/components/tabledrag.module.css
themes/stable9/css/contextual/contextual.theme.css
themes/olivero/css/components/tabledrag.css
themes/olivero/css/components/tabledrag.pcss.css
themes/claro/css/components/form--select.pcss.css
themes/claro/css/components/form--text.pcss.css
themes/claro/css/components/dropbutton.pcss.css
themes/claro/css/components/dropbutton.css
themes/claro/css/components/form--text.css
themes/claro/css/components/action-link.css
themes/claro/css/components/action-link.pcss.css
themes/claro/css/components/form--select.css
themes/claro/claro/css/theme/views_ui.admin.theme.pcss.css
themes/claro/claro/css/theme/views_ui.admin.theme.css
themes/claro/claro/css/components/form--select.pcss.css
themes/claro/claro/css/components/form--text.pcss.css
themes/claro/claro/css/components/dropbutton.pcss.css
themes/claro/claro/css/components/dropbutton.css
themes/claro/claro/css/components/form--text.css
themes/claro/claro/css/components/action-link.css
themes/claro/claro/css/components/action-link.pcss.css
themes/claro/claro/css/components/form--select.css
themes/claro/claro/claro.libraries.yml
lib/Drupal/Core/Render/theme.api.php
core.libraries.yml

Another thing to figure out here is backwards compatibility for existing contrib/custom stylesheets. What I think would be the simplest would be if we added 'no-touchevents' to the body tag in stable9 - that way themes will get those styles applied until they update to media queries, but everyone benefits from not having to load the js. If that's not acceptable, we'd probably have alter the touchevents library back into the other library definitions from stable9 - if themes can implement hook_library_info_alter() that is probably doable.

Re-roll the merge request to be compatible with version 10.3.2

Please work only on the Merge request, patches are not tested in any way anymore, see https://www.drupal.org/about/core/blog/drupalci-and-all-patch-testing-wi... →

Hi,

as far as i understood with comments and requirement to remove touchevent and no.touchevent selectors from the files mentioned above by comment #15 but i found some file not there for example themes/claro/claro/claro.libraries.yml there is no claro name directory inside claro theme also i wanted to ask about this file misc/touchevents-test.js it contain the touchevent js should i delete the file? i have create MR for it if i have done anything wrong here do let me know.