Updating BrowseHappy dashboard notice to discourage IE11 usage

[youknowriad]

For PHP upgrades, nudging users to update their PHP version proved to be successful.

Maintainability cost of IE11 (In terms of time, bundle size and a lot more) is very high and IE11 is approaching the 1% threshold in its usage worldwide ​https://caniuse.com/usage-table

I think we should consider adding a notice to discourage its usage.

[johnbillion]

This sounds like it should be a meta ticket to add a message to Browse Happy that shows up to IE11 users. See wp_dashboard_browser_nag().

[youknowriad]

@johnbillion I created this ​https://meta.trac.wordpress.org/ticket/4863 should we close this one?

[afercia]

Now that the browsehappy API has been updated (see ​https://meta.trac.wordpress.org/ticket/4863) the dashboard notice "nag" will be displayed to Internet Explorer 11 users. See attached screenshot.

The notice message needs to be updated as it still refers to:

• "you're using an insecure version of Internet Explorer"
• "Update Internet Explorer"

[davidbaumwald]

This ticket still needs a decision and possible patch, and with 5.4 Beta 1 landing today, this is being moved to Future Release. If any maintainer or committer feels this can be included in 5.4 or wishes to assume ownership during a specific cycle, feel free to update the milestone accordingly.

[netweb]

Related: #49696 Define guidelines for minimum IE support

[sabernhardt]

option: unlinking the IE logo

[sabernhardt]

48743.diff​ simplifies the message for Internet Explorer. While editing this, I also inserted the browser name as alt text for each linked logo image.

It may be worth removing the link from the IE logo with 48743.unlinked-ie-logo.diff​, leaving an empty alt attribute for IE only. The linked downloads page highly recommends switching to Edge, though the page is still technically for downloading IE.

[sabernhardt]

At least the @since note will need updating, and I also added the ui-copy keyword if someone wants to improve the messaging.

In addition to editing the message for Internet Explorer users, any other linked browser icon image needs alt text.

[sabernhardt]

Because this includes correcting the current notice for IE users (see #comment:4), I revised the ticket summary and type.

The message would need more editing (emphasizing "If you can use another browser, please do").

Also, once there's feedback on whether to keep the IE logo link, these styles should be added to the preferred patch:

.browser-insecure .postbox-header {border-color: transparent;}
.browser-insecure .browser-icon a {display: block;}

[jeherve]

Related discussion in make/core:
​https://make.wordpress.org/core/2021/03/04/discussion-dropping-support-for-ie11/

[sabernhardt]

IE notice before and after 48743.2.diff (screen 1366 pixels wide)

[sabernhardt]

Outdated browser warning with red background (Firefox, manually setting upgrade=true and insecure=false)

[sabernhardt]

Updates in 48743.2.diff​:

1. While fixing the border styles, I changed the "out of date" browser background color to the same red as insecure browser messages (the orange only has a 1.95 contrast ratio; see also #35659).
2. Because the icon is floating to the right, I removed the link for any browser icon to avoid the slightly odd order when tabbing. I don't think it's odd enough to cause confusion, but I preferred removing all those links for simplicity and consistency. Besides, then the alt text can be empty.
3. The browser icon's negative top margin is fewer pixels to try avoiding an overlap with the heading, and the paragraph margin is set to the icon's width (128px instead of 125).
4. I kept the "insecure browser" heading text for now. If there's a better heading, I could edit that part, too.

Trac ticket: https://core.trac.wordpress.org/ticket/48743

When using IE:
<img width="620" alt="Screen Shot 2021-03-12 at 1 15 46 PM" src="​https://user-images.githubusercontent.com/541093/110984716-8143a280-8339-11eb-9c72-ef2f518efc04.png">

When using an insecure browser:
<img width="620" alt="Screen Shot 2021-03-12 at 1 17 05 PM" src="​https://user-images.githubusercontent.com/541093/110984719-81dc3900-8339-11eb-9fc9-7d15149f05cf.png">

Outdated but not insecure browser:
<img width="631" alt="Screen Shot 2021-03-12 at 1 17 29 PM" src="​https://user-images.githubusercontent.com/541093/110984723-8274cf80-8339-11eb-8a21-1a5a592c5335.png">

This PR iterates on @sabernhardt's patch - I brought back the yellow background for non-insecure notices, with black text for contrast - I think it's worth using the "warning" style instead of red/error, just to avoid over-saturating the user with alerts.

Additionally I swapped out the floating image for a flexbox layout, which also does away with needing to juggle padding & margins. The source order has been updated (it's now "text image"), but if we need to keep it as-is (for back compat?), I can adjust the flex code.

[sabernhardt]

Thanks, @ryelle. Switching to a yellow background with black text works better.

Regarding backward compatibility, the browse-happy-notice filter can replace the entire notice section (below the heading). However, a ​plugin directory search only found two old plugins listing the filter among others, and neither plugin uses that filter.

[sabernhardt]

PR 1094 still applies and looks good. Marking for commit.

[desrosj]

I'm going to use a bit of committer's discretion here and change the notice just slightly to put Internet Explorer at the beginning of the sentence to make it more obvious.

"Internet Explorer does not give you the best WordPress experience. Switch to Microsoft Edge, or another more modern browser to get the most from your site."

[antpb]

In 51117:

Administration: Introduce dashboard notice to discourage use of out of date browser.

If a browser matches Internet Explorer, the dashboard will display a notice recommending a more modern browser.

Props youknowriad, sabernhardt, afercia, SergeyBiryukov, davidbaumwald, netweb, johnbillion, jeherve.
See #48743.

[desrosj]

In 51119:

Administration: Adjust Internet Explorer message to be a bit more clear.

This moves “Internet Explorer” to the beginning of the sentence introduced in [51117] to make the reason the user is seeing this message more clear.

Props chanthaboune, jeffpaul, desrosj.
Fixes #48743.

[desrosj]

In 51120:

Coding Standards: Use single quotes when there are no variables within the string.

Follow up to [51117].

See #48743.