Remove IE11 Support from Claro

Task is big, so i'm assigning it to myself for now just to let others know i'm currently working on it. Will try to drop some code in next 24h. If no code will be added in next 24h, call 911

Thanks @kostyashupenko! This looks pretty close, I can only find two remaining references in Claro after applying this patch:

css/components/details.pcss.css
436: * Collapse processed for non-supporting browsers like IE or Edge.

css/components/fieldset.pcss.css
46:  margin-top: 0; /* IE11 and Edge do not collapse this margin. Ideally this would be 4px */

We either want to remove these entirely if the comments about Edge are outdated, or remove the reference to IE if the rules are still needed.

This still needs some manual testing after applying to ensure that none of the IE11 fixes were accidentally doing something useful in other browsers.

There is also code around the details element, which maybe we can remove if all supported browsers support this now? https://caniuse.com/details

js/details.es6.js:
  Drupal.behaviors.claroDetailsToggleShim = {
    attach(context) {
      if (Modernizr.details || !Drupal.CollapsibleDetails.instances.length) {
        return;
      }

Alright, you are totally right and it's fixed now and of course i did some local tests with real MS Edge to not make regressions, but as always it needs additional tests and again review :)

Looks like this is happening in this single issue? Thanks for your work on it!

Rebased against 10.0.x.

Rebased against 10.0.x.

JS part is OK with me

Rebased, would love to RTBC, but this is far to CSS-sy for me to be comfortable with.

That book failure looks like it might be real?

BookTest passes locally, rebased MR. Let's see what TestBot thinks this time.

All better now.

Retagging as a should have since this doesn't actually block beta, but also looks close?

Found and opened this pre-existing issue while testing: #3308733: Claro: "Spinner" loading icon not vertically aligned properly

This is looking great! I went through the code fairly granularly and didn't find any issues. I made special note to test out various changes that I wasn't 100% sure about (they all worked). I found the one issue above, but that is pre-existing.

The only issue that I found is that there are still many uses of the (-ms-high-contrast: active) media query that need to be removed. Most of this can be removed, as the successor to this media query (forced-colors: active) is already in place for modern browsers. When this code is removed, take care to make sure you're not removing the (forced-colors: active) also, because in some places the media queries are combined.

Setting this to Needs Work, but... I'd also be okay with committing this and creating a followup if that's easier.

Did a rebase and tried to remove all (-ms-high-contrast: active) media queries, including one I have my doubts about. Left a MR comment on that one.

Also removed some icons which I think are now redundant.

The diff isn't applying anymore (due to #3308821: Update stylelint-config-standard to 28.0.0 being merged).

This is really close. There's another code block within the details.pcss.css file (see comment in the MR) that uses the .collapse-processed selector. We should be able to remove this.

Found additional lines of CSS that can be removed due to it only being part of the details polyfill, so back to NW but this is very close.

I also did a bunch of manual testing in Edge (including WHCM) to confirm some of the potentially-Edge-impacting changes were safe, and everything looks good there.

Removed details polyfill CSS from here. Also fixed a minor bug in the RTL selectors in system-status-report.pcss.css:

-.system-status-report__status-title .details-title:before,
-.details .system-status-report__status-icon:before {
+.system-status-report__status-icon:before {

...
 
-[dir="rtl"] .system-status-report__status-title .details-title:before,
-[dir="rtl"].details .system-status-report__status-title:before {
+[dir="rtl"] .system-status-report__status-icon:before {

Note that the second RTL selector was status-title instead of status-icon, which would not have overridden the previous selector; this is now corrected.

I've spent some quality time with this MR over the past few days and the final few changes seem to address everything. I'm going to RTBC and 🤞 that tests still pass (certainly doesn't seem like they won't but one never knows...)

I've gone through the comments on the issue and they are all addressed. I've searched the code base for IE remnants and checked that all the images being removed are not used. It all looks great.

Committed and pushed 766d627500 to 10.1.x and 6d55a8f31d to 10.0.x. Thanks!