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.

Sign up for GitHub

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

Jump to bottom

Focus iteration #1245

Closed
wants to merge 29 commits into from
Closed

Focus iteration #1245

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
29 commits
Select commit Hold shift + click to select a range
5d58b5e
Update colour palette - initial
Jan 30, 2019
e539d25
Add new colour palette and states
Jan 31, 2019
02ed643
Update footer info
Mar 12, 2019
722b000
Update accordions focus style
Mar 13, 2019
8871a6e
add
Mar 13, 2019
9fb29f8
update guidance
Mar 13, 2019
937a8fa
Update tabs style to follow same as accordion
Mar 13, 2019
3913b96
Update accordions states
Mar 13, 2019
6b176d6
Update deatils styling
Mar 13, 2019
b52ec9a
Update content page
Mar 13, 2019
e3c357b
Update content
Mar 13, 2019
51d737c
Update content
Mar 13, 2019
a3587a9
Update accordion focs within style
Mar 13, 2019
e3de618
update accordions examples
Mar 13, 2019
ac54e29
Fix content
Mar 13, 2019
1beddce
Update accordion style
Mar 14, 2019
5df9cd0
Update example page
Mar 14, 2019
5c66727
Update footer example with inline links
Mar 14, 2019
39bb90f
Update content
Mar 15, 2019
df60ec5
Clarify use of colour
Mar 18, 2019
9bb5e1b
revert tabs
Mar 21, 2019
f75c406
Update accordion
Mar 21, 2019
094ef10
Update details
Mar 21, 2019
17813ee
Update example page
Mar 21, 2019
fc65516
Fix accordion border issue
Mar 21, 2019
ceeb493
Update content about tabs changes
Mar 22, 2019
279d5c4
Update style to use box-shadow only
Mar 22, 2019
393f7c4
Add text link in context section
Mar 25, 2019
2bf65e3
Update hover state to use new grey
36degrees Apr 16, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3,615 changes: 3,615 additions & 0 deletions app/views/examples/colour-palette-and-states/index.njk
View file
Open in desktop

Large diffs are not rendered by default.

32 changes: 18 additions & 14 deletions app/views/examples/links/index.njk
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,21 +34,25 @@
<h1 class="govuk-heading-xl">
Links
</h1>

{% for variant_description, variant_class in variants %}

<section class="govuk-!-margin-top-8">
<h2 class="govuk-heading-l">{{ variant_description }}</h2>

{% for state_description, state_class in states %}
<p class="govuk-body">
<a href="/" class="govuk-link {{ variant_class }} {{ state_class }}">
{{ state_description}}
</a>
</p>
<div class="govuk-grid-row">
<div class="govuk-grid-column-one-quarter">
{% for variant_description, variant_class in variants %}

<section class="govuk-!-margin-top-8">
<h2 class="govuk-heading-l">{{ variant_description }}</h2>

{% for state_description, state_class in states %}
<p class="govuk-body">
<a href="/" class="govuk-link {{ variant_class }} {{ state_class }}">
{{ state_description}}
</a>
</p>
{% endfor %}
</section>
{% endfor %}
</section>
{% endfor %}
</div>
</div>


</div>
</div>
Expand Down
124 changes: 111 additions & 13 deletions src/components/accordion/_accordion.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,7 @@
}

.govuk-accordion__section-header {
padding-top: govuk-spacing(3);
padding-bottom: govuk-spacing(3);
}

Expand Down Expand Up @@ -53,68 +54,139 @@
.govuk-accordion__section {
padding-top: 0;
border-top: 1px solid $govuk-border-colour;

&:hover {
border-top: 1px solid govuk-colour("light-blue");
}
}

// Hide the body of collapsed sections
.govuk-accordion__section-content {
display: none;
@include govuk-responsive-padding(3, "top");
@include govuk-responsive-padding(3, "right");
@include govuk-responsive-padding(3, "bottom");
@include govuk-responsive-padding(0, "left");
}

// Show the body of expanded sections
.govuk-accordion__section--expanded .govuk-accordion__section-content {
display: block;
}

