Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Tell users that IE 11 isn't supported #6764

Closed
Kaineatthelab opened this issue Mar 11, 2021 · 42 comments
Closed

Tell users that IE 11 isn't supported #6764

Kaineatthelab opened this issue Mar 11, 2021 · 42 comments
Assignees
Labels
Dependency To highlight the dependency(intra team, external, third parties) ENTITY Business Team Name Request NameX NameX and related services proxied via namex Relationships Work for Relationships team

Comments

@Kaineatthelab
Copy link
Collaborator

Kaineatthelab commented Mar 11, 2021

It is probably time to let users know, @severinbeauvais suggested this be implemented in the SBC banner as common component accross all apps.

Eg,
https://getbutterfly.com/how-to-show-an-outdated-browser-alert-on-internet-explorer-11/

@Kaineatthelab Kaineatthelab added ENTITY Business Team Name Request NameX NameX and related services proxied via namex Relationships Work for Relationships team labels Mar 11, 2021
@pwei1018 pwei1018 self-assigned this Mar 12, 2021
@pwei1018
Copy link
Collaborator

@severinbeauvais Should I use storybook to do this or SBC common component?

@severinbeauvais
Copy link
Collaborator

Hi.
It depends on where this is to be implemented:

  • in the SBC Header?
  • or as a new shared component that every app needs to import?

I'm leaning towards the first one.

@Kaineatthelab
Copy link
Collaborator Author

Kaineatthelab commented Mar 12, 2021 via email

@pwei1018
Copy link
Collaborator

@Kaineatthelab What's text of warning message we want to show up in the banner? like 'Unsupported Browser! We only support the recent versions of major browsers like Chrome, Firefox, Safari, and Edge.'

@Kaineatthelab
Copy link
Collaborator Author

@pwei1018 can we use a pop up modal, use the standard styling.

@forgeuxGH5 will put the wording in here

@severinbeauvais
Copy link
Collaborator

If it makes any difference, this is already implemented as a banner and is currently in PR review.

@Kaineatthelab
Copy link
Collaborator Author

Kaineatthelab commented Mar 18, 2021

can we see what it looks like @severinbeauvais @pwei1018

snip it the UI> or whatever is easier:)

@pwei1018
Copy link
Collaborator

@Kaineatthelab

image

@Kaineatthelab
Copy link
Collaborator Author

@forgeuxGH5 @tlebedovich ?? You ok with that^^^ With new wording? Provide some wording :)

@forgeuxGH5
Copy link
Collaborator

Two versions of text depending if we want to name supported browsers or not. If we go with the specific version is should be a dialog - too much for an alert. Or we could go with the specific version without the trademark acknowledgement but I'm not sure where we stand on that.

Specific
This website will not work properly in Internet Explorer™. We recommend viewing this website in a newer browser.
BC Registries and Online Services websites work better when viewed in the latest versions of new browsers such as:
• Chrome™
• Firefox®
• Edge®
• Safari®

The following notices acknowledge the trademark policy of their respective owners:
• Chrome is a trademark of Google LLC
• Firefox is a registered trademark of the Mozilla Foundation
• Internet Explorer is a trademark of Microsoft.
• Microsoft Edge is a registered trademark of Microsoft
• Safari is a trademark of Apple Inc., registered in the U.S. and other countries

Generic
This website will not work properly in your current browser. We recommend viewing this website in a newer browser. BC Registries and Online Services websites work better when viewed in the latest versions of most popular new browsers.

Also the unsupported browser alert should appear between the masthead and the AGM alert - not over top.

@forgeuxGH5
Copy link
Collaborator

BTW Microsoft might have a way to force a page to open in Edge - I hit one. (wix.com)

@pwei1018
Copy link
Collaborator

Looks nice.

image

@tlebedovich
Copy link

@forgeuxGH5 - do we need all the copyright info? I do think it's important to call out Internet Explorer specifically.

@forgeuxGH5
Copy link
Collaborator

That's different than what I saw - it opened the page in Edge...and had a second tab with this info:image.png

@forgeuxGH5
Copy link
Collaborator

Not sure on the trademark info - hence my comment - not sure where gov stands on this. I got that info from the services card site...

@forgeuxGH5
Copy link
Collaborator

We could go generic until we get an answer...

@severinbeauvais
Copy link
Collaborator

Instead of implementing a whole "no longer supported / download here" page, could we redirect to a public one?

@forgeuxGH5
Copy link
Collaborator

I just put that in as a example for @Kaineatthelab in case he wanted to do something like that - I think we should stick with the current implementation + my generic message until we get more info about gov stance on use of registered trademarks

@Kaineatthelab
Copy link
Collaborator Author

