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

NickColley · 2019-04-30T15:11:32Z

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:

After:

Legacy:

Back link

Before:

After:

Legacy:

Breadcrumbs

Before:

After:

Legacy:

Details

Before:

After:

Legacy:

Skip link

Before:

After:

Legacy:

Error summary links

Before:

After:

Legacy:

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:

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

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.

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

Internet Explorer 11

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

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

src/components/details/_details.scss

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


src/helpers/_links.scss

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

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


src/helpers/_focusable.scss

36degrees · 2019-05-03T08:49:15Z

src/helpers/_focusable.scss

+  // 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


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

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.

hannalaakso · 2019-05-07T08:48:18Z

src/helpers/_focusable.scss

+  text-decoration: none;
+}
+
+@mixin govuk-focusable-text-link {


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.

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

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>

…ixin Co-authored-by: Nick Colley <nick.colley@digital.cabinet-office.gov.uk>

Co-authored-by: Nick Colley <nick.colley@digital.cabinet-office.gov.uk>

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>

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.

aliuk2012 · 2019-05-08T11:00:47Z

src/components/skip-link/_skip-link.scss

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


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

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

🤔 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

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 · 2019-05-08T11:03:33Z

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

aliuk2012

LGTM 👍

NickColley changed the base branch from master to v3 April 30, 2019 15:11

govuk-design-system-ci temporarily deployed to govuk-frontend-review-pr-1309 April 30, 2019 15:11 Inactive

govuk-design-system-ci temporarily deployed to govuk-frontend-review-pr-1309 April 30, 2019 15:17 Inactive

govuk-design-system-ci temporarily deployed to govuk-frontend-review-pr-1309 April 30, 2019 15:29 Inactive

govuk-design-system-ci temporarily deployed to govuk-frontend-review-pr-1309 April 30, 2019 15:38 Inactive

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

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

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

36degrees reviewed May 3, 2019

View reviewed changes

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

NickColley force-pushed the new-focus-links branch from c983460 to a3db9e5 Compare May 3, 2019 11:42

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

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

NickColley marked this pull request as ready for review May 3, 2019 12:20

hannalaakso reviewed May 7, 2019

View reviewed changes

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

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

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

NickColley force-pushed the new-focus-links branch from 7ed7fe4 to 822c5f9 Compare May 8, 2019 10:03

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

NickColley force-pushed the new-focus-links branch from 822c5f9 to d0a1965 Compare May 8, 2019 10:16

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

aliuk2012 and others added 7 commits May 8, 2019 11:34

Update govuk-link-common mixin to use new govuk-focusable-text-link m…

1979c10

…ixin Co-authored-by: Nick Colley <nick.colley@digital.cabinet-office.gov.uk>

Update back-link component focus to avoid duplicate border

09ff00c

Co-authored-by: Nick Colley <nick.colley@digital.cabinet-office.gov.uk>

Update details focus styles to match updated focussed state

a921fcc

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>

Add new focus style to error summary links

1570997

Use simpler focus styles for skip-link component

52a6712

Update header to align with new focus state styles

3118967

NickColley force-pushed the new-focus-links branch from d0a1965 to eca6ca0 Compare May 8, 2019 10:35

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

aliuk2012 reviewed May 8, 2019

View reviewed changes

Add CHANGELOG entry

c0a6776

govuk-design-system-ci deployed to govuk-frontend-review-pr-1309 May 8, 2019 11:05 View deployment

aliuk2012 approved these changes May 8, 2019

View reviewed changes

NickColley merged commit 3a43566 into v3 May 8, 2019

NickColley deleted the new-focus-links branch May 8, 2019 11:56

NickColley mentioned this pull request May 31, 2019

Focus indicator is partially left behind in some browsers #1404

Closed

NickColley mentioned this pull request Jul 12, 2019

Fix focus state overlapping surrounding content #1491

Merged

snyk-bot mentioned this pull request Feb 25, 2020

[Snyk] Upgrade govuk-frontend from 3.0.0 to 3.5.0 ministryofjustice/offender-categorisation#400

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

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

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

NickColley commented Apr 30, 2019 •

edited

Loading

This comment was marked as resolved.

This comment was marked as resolved.

36degrees May 3, 2019

NickColley May 3, 2019

hannalaakso May 7, 2019

NickColley May 7, 2019

hannalaakso May 8, 2019

aliuk2012 May 8, 2019

NickColley May 8, 2019

aliuk2012 May 8, 2019

NickColley May 8, 2019

aliuk2012 commented May 8, 2019

aliuk2012 left a comment

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

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

Conversation

NickColley commented Apr 30, 2019 • edited Loading

Component changes

Links

Back link

Breadcrumbs

Details

Skip link

Error summary links

Testing notes

Edge 18

Internet Explorer 11

This comment was marked as resolved.

This comment was marked as resolved.

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

aliuk2012 commented May 8, 2019

aliuk2012 left a comment

Choose a reason for hiding this comment

LGTM 👍

NickColley commented Apr 30, 2019 •

edited

Loading