#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)
Change History (32)
#2
@
5 years ago
@johnbillion I created this https://meta.trac.wordpress.org/ticket/4863 should we close this one?
#3
@
5 years ago
- Milestone Awaiting Review deleted
- Resolution set to reported-upstream
- Status changed from new to closed
#4
@
5 years 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.
5 years ago
#6
@
5 years 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.
#8
@
5 years ago
- Summary changed from Consider adding a notice do discourage IE11 usage to Consider adding a notice to discourage IE11 usage
#9
@
5 years 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.
#10
@
4 years 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
@
4 years 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;}
#12
@
4 years ago
Related discussion in make/core:
https://make.wordpress.org/core/2021/03/04/discussion-dropping-support-for-ie11/
@
4 years ago
Outdated browser warning with red background (Firefox, manually setting upgrade=true and insecure=false)
#14
@
4 years ago
- Keywords needs-refresh removed
Updates in 48743.2.diff:
- 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).
- 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.
- 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).
- 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.
4 years ago
#15
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.
4 years ago
#17
@
4 years 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.
4 years ago
This ticket was mentioned in Slack in #core by hellofromtonya. View the logs.
3 years ago
#21
@
3 years ago
- Owner changed from sabernhardt to desrosj
- Status changed from accepted to assigned
#22
@
3 years 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."
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()
.