Tell users that IE 11 isn't supported

[Kaineatthelab]

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/

[pwei1018]

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

[severinbeauvais]

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]

SBC header is share right so would work there?

Kaine Sparks Director, Digital Operations| BC Registries and Online Serviceshttp://www.bcregistryservices.gov.bc.ca/ Service BC Ministry of Citizens’ Services T: 250-415-3957 | Web: http://www.servicebc.gov.bc.cahttp://www.servicebc.gov.bc.ca/ “Access to government services made easy”

From: Séverin Beauvais @.> Sent: March 12, 2021 11:20 AM To: bcgov/entity @.> Cc: Sparks, Kaine CITZ:EX @.>; Author @.> Subject: Re: [bcgov/entity] Tell users that IE 11 isn't supported (#6764)

[EXTERNAL] This email came from an external source. Only open attachments or links that you are expecting from a known sender.

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.

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHubhttps://github.com/bcgov/entity/issues/6764#issuecomment-797699640, or unsubscribehttps://github.com/notifications/unsubscribe-auth/AIRHOIPMQKBL4BZHRE2DR5LTDJLOXANCNFSM4ZBGSLWA.

[pwei1018]

@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]

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

@forgeuxGH5 will put the wording in here

[severinbeauvais]

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

[Kaineatthelab]

can we see what it looks like @severinbeauvais @pwei1018

snip it the UI> or whatever is easier:)

[pwei1018]

@Kaineatthelab

[Kaineatthelab]

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

[forgeuxGH5]

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]

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

[pwei1018]

Looks nice.

[tlebedovich]

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

[forgeuxGH5]

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

[forgeuxGH5]

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]

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

[severinbeauvais]

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

[forgeuxGH5]

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]

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

[pwei1018]

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

[forgeuxGH5]

Looks OK to me

[severinbeauvais]

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]

@Kaineatthelab this is done.

[severinbeauvais]

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

[Kaineatthelab]

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

[severinbeauvais]

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

[jyoti3286]

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

[Milan-Freshworks]

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

[jyoti3286]

@pwei1018 ? ^^^^^

[pwei1018]

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

[severinbeauvais]

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

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]

@pwei1018 can you look at fixing this?

[tlebedovich]

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]

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]

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]

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

[tlebedovich]

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]

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]

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

[severinbeauvais]

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

[Kaineatthelab]

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

[severinbeauvais]

New UI Design ticket #9129 has been created.

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