Focus iteration #1245

dashouse · 2019-03-12T14:19:50Z

WIP

Create page for examples Add examples Update examples Update content Temporarily disable error summary js Update button information Fix typos Add information about border on tabs Update based on clarification with a11y team Add link class to links in buton section Update focusable fill style to include border Focus and component changes

aliuk2012 · 2019-04-30T13:25:32Z

src/components/footer/_footer.scss

 $govuk-footer-link: $govuk-footer-text;
- $govuk-footer-link-hover: #171819;
+ $govuk-footer-link-hover: $govuk-footer-text;


All of the above has already been done.

36degrees · 2019-04-30T13:53:40Z

src/components/accordion/_accordion.scss

 display: inline;
+ margin: 0;


From talking to @dashouse, this is removing the user agent default styling.

36degrees · 2019-04-30T13:56:56Z

src/components/details/_details.scss

@@ -22,7 +22,7 @@
 margin-bottom: govuk-spacing(1);

 // Allow for absolutely positioned marker and align with disclosed text
- padding-left: govuk-spacing(4) + $govuk-border-width;
+ padding-left: govuk-spacing(3) + $govuk-border-width;


Don't think we want this change – it breaks the alignment between the summary and the revealed content.

Before

After

36degrees · 2019-04-30T13:57:21Z

src/components/checkboxes/_checkboxes.scss

@@ -125,6 +125,7 @@
 // Since box-shadows are removed when users customise their colours, we set
 // a transparent outline that is shown instead.
 // https://accessibility.blog.gov.uk/2017/03/27/how-users-change-colours-on-websites/
+ border: 4px solid govuk-colour("black");


Think this can just be border-width

36degrees · 2019-04-30T13:57:30Z

src/components/button/_button.scss

@@ -95,9 +111,9 @@
 position: absolute;

 top: -$govuk-border-width-form-element;
- right: -$govuk-border-width-form-element;
+ right: -5px;


Not sure if these changes are required or not.

36degrees · 2019-04-30T13:58:05Z

src/components/tabs/_tabs.scss

@@ -97,12 +108,17 @@
 padding-left: govuk-spacing(4) - 1px;

 border: 1px solid $govuk-border-colour;
+ border-top: 0;


This affects tabs with overridden colours - the top border disappears. May want to try setting it to transparent instead?

36degrees · 2019-04-30T14:02:35Z

src/components/checkboxes/_checkboxes.scss

@@ -125,6 +125,7 @@
 // Since box-shadows are removed when users customise their colours, we set
 // a transparent outline that is shown instead.
 // https://accessibility.blog.gov.uk/2017/03/27/how-users-change-colours-on-websites/
+ border: 4px solid govuk-colour("black");
 outline: $govuk-focus-width solid transparent;


This might not be required any more, with the border-width change.

36degrees · 2019-04-30T14:03:03Z

src/components/radios/_radios.scss

@@ -126,6 +126,7 @@
 // Since box-shadows are removed when users customise their colours we set a
 // transparent outline that is shown instead.
 // https://accessibility.blog.gov.uk/2017/03/27/how-users-change-colours-on-websites/
+ border: 4px solid govuk-colour("black");
 outline: $govuk-focus-width solid transparent;


This may not be required any more either (as with checkboxes)

36degrees · 2019-04-30T14:05:01Z

src/helpers/_links.scss

