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

Improve accessibility of focus state #340

Merged
merged 10 commits into from
Jun 27, 2024
Merged

Improve accessibility of focus state #340

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
29d1a66
Add $color-gold variable for focusable elements outline
arinchoi03 Jun 20, 2024
d69d31f
Add outline-*-with-offset mixins for textarea/text input/buttons/file…
arinchoi03 Jun 20, 2024
2551d91
Update button focus offset for honeycrisp compact version
arinchoi03 Jun 21, 2024
a649ef1
Update illustration (which can be a linked image) focus behavior -- i…
arinchoi03 Jun 21, 2024
e8436e7
Add accessible text to linked image example
arinchoi03 Jun 21, 2024
267847b
Add honeycrisp-specified focus behavior to the accordion__button and …
arinchoi03 Jun 21, 2024
b68f707
Fix weird indentation
arinchoi03 Jun 21, 2024
c1118f2
Add outline with offset to .text-input-group
arinchoi03 Jun 24, 2024
5db7f12
Add focus outline with offset to show more button
arinchoi03 Jun 24, 2024
23852e8
Add focus outline with offset for Searchbar component
arinchoi03 Jun 24, 2024
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
2 changes: 1 addition & 1 deletion app/assets/stylesheets/honeycrisp/atoms/_buttons.scss
View file
Open in desktop
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;
Expand Down
21 changes: 8 additions & 13 deletions app/assets/stylesheets/honeycrisp/atoms/_form-elements.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,7 @@ label {
}

.text-input {
@include outline;
@include outline-with-offset;
display: block;
width: 100%;
font-size: $font-size-25;
Expand All @@ -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;
Expand All @@ -67,7 +63,7 @@ label {
background-color: $color-white;
border: 2px solid $color-grey-darkest;
input[type='radio'] {
@include outline;
@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;
Expand Down Expand Up @@ -109,7 +105,7 @@ label {
}

.checkbox {
@include outline-within();
@include outline-within-with-offset();
transition: $animation-fast all;
user-select: none;
position: relative;
Expand All @@ -125,7 +121,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;
Expand Down Expand Up @@ -161,9 +157,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;
Expand Down Expand Up @@ -204,7 +199,7 @@ label {
}

.select__element {
@include outline;
@include outline-with-offset;
appearance: none;
position: relative;
z-index: 1;
Expand All @@ -226,7 +221,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;
}
}

Expand Down
19 changes: 18 additions & 1 deletion app/assets/stylesheets/honeycrisp/atoms/_utilities.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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() {
Expand All @@ -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 {
Expand Down
2 changes: 2 additions & 0 deletions app/assets/stylesheets/honeycrisp/atoms/_variables.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
2 changes: 1 addition & 1 deletion app/assets/stylesheets/honeycrisp/molecules/_reveal.scss
View file
Open in desktop
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;
Expand Down
6 changes: 5 additions & 1 deletion app/assets/stylesheets/honeycrisp/templates/_styleguide.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -202,5 +202,9 @@
&--yellow-light {
background-color: $color-yellow-light;
}

&--gold {
background-color: $color-gold;
}
}
}
}
6 changes: 5 additions & 1 deletion app/views/examples/atoms/_colors.html.erb
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>