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

Improve accessibility of focus state #340

Merged
merged 10 commits into from
Jun 27, 2024
2 changes: 1 addition & 1 deletion app/assets/stylesheets/honeycrisp/_honeycrisp-compact.scss
Original file line number Diff line number Diff line change
@@ -77,7 +77,7 @@
vertical-align: 0;
}
&:focus {
@include outline;
@include outline-with-offset;
}
&:first-of-type {
margin-left: 0;
9 changes: 8 additions & 1 deletion app/assets/stylesheets/honeycrisp/atoms/_buttons.scss
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
.button {
@include outline;
@include outline-with-offset;
box-sizing: border-box;
line-height: $s25;
margin-bottom: $s25;
@@ -126,3 +126,10 @@
p .button {
margin-bottom: 0;
}

.illustration--gcf-logo {
@include retina-bg(gcf_logomark_black, 100% auto);
display: inline-block;
width: 48px;
height: 48px;
}
Copy link
Contributor Author

Choose a reason for hiding this comment

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

adding an example of linked image since we didn't have an example of that usage in honeycrisp.

28 changes: 12 additions & 16 deletions app/assets/stylesheets/honeycrisp/atoms/_form-elements.scss
Original file line number Diff line number Diff line change
@@ -29,7 +29,7 @@ label {
}

.text-input {
@include outline;
@include outline-with-offset;
display: block;
width: 100%;
font-size: $font-size-25;
@@ -45,14 +45,10 @@ label {
&::placeholder {
color: $color-grey-dark;
}

&:focus {
box-shadow: 0 0 0 5px $color-yellow, inset 0px 2px 0px rgba(#000, .15);
}
}

.radio-button {
@include outline-within();
@include outline-within-with-offset();
transition: $animation-fast all;
user-select: none;
position: relative;
@@ -64,10 +60,11 @@ label {
min-height: $s60;
padding: $s35/2 $s25;
padding-left: $s60;
background-color: $color-white;
border: 2px solid $color-grey-darkest;
input[type='radio'] {
@include outline;
background-color: $color-white;
border: 2px solid $color-grey-darkest;

input[type='radio'] {
@include outline-with-offset;
Copy link
Contributor Author

Choose a reason for hiding this comment

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

move this up & fix indentation

position: absolute;
top: $s35/2 + .3rem;
left: $s25;
@@ -109,7 +106,7 @@ label {
}

.checkbox {
@include outline-within();
@include outline-within-with-offset();
transition: $animation-fast all;
user-select: none;
position: relative;
@@ -125,7 +122,7 @@ label {
border: 2px solid $color-grey-darkest;

input[type='checkbox'] {
@include outline;
@include outline-with-offset;
position: absolute;
top: $s35/2 + .3rem;
left: $s25;
@@ -161,9 +158,8 @@ label {
}

.textarea {
@include outline;
@include outline-with-offset;
border: 2px solid $color-grey-darkest;
box-shadow: inset 0px 2px 0px rgba(#000, .15);
width: 100%;
padding: $s15;
line-height: $s25;
@@ -204,7 +200,7 @@ label {
}

.select__element {
@include outline;
@include outline-with-offset;
appearance: none;
position: relative;
z-index: 1;
@@ -226,7 +222,7 @@ label {
// This rule expects that an element with class .button will occur after a focused input element as children
// of the .file-upload element, as is the case in the example HTML in the styleguide.
input:focus ~ .button {
@include outline-unconditional;
@include outline-unconditional-with-offset;
}
}

2 changes: 2 additions & 0 deletions app/assets/stylesheets/honeycrisp/atoms/_illustrations.scss
Original file line number Diff line number Diff line change
@@ -1,4 +1,6 @@
.illustration {
@include outline-with-offset;

text-indent: -9999px;
background-repeat: no-repeat;
background-size: 100% auto;
19 changes: 18 additions & 1 deletion app/assets/stylesheets/honeycrisp/atoms/_utilities.scss
Original file line number Diff line number Diff line change
@@ -83,7 +83,12 @@

@mixin outline-unconditional() {
outline: none;
box-shadow: 0 0 0 5px $color-yellow;
box-shadow: 0 0 0 5px $color-gold;
}

@mixin outline-unconditional-with-offset() {
outline: none;
box-shadow: 0 0 0 3px $color-white, 0px 0px 0px 8px $color-gold;
}

@mixin outline() {
@@ -92,12 +97,24 @@
}
}

@mixin outline-with-offset() {
&:focus {
@include outline-unconditional-with-offset;
}
}

@mixin outline-within() {
&:focus-within {
@include outline-unconditional;
}
}

@mixin outline-within-with-offset() {
&:focus-within {
@include outline-unconditional-with-offset;
}
}

@mixin icons($icons-names, $project-icons: ()) {
$icon: map_merge($icons-names, $project-icons);
@each $name, $slash-code in $icon {
2 changes: 2 additions & 0 deletions app/assets/stylesheets/honeycrisp/atoms/_variables.scss
Original file line number Diff line number Diff line change
@@ -60,6 +60,8 @@ $color-teal-dark: #034E46 !default;
$color-yellow: #FFAE00 !default;
$color-yellow-light: #FFF2D1 !default;

$color-gold: #C2850C !default;

$color-white: #FFFFFF !default;

$color-background: $color-grey-light !default;
9 changes: 6 additions & 3 deletions app/assets/stylesheets/honeycrisp/molecules/_accordion.scss
Original file line number Diff line number Diff line change
@@ -2,11 +2,12 @@
background-color: $color-grey-light;
border: 2px solid $color-grey;
border-radius: $border-radius-large;
padding: $s15;
margin-bottom: $s15;
}

.accordion__button {
@include outline-with-offset;
border-radius: $s10 $s10 0 0;
background: transparent;
border: none;
box-shadow: none;
@@ -19,12 +20,12 @@
text-align: left;
font-weight: bold;
text-decoration: none;
padding-right: $s35;
padding: $s15 $s35 $s15 $s15;
&:after {
content: '';
display: block;
position: absolute;
right: 0;
right: $s15;
top: 50%;
margin-top: -$s15/2;
width: $s15;
@@ -35,6 +36,7 @@
}

.accordion--is-closed & {
border-radius: $s10;
&:after {
background-image: image-url('icon_accordion_open.svg');
}
@@ -44,6 +46,7 @@
.accordion__content {
margin-top: $s35;
display: block;
padding: 0 $s15 $s15 $s15;
Copy link
Contributor Author

Choose a reason for hiding this comment

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

can talk through these changes if necessary


.accordion--is-closed & {
display: none;
Original file line number Diff line number Diff line change
@@ -67,7 +67,7 @@
}

.text-input-group {
@include outline-within;
@include outline-within-with-offset;
webkit-appearance: none;
display: table;
margin-bottom: 0;
2 changes: 1 addition & 1 deletion app/assets/stylesheets/honeycrisp/molecules/_reveal.scss
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
.reveal__button {
@include outline;
@include outline-with-offset;
cursor: pointer;
display: inline-block;
text-align: start;
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
.searchbar {
@include outline-within;
@include outline-within-with-offset;
display: table;
width: 100%;
border-collapse: separate;
Original file line number Diff line number Diff line change
@@ -37,6 +37,7 @@
}

.show-more__button {
@include outline-with-offset;
font-size: $font-size-25-small;
display: inline-block;
padding: .2em .4em;
6 changes: 5 additions & 1 deletion app/assets/stylesheets/honeycrisp/templates/_styleguide.scss
Original file line number Diff line number Diff line change
@@ -202,5 +202,9 @@
&--yellow-light {
background-color: $color-yellow-light;
}

&--gold {
background-color: $color-gold;
}
}
}
}
2 changes: 1 addition & 1 deletion app/views/cfa/styleguide/pages/index.html.erb
Original file line number Diff line number Diff line change
@@ -95,7 +95,7 @@
<%= render 'section', title: 'Typography', example: 'atoms/typography', explanation: "Basic HTML headings include type styles. However, each type style also has dedicated class name. You can always use the dedicated class name to override any default styling (e.g., you can style an #{html_escape("<h1>")} as a heading level 2 with '.heading-35'.)" %>
<%= render 'section', title: 'Spacing', example: 'atoms/spacing' %>
<%= render 'section', title: 'Labels', example: 'atoms/labels' %>
<%= render 'section', title: 'Buttons', example: 'atoms/buttons', explanation: "The teal primary is your default button. White buttons are for secondary actions.<br><br>Danger buttons tell users to pause and make sure they’re certain of the action they’re about to take. It can be a way to signal that an action is discouraged (e.g. submitting a minimal application in GCF) , or irreversible (e.g. deleting a client in ClientComm).<br><br>Disabled buttons are placeholders for actions that can’t be taken at the moment. Use these rather than hiding the button if you want to show that the action exits, or if your layout requires it. Disabled buttons have a corresponding cursor state.<br><br>When using the button styled like a link, don’t use the \"button\" class." %>
<%= render 'section', title: 'Buttons', example: 'atoms/buttons', explanation: "The teal primary is your default button. White buttons are for secondary actions.<br><br>Danger buttons tell users to pause and make sure they’re certain of the action they’re about to take. It can be a way to signal that an action is discouraged (e.g. submitting a minimal application in GCF) , or irreversible (e.g. deleting a client in ClientComm).<br><br>Disabled buttons are placeholders for actions that can’t be taken at the moment. Use these rather than hiding the button if you want to show that the action exits, or if your layout requires it. Disabled buttons have a corresponding cursor state.<br><br>When using the button styled like a link, don’t use the \"button\" class.<br><br>For linked images, make sure to include the 'illustration' class to ensure the proper focus offset." %>
<%= render 'section', title: 'Skip link', example: 'atoms/links', explanation: "Adding the id of `skip-to-content` will hide the link until it has focus. This should be the first focusable item on your page. For more information <a target='blank' href='https://a11y-101.com/development/skip-link'>visit a11y 101</a>." %>
<%= render 'section', title: 'Form Elements', example: 'atoms/form_elements', explanation: "General atomic form elements have no knowledge about their size and default to full width. Form molecules and organisms or modifier classes should be used to define form element sizes and layout." %>

4 changes: 4 additions & 0 deletions app/views/examples/atoms/_buttons.html.erb
Original file line number Diff line number Diff line change
@@ -46,3 +46,7 @@
<% end %>
<%= link_to '#', class: 'button button--danger' do %>Danger Button<% end %>
</div>
<div class="h4">Linked Images (Link with Background Image)</div>
<div>
<a href="https://getcalfresh.org" class="illustration illustration--gcf-logo">GetCalFresh</a>
</div>
6 changes: 5 additions & 1 deletion app/views/examples/atoms/_colors.html.erb
Original file line number Diff line number Diff line change
@@ -66,4 +66,8 @@
<div class="color color--yellow">
<p>#FFAE00</p>
<p>yellow</p>
</div>
</div>
<div class="color color--gold">
<p>#C2850C</p>
<p>gold</p>
</div>