@@ -31,24 +31,29 @@
 @mixin govuk-link-style-default {
 &:link {
 color: $govuk-link-colour;
+ text-decoration-color: govuk-colour("light-blue");


We're now not making this change (at least for now)

36degrees · 2019-04-30T14:06:40Z

src/components/back-link/_back-link.scss

@@ -25,6 +25,11 @@
 // Underline is provided by a bottom border
 text-decoration: none;

+
+ &:focus {


We may be able to close #1236 with the focus state change here.

NickColley · 2019-04-30T15:23:22Z

src/components/footer/_footer.scss


 &:link,
 &:visited {
 color: $govuk-footer-link;
+ text-decoration: none;


@dashouse are we sure about removing the underline in the footer, it makes all the links look like body content, there's no way of knowing something is clickable.

hmm im presuming this change it to make the footer consistent with the header...

Decided to go with this for now since it fits our navigation patterns.

I believe that this could fail WCAG though:

https://www.w3.org/TR/WCAG20-TECHS/F73.html

NickColley · 2019-04-30T15:27:36Z

src/helpers/_focusable.scss

@@ -30,5 +29,28 @@
 outline: $govuk-focus-width solid $govuk-focus-colour;
 outline-offset: 0;
 background-color: $govuk-focus-colour;
+ text-decoration: none;


@dashouse can you confirm that you want to remove text-decoration here? It's think it's only used in the skip-link component after these changes, which I'm not sure is a good idea since the underline helps give it the affordance that it can be clicked?

We want to review these mixins once we've done all the work but just wondering here...

This should only affect links that are focussed, I think? I believe the intention is to avoid a 'double underline' from the text decoration and the black box shadow together.

This mixin is no longer used with links, I think you're replying thinking of the mixin below this one potentially?

Spoke to Dave and given that this is only used by tabbing to the component we've decided to leave the underline in for now.

Iterates on #1245

govuk-design-system-ci temporarily deployed to govuk-frontend-review-pr-1245 March 12, 2019 14:22 Inactive

dashouse force-pushed the focus-style-iteration branch from c024d24 to d4e8f7b Compare March 12, 2019 14:40

govuk-design-system-ci requested a deployment to govuk-frontend-review-pr-1245 March 12, 2019 14:42 Abandoned

govuk-design-system-ci requested a deployment to govuk-frontend-review-pr-1245 March 12, 2019 14:55 Abandoned

govuk-design-system-ci temporarily deployed to govuk-frontend-review-pr-1245 March 13, 2019 10:33 Inactive

govuk-design-system-ci temporarily deployed to govuk-frontend-review-pr-1245 March 13, 2019 11:33 Inactive

govuk-design-system-ci temporarily deployed to govuk-frontend-review-pr-1245 March 13, 2019 14:51 Inactive

govuk-design-system-ci temporarily deployed to govuk-frontend-review-pr-1245 March 13, 2019 15:27 Inactive

govuk-design-system-ci temporarily deployed to govuk-frontend-review-pr-1245 March 13, 2019 15:37 Inactive

govuk-design-system-ci temporarily deployed to govuk-frontend-review-pr-1245 March 13, 2019 17:18 Inactive

govuk-design-system-ci temporarily deployed to govuk-frontend-review-pr-1245 March 13, 2019 17:39 Inactive

govuk-design-system-ci temporarily deployed to govuk-frontend-review-pr-1245 March 14, 2019 09:48 Inactive

govuk-design-system-ci temporarily deployed to govuk-frontend-review-pr-1245 March 14, 2019 11:23 Inactive

govuk-design-system-ci temporarily deployed to govuk-frontend-review-pr-1245 March 14, 2019 11:30 Inactive

dashouse force-pushed the focus-style-iteration branch from 6dd0ea4 to 1f3390b Compare March 14, 2019 14:28

govuk-design-system-ci temporarily deployed to govuk-frontend-review-pr-1245 March 14, 2019 14:29 Inactive

govuk-design-system-ci temporarily deployed to govuk-frontend-review-pr-1245 March 14, 2019 14:40 Inactive

govuk-design-system-ci temporarily deployed to govuk-frontend-review-pr-1245 March 15, 2019 07:19 Inactive

govuk-design-system-ci temporarily deployed to govuk-frontend-review-pr-1245 March 18, 2019 08:28 Inactive

govuk-design-system-ci temporarily deployed to govuk-frontend-review-pr-1245 March 21, 2019 13:01 Inactive

govuk-design-system-ci temporarily deployed to govuk-frontend-review-pr-1245 March 21, 2019 14:58 Inactive

govuk-design-system-ci temporarily deployed to govuk-frontend-review-pr-1245 March 21, 2019 15:44 Inactive

govuk-design-system-ci temporarily deployed to govuk-frontend-review-pr-1245 March 22, 2019 07:13 Inactive

govuk-design-system-ci temporarily deployed to govuk-frontend-review-pr-1245 March 22, 2019 11:16 Inactive

govuk-design-system-ci temporarily deployed to govuk-frontend-review-pr-1245 March 25, 2019 09:56 Inactive

Dave House added 5 commits April 16, 2019 15:59

Update colour palette - initial

5d58b5e

Update footer info

02ed643

Update accordions focus style

722b000

add

8871a6e

Dave House added 5 commits April 16, 2019 16:00

Update example page

17813ee

Fix accordion border issue

fc65516

Update content about tabs changes

ceeb493

Update style to use box-shadow only

279d5c4

Add text link in context section

393f7c4

36degrees force-pushed the focus-style-iteration branch from 6bb92e8 to 393f7c4 Compare April 16, 2019 15:04

govuk-design-system-ci temporarily deployed to govuk-frontend-review-pr-1245 April 16, 2019 15:04 Inactive

Update hover state to use new grey

2bf65e3

govuk-design-system-ci deployed to govuk-frontend-review-pr-1245 April 16, 2019 15:10 View deployment

This was referenced Apr 30, 2019

Update tabs to use the new styles and the new focus state #1306

Closed

Update accordion to use the new styles and the new focus state #1307

Closed

aliuk2012 reviewed Apr 30, 2019

View reviewed changes

36degrees reviewed Apr 30, 2019

View reviewed changes

NickColley reviewed Apr 30, 2019

View reviewed changes

NickColley mentioned this pull request Apr 30, 2019

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

Merged

hannalaakso mentioned this pull request May 1, 2019

Update form inputs focus to comply with WCAG 2.1 #1312

Merged

aliuk2012 mentioned this pull request May 8, 2019

Update footer component to use the new focus style #1320

Closed

7 tasks

hannalaakso mentioned this pull request May 9, 2019

Update tabs component to WCAG 2.1 compliant focus style #1326

Merged

hannalaakso added a commit that referenced this pull request May 9, 2019

Update tabs component to WCAG 2.1 compliant focus style

9476898

Iterates on #1245

dashouse closed this May 20, 2019

dashouse deleted the focus-style-iteration branch May 20, 2019 08:06

aliuk2012 pushed a commit that referenced this pull request Jun 14, 2019

Update tabs component to WCAG 2.1 compliant focus style

3dec7b0

Iterates on #1245

aliuk2012 pushed a commit that referenced this pull request Jun 14, 2019

Update tabs component to WCAG 2.1 compliant focus style

4fed9d2

Iterates on #1245

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Focus iteration #1245

Focus iteration #1245

dashouse commented Mar 12, 2019

aliuk2012 Apr 30, 2019

36degrees Apr 30, 2019

36degrees Apr 30, 2019

36degrees Apr 30, 2019

36degrees Apr 30, 2019

36degrees Apr 30, 2019

36degrees Apr 30, 2019

36degrees Apr 30, 2019

36degrees Apr 30, 2019

36degrees Apr 30, 2019

NickColley Apr 30, 2019

NickColley Apr 30, 2019

NickColley May 1, 2019

NickColley Apr 30, 2019

36degrees Apr 30, 2019

NickColley Apr 30, 2019

NickColley May 1, 2019

Focus iteration #1245

Focus iteration #1245

Conversation

dashouse commented Mar 12, 2019

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Before

After

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

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