// Style the expanded section
.govuk-accordion__section--expanded {
border-top: 0;
box-shadow: inset 0 4px 0 0 govuk-colour("blue");

&:focus-within {
border-top: 0;

&:hover {
border-top: 0;
}
}

&:hover {
border-top: 0;
box-shadow: inset 0 4px 0 0 govuk-colour("blue");

.govuk-accordion__section-button {

&:focus {
margin-right: 0;
margin-left: 0;
padding-right: 0;
padding-left: 0;
color: govuk-colour("blue");
background-color: transparent;
box-shadow: none;
}
}
}

.govuk-accordion__section-header {

&:focus-within {
outline: $govuk-focus-width solid transparent;
outline-offset: 0;
box-shadow: inset 0 3px 0 0 govuk-colour("yellow"), inset 0 6px 0 0 govuk-colour("black");

.govuk-accordion__section-button {
color: govuk-colour("black");
}
}
}

.govuk-accordion__section-button {

&:focus {
margin-right: 0;
margin-left: 0;
padding-right: 0;
padding-left: 0;
color: govuk-colour("blue");
background-color: transparent;
box-shadow: none;
}
}
}

// This is styled to look like a link not a button
.govuk-accordion__open-all {
@include govuk-font($size: 16);
@include govuk-link-common;
@include govuk-focusable-text-link;
box-sizing: border-box;
display: inline;
margin: 0;
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

margin-right: 5px;
padding: 0;
border-width: 0;
color: $govuk-link-colour;
background: none;
cursor: pointer;

&:focus {
background: none;
}
}

// Section headers have a pointer cursor as an additional affordance
.govuk-accordion__section-header {
position: relative;
@include govuk-responsive-padding(0, "left");
// Safe area on the right to avoid clashing with icon
padding-right: 40px;
cursor: pointer;
}

// Section headers have a grey background on hover as an additional affodance
.govuk-accordion__section-header:hover {
background-color: govuk-colour("grey-4");
box-shadow: inset 0 3px 0 0 govuk-colour("light-blue");
// For devices that can't hover such as touch devices,
// remove hover state as it can be stuck in that state (iOS).

.govuk-accordion__section-button {
background-color: none;
text-decoration: underline;
}

@media (hover: none) {
background-color: initial;
}
}

// Setting focus styles on header so that summary that is not part of the button is included in focus
.govuk-accordion__section-header--focused {
// These replicate @mixin govuk-focusable (the mixin can't be used as the header doesn't get the focus)
outline: $govuk-focus-width solid $govuk-focus-colour;
outline-offset: 0;
// Section headers have a grey background on hover as an additional affodance
.govuk-accordion__section-header:active {
background-color: govuk-colour("light-grey");
}

// Buttons within the headers don’t need default styling
.govuk-accordion__section-button {
@include govuk-link-common;
width: 100%;
@include govuk-typography-common;
// width: 100%;
margin-top: 0;
margin-bottom: 0;
margin-left: 0;
padding-top: govuk-spacing(3);
padding-top: 0;
padding-right: 0;
padding-bottom: 0;
padding-left: 0;
border-width: 0;
Expand All @@ -130,6 +202,32 @@
}
}

// Setting focus styles on header so that summary that is not part of the button is included in focus
.govuk-accordion__section-header--focused,
.govuk-accordion__section-header--focused:hover {
// These replicate @mixin govuk-focusable (the mixin can't be used as the header doesn't get the focus)
outline: $govuk-focus-width solid transparent;
outline-offset: 0;

.govuk-accordion__section-button {
@include govuk-focusable-text;
color: govuk-colour("black");
}
}

.govuk-accordion__section-header--focused:active {
.govuk-accordion__section-button {
margin-right: 0;
margin-left: 0;
padding-right: 0;
padding-left: 0;
color: govuk-colour("blue");
background-color: transparent;
box-shadow: none;
text-decoration: underline;
}
}

