WordPress.org

Make WordPress Core

Opened 18 months ago

Last modified 5 weeks ago

#48743 accepted defect (bug)

Updating BrowseHappy dashboard notice to discourage IE11 usage

Reported by: youknowriad Owned by: sabernhardt
Milestone: 5.8 Priority: normal
Severity: normal Version:
Component: Administration Keywords: has-screenshots has-patch
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 15 months ago.
browse-happy-ie-message.png (16.5 KB) - added by sabernhardt 12 months ago.
48743.diff (3.0 KB) - added by sabernhardt 12 months ago.
48743.unlinked-ie-logo.diff (3.2 KB) - added by sabernhardt 12 months ago.
option: unlinking the IE logo
48743.2.diff (4.2 KB) - added by sabernhardt 2 months ago.
ie-notice-before-after.png (42.4 KB) - added by sabernhardt 2 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 2 months ago.
Outdated browser warning with red background (Firefox, manually setting upgrade=true and insecure=false)

Download all attachments as: .zip

Change History (24)

#1 @johnbillion
18 months 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
18 months ago

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

#3 @SergeyBiryukov
18 months ago

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

#4 @afercia
15 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.


15 months ago

#6 @davidbaumwald
15 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
14 months ago

Related: #49696 Define guidelines for minimum IE support

#8 @afercia
14 months ago

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

@sabernhardt
12 months ago

@sabernhardt
12 months ago

option: unlinking the IE logo

#9 @sabernhardt
12 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 10 months ago by sabernhardt (previous) (diff)

#10 @sabernhardt
8 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
5 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
2 months ago

  • Milestone changed from Future Release to 5.8

@sabernhardt
2 months ago

@sabernhardt
2 months ago

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

@sabernhardt
2 months ago

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

#14 @sabernhardt
2 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.


2 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 weeks ago

#17 @sabernhardt
5 weeks 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.

Note: See TracTickets for help on using tickets.