k generic @pwei1018 as per scotts ^^ if that works:)?

@pwei1018
Copy link
Collaborator

@Kaineatthelab @forgeuxGH5 @severinbeauvais Here is the generic text and the banner.

image

@forgeuxGH5
Copy link
Collaborator

Looks OK to me

@severinbeauvais
Copy link
Collaborator

Just a (new) thought about this:

In order for an IE11 user to see this banner, they need the app to run in their browser... which means it's working (!)... and we need to keep including the polyfills so that it works on older browsers.

Perhaps "in the future" we should have a simple JS page display instead of launching the Vue app. That would prevent IE11 users from using the app at all, and we wouldn't need to include those polyfills.

@pwei1018
Copy link
Collaborator

@Kaineatthelab this is done.

@severinbeauvais
Copy link
Collaborator

severinbeauvais commented Mar 31, 2021

@Kaineatthelab We will need a/some (small) ticket(s) to update our UIs' dependency on the latest sbc-common-components library.

@Kaineatthelab
Copy link
Collaborator Author

ok i will make one, can this ticket be closed then?

@severinbeauvais
Copy link
Collaborator

Did someone from Relationships team verify (QA) this change? Should we (Entities team) do it?

@jyoti3286
Copy link
Contributor

I can ask @Milan-Freshworks to quickly take a look and comment here

@Milan-Freshworks
Copy link
Contributor

I did not see the banner in Test env. Has it been deployed to test environment yet?

@jyoti3286
Copy link
Contributor

@pwei1018 ? ^^^^^

@pwei1018
Copy link
Collaborator

pwei1018 commented Apr 8, 2021

@Milan-Freshworks You can test it with https://test.bcregistry.ca/namerequest . It has some behavior with auth site.

@jdyck-fw jdyck-fw added the Dependency To highlight the dependency(intra team, external, third parties) label Jun 16, 2021
@severinbeauvais
Copy link
Collaborator

This appears to be implemented in the SBC Header in Dev/Test/Prod. Ie,

image.png

However, I noticed colour issues (ie, black on black) in, for example, Namerequest UI. Also I noticed that the first line is cut off on narrow screens.

So, this should maybe be looked at further (or a new ticket to fix any short-comings).

@Kaineatthelab
Copy link
Collaborator Author

@pwei1018 can you look at fixing this?

@tlebedovich
Copy link

tlebedovich commented Jun 16, 2021

Along these lines, I'm just wondering if anyone knows where the orange colour for the alert banner originally came from? us? relationships? bc gov standard? I ask only because the white text on orange doesn't meet AA and orange isn't really part of our brand palette. I wonder if we could use the bc gov yellow/gold coloured #FCBA19 banner with black text #212529 across all?

maybe we need a design ticket to explore alert banner needs for the future (ie include a close/open function, what happens if we need to stack more than one alert banner)

c/c @forgeuxGH5

@Kaineatthelab
Copy link
Collaborator Author

it was originally created by the relationship team for paybc. it is mandatory to meet AA standards so should be changed and follow the gov standard

@tlebedovich
Copy link

ok - i'll make a note to dig a little and see if bc gov have any banner standards we don't know about and if not maybe we change all to the gold/black. I can report back

@sienna-oldaccountdontuse
Copy link
Contributor

@forgeuxGH5 @tlebedovich are we re-designing this? Should we ask relationships to fix this feature after we re-design?

@tlebedovich
Copy link

HI @Sienna-Blumstengel I think for this specific one, we should go with the gold banner/black text as mentioned above (like the one we did for Name Request recently). Next week I can look into this more (off tomorrow).

@tlebedovich
Copy link

tlebedovich commented Jun 17, 2021

ps I will let @forgeuxGH5 rewrite the copy message for this one. We tend to avoid using "!" unless something is on fire (as shown in Patrick's original screenshot from mar 18 :)

@jmills-cgi
Copy link
Contributor

@Sienna-Blumstengel this ticket seems to be stuck in staging. Would you take a look please?

@severinbeauvais
Copy link
Collaborator

@jdyck-fw Can we follow up on this ticket please?

@Kaineatthelab
Copy link
Collaborator Author

I think we close this and if we want a design it should be a different ticket, its already done. @severinbeauvais maybe someone can create a UI Design - Banner Conistency incl IE11/Pay etc...

image.png

@severinbeauvais
Copy link
Collaborator

New UI Design ticket #9129 has been created.

As for THIS ticket, it has long been implemented, so I'm closing it.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Dependency To highlight the dependency(intra team, external, third parties) ENTITY Business Team Name Request NameX NameX and related services proxied via namex Relationships Work for Relationships team
Projects
None yet
Development

No branches or pull requests

10 participants