// Extend the touch area of the button to span the section header
.govuk-accordion__section-button:after {
content: "";
Expand Down
5 changes: 5 additions & 0 deletions src/components/back-link/_back-link.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,6 +25,11 @@
// Underline is provided by a bottom border
text-decoration: none;


&:focus {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

border-bottom: 1px solid govuk-colour("yellow");
}

// Prepend left pointing arrow
&:before {
@include govuk-shape-arrow($direction: left, $base: 10px, $height: 6px);
Expand Down
26 changes: 21 additions & 5 deletions src/components/button/_button.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@

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

$govuk-button-colour: #00823b;
$govuk-button-colour: govuk-colour("green");
$govuk-button-hover-colour: darken($govuk-button-colour, 5%);
$govuk-button-shadow-colour: darken($govuk-button-colour, 15%);
$govuk-button-text-colour: govuk-colour("white");
Expand All @@ -27,6 +27,7 @@
padding: (govuk-spacing(2) - $govuk-border-width-form-element - ($button-shadow-size / 2)) govuk-spacing(2); // s1
border: $govuk-border-width-form-element solid transparent;
border-radius: 0;
outline: $govuk-focus-width solid transparent !important;
color: $govuk-button-text-colour;
background-color: $govuk-button-colour;
box-shadow: 0 $button-shadow-size 0 $govuk-button-shadow-colour; // s0
Expand Down Expand Up @@ -69,14 +70,29 @@
border: 0;
}

&:hover,
&:focus {
padding-bottom: 5px;
color: govuk-colour("black");
background-color: govuk-colour("yellow");
box-shadow: 0 4px 0 govuk-colour("black");
}

&:hover {
color: govuk-colour("white");
background-color: $govuk-button-hover-colour;
}

&:active {
top: $button-shadow-size;
box-shadow: none;
padding-bottom: 8px;
border: $govuk-border-width-form-element solid govuk-colour("yellow");
color: govuk-colour("white");
background-color: $govuk-button-hover-colour;
box-shadow: inset 0 0 0 1px govuk-colour("yellow");

&:before {
box-shadow: none;
}

@include govuk-if-ie8 {
border-bottom-width: 0;
Expand All @@ -95,9 +111,9 @@
position: absolute;

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

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Not sure if these changes are required or not.

bottom: -($govuk-border-width-form-element + $button-shadow-size);
left: -$govuk-border-width-form-element;
left: -5px;

background: transparent;
}
Expand Down
1 change: 1 addition & 0 deletions src/components/checkboxes/_checkboxes.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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");
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Think this can just be border-width

outline: $govuk-focus-width solid transparent;
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

outline-offset: $govuk-focus-width;
box-shadow: 0 0 0 $govuk-focus-width $govuk-focus-colour;
Expand Down
17 changes: 10 additions & 7 deletions src/components/details/_details.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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


// Style the summary to look like a link...
color: $govuk-link-colour;
Expand All @@ -39,13 +39,16 @@
}

.govuk-details__summary:focus {
@include govuk-focusable-text;

// -1px offset fixes gap between background and outline in Firefox
outline: ($govuk-focus-width + 1px) solid $govuk-focus-colour;
outline: ($govuk-focus-width + 1px) solid transparent;
outline-offset: -1px;
// When focussed, the text colour needs to be darker to ensure that colour
// contrast is still acceptable
color: $govuk-focus-text-colour;
background: $govuk-focus-colour;

// remove underline on link
.govuk-details__summary-text {
text-decoration: none;
}
}

// Remove the default details marker so we can style our own consistently and
Expand All @@ -59,7 +62,7 @@
content: "";
position: absolute;

top: 0;
top: -1px;
bottom: 0;
left: 0;

Expand Down
2 changes: 1 addition & 1 deletion src/components/error-summary/_error-summary.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -42,7 +42,7 @@
}

.govuk-error-summary__list a {
@include govuk-focusable-fill;
@include govuk-focusable-text-link;
@include govuk-typography-weight-bold;

// Override default link styling to use error colour
Expand Down
2 changes: 1 addition & 1 deletion src/components/error-summary/error-summary.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ ErrorSummary.prototype.init = function () {
if (!$module) {
return
}
$module.focus()
// $module.focus()

$module.addEventListener('click', this.handleClick.bind(this))
}
Expand Down
16 changes: 16 additions & 0 deletions src/components/file-upload/_file-upload.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,9 +11,25 @@
@include govuk-font($size: 19);
@include govuk-text-colour;
@include govuk-focusable;
padding-top: govuk-spacing(1);
padding-bottom: govuk-spacing(1);
}

.govuk-file-upload:focus {
margin-right: -(govuk-spacing(1));
margin-left: -(govuk-spacing(1));
padding-right: govuk-spacing(1);
padding-left: govuk-spacing(1);
border: $govuk-border-width-form-element solid govuk-colour("black");
box-shadow: inset 0 0 0 2px govuk-colour("black");
}

.govuk-file-upload--error {
border: $govuk-border-width-form-element-error solid $govuk-error-colour;

&:focus {
border: $govuk-border-width-form-element-error solid govuk-colour("black");
box-shadow: none;
}
}
}
Loading