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

Focus iteration #1245

Closed
wants to merge 29 commits into from

Conversation

@dashouse
Copy link
Contributor

commented Mar 12, 2019

WIP

@govuk-design-system-ci govuk-design-system-ci temporarily deployed to govuk-frontend-review-pr-1245 Mar 12, 2019 Inactive

@dashouse dashouse force-pushed the focus-style-iteration branch from c024d24 to d4e8f7b Mar 12, 2019

@govuk-design-system-ci govuk-design-system-ci requested a deployment to govuk-frontend-review-pr-1245 Mar 12, 2019 Abandoned

@govuk-design-system-ci govuk-design-system-ci requested a deployment to govuk-frontend-review-pr-1245 Mar 12, 2019 Abandoned

@govuk-design-system-ci govuk-design-system-ci temporarily deployed to govuk-frontend-review-pr-1245 Mar 13, 2019 Inactive

@govuk-design-system-ci govuk-design-system-ci temporarily deployed to govuk-frontend-review-pr-1245 Mar 13, 2019 Inactive

@govuk-design-system-ci govuk-design-system-ci temporarily deployed to govuk-frontend-review-pr-1245 Mar 13, 2019 Inactive

@govuk-design-system-ci govuk-design-system-ci temporarily deployed to govuk-frontend-review-pr-1245 Mar 13, 2019 Inactive

@govuk-design-system-ci govuk-design-system-ci temporarily deployed to govuk-frontend-review-pr-1245 Mar 13, 2019 Inactive

@govuk-design-system-ci govuk-design-system-ci temporarily deployed to govuk-frontend-review-pr-1245 Mar 13, 2019 Inactive

@govuk-design-system-ci govuk-design-system-ci temporarily deployed to govuk-frontend-review-pr-1245 Mar 13, 2019 Inactive

@govuk-design-system-ci govuk-design-system-ci temporarily deployed to govuk-frontend-review-pr-1245 Mar 14, 2019 Inactive

@govuk-design-system-ci govuk-design-system-ci temporarily deployed to govuk-frontend-review-pr-1245 Mar 14, 2019 Inactive

@govuk-design-system-ci govuk-design-system-ci temporarily deployed to govuk-frontend-review-pr-1245 Mar 14, 2019 Inactive

@dashouse dashouse force-pushed the focus-style-iteration branch from 6dd0ea4 to 1f3390b Mar 14, 2019

@govuk-design-system-ci govuk-design-system-ci temporarily deployed to govuk-frontend-review-pr-1245 Mar 14, 2019 Inactive

@govuk-design-system-ci govuk-design-system-ci temporarily deployed to govuk-frontend-review-pr-1245 Mar 14, 2019 Inactive

@govuk-design-system-ci govuk-design-system-ci temporarily deployed to govuk-frontend-review-pr-1245 Mar 15, 2019 Inactive

@govuk-design-system-ci govuk-design-system-ci temporarily deployed to govuk-frontend-review-pr-1245 Mar 18, 2019 Inactive

@govuk-design-system-ci govuk-design-system-ci temporarily deployed to govuk-frontend-review-pr-1245 Mar 21, 2019 Inactive

@govuk-design-system-ci govuk-design-system-ci temporarily deployed to govuk-frontend-review-pr-1245 Mar 21, 2019 Inactive

@govuk-design-system-ci govuk-design-system-ci temporarily deployed to govuk-frontend-review-pr-1245 Mar 21, 2019 Inactive

@govuk-design-system-ci govuk-design-system-ci temporarily deployed to govuk-frontend-review-pr-1245 Mar 22, 2019 Inactive

@govuk-design-system-ci govuk-design-system-ci temporarily deployed to govuk-frontend-review-pr-1245 Mar 22, 2019 Inactive

@govuk-design-system-ci govuk-design-system-ci temporarily deployed to govuk-frontend-review-pr-1245 Mar 25, 2019 Inactive

dashouse added 5 commits Jan 30, 2019
Add new colour palette and states
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

@36degrees 36degrees force-pushed the focus-style-iteration branch from 6bb92e8 to 393f7c4 Apr 16, 2019

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

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

This comment has been minimized.

Copy link
@aliuk2012

aliuk2012 Apr 30, 2019

Contributor

All of the above has already been done.

display: inline;
margin: 0;

This comment has been minimized.

Copy link
@36degrees

36degrees Apr 30, 2019

Contributor

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

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

This comment has been minimized.

Copy link
@36degrees

36degrees Apr 30, 2019

Contributor

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

Before

govuk-frontend-review herokuapp com_components_details_preview (1)

After

govuk-frontend-review-pr-1245 herokuapp com_components_details_preview

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

This comment has been minimized.

Copy link
@36degrees

36degrees Apr 30, 2019

Contributor

Think this can just be border-width

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

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

This comment has been minimized.

Copy link
@36degrees

36degrees Apr 30, 2019

Contributor

Not sure if these changes are required or not.

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

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

This comment has been minimized.

Copy link
@36degrees

36degrees Apr 30, 2019

Contributor

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

@@ -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 comment has been minimized.

Copy link
@36degrees

36degrees Apr 30, 2019

Contributor

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

@@ -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 comment has been minimized.

Copy link
@36degrees

36degrees Apr 30, 2019

Contributor

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

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

This comment has been minimized.

Copy link
@36degrees

36degrees Apr 30, 2019

Contributor

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

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


&:focus {

This comment has been minimized.

Copy link
@36degrees

36degrees Apr 30, 2019

Contributor

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


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

This comment has been minimized.

Copy link
@nickcolley

nickcolley Apr 30, 2019

Contributor

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

This comment has been minimized.

Copy link
@nickcolley

nickcolley Apr 30, 2019

Contributor

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

This comment has been minimized.

Copy link
@nickcolley

nickcolley May 1, 2019

Contributor

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

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

This comment has been minimized.

Copy link
@nickcolley

nickcolley Apr 30, 2019

Contributor

@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 comment has been minimized.

Copy link
@36degrees

36degrees Apr 30, 2019

Contributor

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 comment has been minimized.

Copy link
@nickcolley

nickcolley Apr 30, 2019

Contributor

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

This comment has been minimized.

Copy link
@nickcolley

nickcolley May 1, 2019

Contributor

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.

@aliuk2012 aliuk2012 referenced this pull request May 8, 2019
4 of 7 tasks complete
hannalaakso added a commit that referenced this pull request May 9, 2019

@dashouse dashouse closed this May 20, 2019

@dashouse dashouse deleted the focus-style-iteration branch May 20, 2019

aliuk2012 added a commit that referenced this pull request Jun 14, 2019
aliuk2012 added a commit that referenced this pull request Jun 14, 2019
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
5 participants
You can’t perform that action at this time.