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

Update links (and things that look like links) to use the new focus style #1309

Merged
merged 9 commits into from May 8, 2019

Conversation

@nickcolley
Copy link
Contributor

commented Apr 30, 2019

Implementation of the focus iteration.

Updates components and styles that mostly look like 'links' including:

  • Links (including text and muted variants)
  • Back link
  • Breadcrumbs
  • Details
  • Links within the error summary
  • Skip link

Component changes

Screenshots

Links

Before:
govuk-frontend-review herokuapp com_examples_links

After:
localhost_3000_examples_links

Legacy:
localhost_3000_examples_links_legacy=1

Back link

Before:

Screen Shot 2019-05-03 at 13 12 39

After:
Screen Shot 2019-05-03 at 13 11 31

Legacy:
Screen Shot 2019-05-03 at 13 11 35

Breadcrumbs

Before:
Screen Shot 2019-05-03 at 13 16 37

After:
Screen Shot 2019-05-03 at 13 04 12

Legacy:
Screen Shot 2019-05-03 at 13 04 07

Details

Before:
Screen Shot 2019-05-03 at 13 16 23

After:
Screen Shot 2019-05-03 at 12 48 58

Legacy:
Screen Shot 2019-05-03 at 12 50 37

Skip link

Before:
Screen Shot 2019-05-03 at 13 15 46

After:
Screen Shot 2019-05-03 at 13 10 04

Legacy:
Screen Shot 2019-05-03 at 13 10 11

Error summary links

Before:
Screen Shot 2019-05-03 at 13 14 14

After:
Screen Shot 2019-05-03 at 13 14 21

Legacy:
Screen Shot 2019-05-03 at 13 14 26

Testing notes

Internet explorer 8 does not have support for box-shadow, to meet the WCAG 2.1 requirements we intentionally unset the outline and allow the user-agent style to appear which looks like the following:

Screen Shot 2019-05-01 at 13 43 46

We've found some rendering issues with Edge 18 and Internet Explorer 11

Screen Shot 2019-05-01 at 14 01 08

Screen Shot 2019-05-01 at 14 00 20

Screen Shot 2019-05-01 at 13 59 52

Edge 18

You can see that in Edge 18, all custom focus styles are broken, the following example is of www.GOV.UK that is not using our new focus styles.
edge-18-focus-styles-govuk

This is how the new focus styles look in Edge 18:
edge-18-focus-styles

Internet Explorer 11

ie-11-focus-styles

According to this, https://en.wikipedia.org/wiki/Microsoft_Edge#Chromium_(2019%E2%80%93present) the chromium version of Edge is going to be fall this year

You can see for a browser like Chrome, that it takes maybe 2-3 months before most people migrate to the latest version http://gs.statcounter.com/browser-version-market-share

So we're looking at Edge being fixed end of the year, early next year.

For Internet Explorer / Edge traffic:

  • IE11 makes up 99.18% percent of Internet Explorer traffic (4,184,234 users in a month)
  • Edge 17 1,707,439(59.02% of Edge traffic)
  • Edge 18 757,865(26.20% of Edge traffic)

It's dropped by around 1million users a month in a year, but is pretty stable
Screen Shot 2019-05-02 at 11 04 37

Overall IE11 and Edge 18 will have around 13% share of our users for at least 7-8months, if not more.

Edge 18 has quite problematic issues but this can be seen on any website using custom
focus styles. Edge 18 supports 'drop-shadow()' which can work but only on elements that are display: inline it also doesnt work with users who change their colours, with this in mind we think the complexity is not worth the cost to users for all browsers.

Edge 19+ will be using the Chromium rendering engine so this will not be an issue.

Edge 17 and below, and IE 9-11 have lesser issues that we have determined will not cause a barrier.

See: https://gist.github.com/nickcolley/3788eefd34e7f04391de07867a85018b for an example of how drop-shadow() could work.

With all this in mind we're going to raise a bug report with the Edge team to make them aware of this problem that was introduced in Edge 18 (with previous versions behaving like Internet Explorer).

We have also decided to continue with the rendering issues with Internet Explorer 11 as we think the focus styles are still an improvement over user-agent styling.

Related Edge bug: https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/21053902/

Closes: #1302

Also fixes #1236

@nickcolley nickcolley changed the base branch from master to v3 Apr 30, 2019

