Update accordion to use new WCAG 2.1 compliant focus style #1324

NickColley · 2019-05-08T17:47:10Z

Updates the accordion component to use the new WCAG 2.1 compliant focus styles.

GIF demonstrations

IE8

IE9

IE10

IE11

Firefox with changed colours

Firefox

Safari

Chrome

Chrome mobile

Safari mobile

Closes #1307

NickColley

Needs a CHANGELOG entry

36degrees · 2019-05-09T15:26:30Z

src/components/accordion/_accordion.scss

@@ -5,6 +5,10 @@

 @include govuk-exports("govuk/component/accordion") {

+  $govuk-accordion-link-colour: govuk-colour("blue");


I think these should probably reference $govuk-link-colour / ~~$govuk-link-hover-colour~~?

EDIT: As Hanna pointed out in #1326, ``$govuk-link-hover-colouris dark-blue, so that doesn't work, but$govuk-link-colour` I think makes sense.

36degrees · 2019-05-09T15:27:21Z

src/components/accordion/_accordion.scss

      border-width: 0;
      color: $govuk-link-colour;
      background: none;
      cursor: pointer;
+      -webkit-appearance: none;


Should we use appearance: none here and let autoprefixer do the rest?

I don't think that's actually real CSS right now? In our button CSS we use the webkit prefix too...

https://drafts.csswg.org/css-ui-4/#appearance-switching

I'd raise an issue to update all of them if you think it's worth doing.

src/components/accordion/_accordion.scss

+      @include govuk-not-ie8 {
+        border-top-color: $govuk-focus-colour;
+      }
+      outline: $govuk-focus-width solid transparent;


36degrees · 2019-05-09T15:29:08Z

src/components/accordion/_accordion.scss

-      @media (hover: none) {
-        background-color: initial;
+    // For devices that can't hover such as touch devices,
+    // remove hover state as it can be stuck in that state (iOS).


The comment doesn't seem to match what the code's doing any more?

It's still a hover state that can be stuck and needs to be removed, any ideas on how to improve it?

Sorry, I think I mis-read this, makes sense.

src/components/accordion/_accordion.scss

-      padding-top: govuk-spacing(3);
-      padding-bottom: 0;
-      padding-left: 0;
+      padding: 0;
      border-width: 0;
      // Headings in section headers have link colours as an additional affodance


36degrees · 2019-05-10T12:54:50Z

src/components/accordion/_accordion.scss

+      }
+    }
+
+    .govuk-accordion__section:not(.govuk-accordion__section--expanded) .govuk-accordion__section-button:focus:not(:active) {


Great comment.

36degrees · 2019-05-10T08:47:25Z

src/components/accordion/_accordion.scss

@@ -70,15 +74,24 @@
    // This is styled to look like a link not a button
    .govuk-accordion__open-all {
      @include govuk-font($size: 16);
-      @include govuk-link-common;
-      display: inline;
+      position: relative;


I am wondering whether the open all button meets colour contrast if the top-most section is already open when you go to focus it.

I think in this case the black underline 'blends in' with the blue top border, so I'm not sure it'd be perceivable, and the yellow alone does not meet contrast against the white page background.

@dashouse what do you think?

@36degrees Blue to Black is 3.78:1. We're somewhat relying on this change being ok elsewhere. It also has the underline removed which is exclusive to the focus state. Go with it and see what comes up in the audit?

Sounds good – I should've checked the contrast rather than just assuming, surprised it's that high! 👍

src/components/accordion/_accordion.scss

-      &:focus {
-        background: none;
+      // Remove default button focus outline in Firefox
+      &::-moz-focus-inner {


These focus styles are necessary to meet WCAG 2.1 non-text contrast requirements

36degrees · 2019-05-10T12:52:40Z

CHANGELOG.md


- Update footer links to use new focus style


I think this has got lost in the rebase?

Thanks, I had a bit of a mare in the rebase on this one

36degrees · 2019-05-10T12:54:25Z

src/components/accordion/_accordion.scss

-      @media (hover: none) {
-        background-color: initial;
+    // For devices that can't hover such as touch devices,
+    // remove hover state as it can be stuck in that state (iOS).


Sorry, I think I mis-read this, makes sense.

36degrees · 2019-05-10T12:54:50Z

src/components/accordion/_accordion.scss

+      }
+    }
+
+    .govuk-accordion__section:not(.govuk-accordion__section--expanded) .govuk-accordion__section-button:focus:not(:active) {


Great comment.

hannalaakso

Great work. Just left a couple of small comments.

hannalaakso · 2019-05-10T13:32:45Z

src/components/accordion/_accordion.scss

-      @include govuk-link-common;
-      display: inline;
+      position: relative;
+      z-index: 1;


It looks like this is used to float the button over the component so that the focus state is visible. In order to avoid setting z-index, could we add a few pixels of bottom margin to .govuk-accordion__controls so that it doesn't overlap the component?

I think Dave made these changes to intentionally overlap the accordion by the looks?

Yeah, wanted this to overlap the top border and line up. It felt a bit untidy when it was almost overlapping.

Thanks @dashouse

hannalaakso · 2019-05-10T13:33:23Z

src/components/accordion/_accordion.scss

-      display: inline;
+      position: relative;
+      z-index: 1;
+      margin: 0;


I'm not sure if this is needed. Or is it guarding against some edge case?

If you don't do this the open all button focus state renders below the border

Sorry my comment refers to margin: 0, not the z-index. I still can't see setting margin: 0 making any difference. But this is non-blocking

I think it's just being explicit rather than relying on the user agent styles. The open all button is just using the default user agent padding at the minute, for example. Even if most (all?) browsers use margin: 0 it's still good to be clear that that's intentional.

hannalaakso · 2019-05-10T13:39:42Z

src/components/accordion/_accordion.scss

      border-width: 0;
-      // Headings in section headers have link colours as an additional affodance
-      color: $govuk-link-colour;
+      color: inherit;


Non-blocking: Would it be more robust to set the colour directly on the button?

The color is set on the header element which lets you group the CSS together so it's easier to understand

Also the intent of our styling here is to make the button turn into the header, so inheriting feels more correct towards that effect.

hannalaakso · 2019-05-10T13:43:41Z

src/components/accordion/_accordion.scss

+      @include govuk-not-ie8 {
+        &:focus {
+          outline: none;
+          background: none;


Non-blocking: I can't see these two styles having any effect. Might be worth adding a comment?

I think this was left around before we had the new focus styles so can be removed thanks :)

NickColley changed the base branch from master to v3 May 8, 2019 17:47

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

NickColley force-pushed the new-focus-accordion branch from bdfcf6d to 339cd19 Compare May 9, 2019 09:41

govuk-design-system-ci temporarily deployed to govuk-frontend-review-pr-1324 May 9, 2019 09:41 Inactive

govuk-design-system-ci temporarily deployed to govuk-frontend-review-pr-1324 May 9, 2019 10:25 Inactive

govuk-design-system-ci temporarily deployed to govuk-frontend-review-pr-1324 May 9, 2019 11:38 Inactive

NickColley force-pushed the new-focus-accordion branch from 7790dd2 to bdfcb67 Compare May 9, 2019 11:44

govuk-design-system-ci temporarily deployed to govuk-frontend-review-pr-1324 May 9, 2019 11:44 Inactive

NickColley marked this pull request as ready for review May 9, 2019 12:45

NickColley added this to the v3.0.0 milestone May 9, 2019

NickColley commented May 9, 2019

View reviewed changes

36degrees reviewed May 10, 2019

View reviewed changes

NickColley force-pushed the new-focus-accordion branch from bdfcb67 to 9610671 Compare May 10, 2019 10:22

govuk-design-system-ci temporarily deployed to govuk-frontend-review-pr-1324 May 10, 2019 10:22 Inactive

NickColley force-pushed the new-focus-accordion branch from 9610671 to d0bd0b1 Compare May 10, 2019 10:37

govuk-design-system-ci temporarily deployed to govuk-frontend-review-pr-1324 May 10, 2019 10:37 Inactive

NickColley changed the title ~~New focus accordion~~ Update accordion to use new WCAG 2.1 compliant focus style May 10, 2019

govuk-design-system-ci temporarily deployed to govuk-frontend-review-pr-1324 May 10, 2019 10:41 Inactive

NickColley added 6 commits May 10, 2019 12:55

Add accordion example with focusable children

e76d461

Split focussable mixin so it can be used without baked in :focus

6383624

Add new focus accordion styles

194d58a

These focus styles are necessary to meet WCAG 2.1 non-text contrast requirements

Fix issue with pseudo-classes transform breaking :not()

e0af2b5

Remove default button focus outlines in Firefox

b6f987f

Improve focus styles when in overridden colours on Firefox

096d873

NickColley force-pushed the new-focus-accordion branch from 765d3f6 to 3fb3de6 Compare May 10, 2019 11:56

govuk-design-system-ci temporarily deployed to govuk-frontend-review-pr-1324 May 10, 2019 11:56 Inactive

36degrees approved these changes May 10, 2019

View reviewed changes

hannalaakso reviewed May 10, 2019

View reviewed changes

NickColley force-pushed the new-focus-accordion branch from 3fb3de6 to 53c5a59 Compare May 10, 2019 14:14

govuk-design-system-ci temporarily deployed to govuk-frontend-review-pr-1324 May 10, 2019 14:14 Inactive

NickColley and others added 2 commits May 13, 2019 10:45

Add fallback for IE8 styles

3a29548

Add CHANGELOG entry

97eee6c

NickColley force-pushed the new-focus-accordion branch from 53c5a59 to 97eee6c Compare May 13, 2019 09:45

govuk-design-system-ci temporarily deployed to govuk-frontend-review-pr-1324 May 13, 2019 09:45 Inactive

Handle default focus styles on buttons

d439c62

govuk-design-system-ci deployed to govuk-frontend-review-pr-1324 May 13, 2019 10:46 View deployment

NickColley merged commit 8bc4d9c into v3 May 13, 2019

NickColley deleted the new-focus-accordion branch May 13, 2019 11:01

36degrees mentioned this pull request May 13, 2019

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

Closed

7 tasks

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

		@@ -5,6 +5,10 @@

		@include govuk-exports("govuk/component/accordion") {

		$govuk-accordion-link-colour: govuk-colour("blue");

Update accordion to use new WCAG 2.1 compliant focus style #1324

Update accordion to use new WCAG 2.1 compliant focus style #1324

Conversation

NickColley commented May 8, 2019 • edited Loading

GIF demonstrations

NickColley left a 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

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

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

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

hannalaakso left a 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

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

NickColley commented May 8, 2019 •

edited

Loading