WordPress.org

Make WordPress Core

Opened 2 years ago

Closed 5 months ago

Last modified 5 months ago

#48743 closed defect (bug) (fixed)

Updating BrowseHappy dashboard notice to discourage IE11 usage

Reported by: youknowriad Owned by: desrosj
Milestone: 5.8 Priority: normal
Severity: normal Version:
Component: Administration Keywords: has-screenshots has-patch commit
Focuses: ui, accessibility, ui-copy Cc:

Description

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.

Attachments (7)

ie11 dashboard nag.png (132.4 KB) - added by afercia 21 months ago.
browse-happy-ie-message.png (16.5 KB) - added by sabernhardt 18 months ago.
48743.diff (3.0 KB) - added by sabernhardt 18 months ago.
48743.unlinked-ie-logo.diff (3.2 KB) - added by sabernhardt 18 months ago.
option: unlinking the IE logo
48743.2.diff (4.2 KB) - added by sabernhardt 8 months ago.
ie-notice-before-after.png (42.4 KB) - added by sabernhardt 8 months ago.
IE notice before and after 48743.2.diff (screen 1366 pixels wide)
outdated-browser-notice-before-after.png (56.1 KB) - added by sabernhardt 8 months ago.
Outdated browser warning with red background (Firefox, manually setting upgrade=true and insecure=false)

Download all attachments as: .zip

Change History (32)

#1 @johnbillion
2 years ago

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().

#2 @youknowriad
2 years ago

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

#3 @SergeyBiryukov
2 years ago

  • Milestone Awaiting Review deleted
  • Resolution set to reported-upstream
  • Status changed from new to closed

#4 @afercia
21 months ago

  • Component changed from Site Health to Administration
  • Focuses ui added; javascript css removed
  • Keywords needs-patch has-screenshots added
  • Milestone set to 5.4
  • Resolution reported-upstream deleted
  • Status changed from closed to reopened

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"

This ticket was mentioned in Slack in #core by david.baumwald. View the logs.


21 months ago

#6 @davidbaumwald
21 months ago

  • Milestone changed from 5.4 to Future Release

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.

#7 @netweb
19 months ago

Related: #49696 Define guidelines for minimum IE support

#8 @afercia
19 months ago

  • Summary changed from Consider adding a notice do discourage IE11 usage to Consider adding a notice to discourage IE11 usage

@sabernhardt
18 months ago

@sabernhardt
18 months ago

option: unlinking the IE logo

#9 @sabernhardt
18 months ago

  • Keywords has-patch needs-testing added; needs-patch removed

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.

Last edited 16 months ago by sabernhardt (previous) (diff)

#10 @sabernhardt
14 months ago

  • Focuses accessibility ui-copy added
  • Keywords needs-refresh added; needs-testing removed

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.

#11 @sabernhardt
11 months ago

  • Owner set to sabernhardt
  • Status changed from reopened to accepted
  • Summary changed from Consider adding a notice to discourage IE11 usage to Updating BrowseHappy dashboard notice to discourage IE11 usage
  • Type changed from feature request to defect (bug)

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;}

#13 @sabernhardt
8 months ago

  • Milestone changed from Future Release to 5.8

@sabernhardt
8 months ago

@sabernhardt
8 months ago

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

@sabernhardt
8 months ago

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

#14 @sabernhardt
8 months ago

  • Keywords needs-refresh removed

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.

This ticket was mentioned in PR #1094 on WordPress/wordpress-develop by ryelle.


7 months ago

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.

This ticket was mentioned in Slack in #core by adamsilverstein. View the logs.


7 months ago

#17 @sabernhardt
7 months ago

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.

This ticket was mentioned in Slack in #accessibility by joedolson. View the logs.


5 months ago

#19 @sabernhardt
5 months ago

  • Keywords commit added

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

This ticket was mentioned in Slack in #core by hellofromtonya. View the logs.


5 months ago

#21 @desrosj
5 months ago

  • Owner changed from sabernhardt to desrosj
  • Status changed from accepted to assigned

#22 @desrosj
5 months ago

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."

#23 @antpb
5 months ago

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.

#24 @desrosj
5 months ago

  • Resolution set to fixed
  • Status changed from assigned to closed

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.

#25 @desrosj
5 months ago

In 51120:

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

Follow up to [51117].

See #48743.

Note: See TracTickets for help on using tickets.