@govuk-design-system-ci govuk-design-system-ci temporarily deployed to govuk-frontend-review-pr-1309 Apr 30, 2019 Inactive

@govuk-design-system-ci govuk-design-system-ci temporarily deployed to govuk-frontend-review-pr-1309 Apr 30, 2019 Inactive

@govuk-design-system-ci govuk-design-system-ci temporarily deployed to govuk-frontend-review-pr-1309 Apr 30, 2019 Inactive

@govuk-design-system-ci govuk-design-system-ci temporarily deployed to govuk-frontend-review-pr-1309 Apr 30, 2019 Inactive

@nickcolley nickcolley added this to Needs review in Design System Sprint Board via automation Apr 30, 2019

@aliuk2012 aliuk2012 added this to the v3.0.0 milestone May 1, 2019

@govuk-design-system-ci govuk-design-system-ci temporarily deployed to govuk-frontend-review-pr-1309 May 1, 2019 Inactive

@govuk-design-system-ci govuk-design-system-ci temporarily deployed to govuk-frontend-review-pr-1309 May 1, 2019 Inactive

color: $govuk-focus-text-colour;
background: $govuk-focus-colour;
.govuk-details__summary:hover {
color: $govuk-link-hover-colour;

This comment was marked as resolved.

Copy link
@36degrees

36degrees May 3, 2019

Contributor

This is affecting focus styles too, which I don't believe it should be.

Screenshot 2019-05-03 at 09 35 16BST

@@ -10,7 +10,7 @@

@mixin govuk-link-common {
@include govuk-typography-common;
@include govuk-focusable-fill;
@include govuk-focusable-text-link;

This comment was marked as resolved.

Copy link
@36degrees

36degrees May 3, 2019

Contributor

Links don't seem to be getting the focus text colour when in compatibility mode – happening on master as well so I don't think it was fixed by #1310 either?

Screenshot 2019-05-03 at 09 41 10BST

Realised this was fixed by #1310, but on the v3 branch – can we rebase against v3 to bring that in now it's been merged?

src/helpers/_focusable.scss Outdated Show resolved Hide resolved
// backgrounds and box-shadows disappear, so we need to ensure there's a
// transparent outline which will be set to a visible colour.

// Since Internet Explorer 8 does not support box-shadow, we want to force the user-agent outlines

This comment has been minimized.

Copy link
@36degrees

36degrees May 3, 2019

Contributor

Should we consider adding e.g. a black border all round for IE8? Or are we happy with just user agent defaults?

This comment has been minimized.

Copy link
@nickcolley

nickcolley May 3, 2019

Author Contributor

Adding a black border may make reading the text difficult, so the user-agent styles (screenshot) above seemed better. Happy to go with whatever people think is best.

@govuk-design-system-ci govuk-design-system-ci temporarily deployed to govuk-frontend-review-pr-1309 May 3, 2019 Inactive

@nickcolley nickcolley force-pushed the new-focus-links branch from c983460 to a3db9e5 May 3, 2019

@govuk-design-system-ci govuk-design-system-ci temporarily deployed to govuk-frontend-review-pr-1309 May 3, 2019 Inactive

@govuk-design-system-ci govuk-design-system-ci temporarily deployed to govuk-frontend-review-pr-1309 May 3, 2019 Inactive

@nickcolley nickcolley marked this pull request as ready for review May 3, 2019

text-decoration: none;
}

@mixin govuk-focusable-text-link {

This comment has been minimized.

Copy link
@hannalaakso

hannalaakso May 7, 2019

Member

This mixin seems to be performing a task very similar to @mixin govuk-focusable-fill. Do we need both? It would be good to have a comment to indicate what the difference between the two is.

This comment has been minimized.

Copy link
@nickcolley

nickcolley May 7, 2019

Author Contributor

As discussed on Slack we're going to wait until we have everything merged before deciding how the mixins should look.

This comment has been minimized.

Copy link
@hannalaakso

@govuk-design-system-ci govuk-design-system-ci temporarily deployed to govuk-frontend-review-pr-1309 May 7, 2019 Inactive

@govuk-design-system-ci govuk-design-system-ci temporarily deployed to govuk-frontend-review-pr-1309 May 7, 2019 Inactive

@govuk-design-system-ci govuk-design-system-ci temporarily deployed to govuk-frontend-review-pr-1309 May 7, 2019 Inactive

@nickcolley nickcolley force-pushed the new-focus-links branch from 7ed7fe4 to 822c5f9 May 8, 2019

@govuk-design-system-ci govuk-design-system-ci temporarily deployed to govuk-frontend-review-pr-1309 May 8, 2019 Inactive

@nickcolley nickcolley force-pushed the new-focus-links branch from 822c5f9 to d0a1965 May 8, 2019

@govuk-design-system-ci govuk-design-system-ci temporarily deployed to govuk-frontend-review-pr-1309 May 8, 2019 Inactive

aliuk2012 and others added 7 commits Apr 30, 2019
Adding govuk-focusable-text-link mixin
This approach uses box-shadow, which has broadly good support across browser.

We have found that Edge and Internet Explorer produce rendering issues.

Edge 18 has quite problematic issues but this can be seen on any website using custom
focus styles. Edge 18 supports 'drop-shadow()' which can work but only on elements that are `diplay: inline`, with this in mind we think the complexity is not worth the cost to users for all browsers.

Edge 19+ will be using the Chromium rendering engine so this will not be an issue.

Edge 17 and below, and IE 9-11 have lesser issues that we have determined will not cause a barrier.

See: https://gist.github.com/nickcolley/3788eefd34e7f04391de07867a85018b for an example of how `drop-shadow()` could work.

Co-authored-by: Nick Colley <nick.colley@digital.cabinet-office.gov.uk>
Update govuk-link-common mixin to use new govuk-focusable-text-link m…
…ixin

Co-authored-by: Nick Colley <nick.colley@digital.cabinet-office.gov.uk>
Update back-link component focus to avoid duplicate border
Co-authored-by: Nick Colley <nick.colley@digital.cabinet-office.gov.uk>
Update details focus styles to match updated focussed state
We can remove a lot of the custom focus styles since they were relevant to the relationship between the background and outline which are not used anymore.

Co-authored-by: Nick Colley <nick.colley@digital.cabinet-office.gov.uk>
Remove incorrectly overriden error summary focus style
When we updated the the focus styles for to have the same colour as the body text, we forgot to update the specific overrides we need when using GOV.UK Frontend with GOV.UK Template (legacy).

This meant that when you focused a link in the error summary the color was red instead of black, removing this block achieves the result we want.

@nickcolley nickcolley force-pushed the new-focus-links branch from d0a1965 to eca6ca0 May 8, 2019

@govuk-design-system-ci govuk-design-system-ci temporarily deployed to govuk-frontend-review-pr-1309 May 8, 2019 Inactive

@@ -5,7 +5,8 @@
@include govuk-exports("govuk/component/skip-link") {
.govuk-skip-link {
@include govuk-visually-hidden-focusable;
@include govuk-link-common;
@include govuk-typography-common;
@include govuk-focusable-fill;

This comment has been minimized.

Copy link
@aliuk2012

aliuk2012 May 8, 2019

Contributor

Why is this using govuk-focusable-fill and why is the skip link styled differently to other links?

This comment has been minimized.

Copy link
@nickcolley

nickcolley May 8, 2019

Author Contributor

This is a design decision from @dashouse to not use the heavy underline focus state for skip-link.

This comment has been minimized.

Copy link
@aliuk2012

aliuk2012 May 8, 2019

Contributor

🤔 ok, currently this component and Footer are the only two components still using govuk-focusable-fill mixin. When we come to review the public mixing perhaps we can just hard code the mixins output here instead of having it hanging around

This comment has been minimized.

Copy link
@nickcolley

nickcolley May 8, 2019

Author Contributor

Yeah once we've got everything production ready we can (after the audit potentially) decide on how the mixins should work, with the new guidance in mind...

@aliuk2012

This comment has been minimized.

Copy link
Contributor

commented May 8, 2019

Looks good from a code POV, I'm now going to run through a quick xbrowser test before approving

@aliuk2012
Copy link
Contributor

left a comment

LGTM 👍

@nickcolley nickcolley merged commit 3a43566 into v3 May 8, 2019

2 checks passed

continuous-integration/travis-ci/pr The Travis CI build passed
Details
continuous-integration/travis-ci/push The Travis CI build passed
Details

Design System Sprint Board automation moved this from Needs review to Done May 8, 2019

@nickcolley nickcolley deleted the new-focus-links branch May 8, 2019

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
5 participants
You can’t perform that action at this time.