From beb2f5db69d81fffa92b294f5663624f12783de0 Mon Sep 17 00:00:00 2001 From: Conlin Durbin Date: Fri, 1 May 2020 22:06:27 -0400 Subject: [PATCH] =?UTF-8?q?=F0=9F=8E=A8=20Enhance=20:focus=20style=20for?= =?UTF-8?q?=20a11y?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * Adding link changes with text-decoration and background * Update assets/css/base/_a.scss Co-Authored-By: EJ Mason * Add SCSS variable Co-authored-by: Conlin Durbin Co-authored-by: EJ Mason Co-authored-by: Tatiana Mac --- .tool-versions | 1 + assets/css/abstracts/_variables.scss | 2 ++ assets/css/base/_a.scss | 12 +++++++----- assets/css/structures/_grid.scss | 5 +++++ 4 files changed, 15 insertions(+), 5 deletions(-) create mode 100644 .tool-versions diff --git a/.tool-versions b/.tool-versions new file mode 100644 index 00000000..47f71e70 --- /dev/null +++ b/.tool-versions @@ -0,0 +1 @@ +nodejs 12.16.1 diff --git a/assets/css/abstracts/_variables.scss b/assets/css/abstracts/_variables.scss index a6d802d5..ba8ea795 100644 --- a/assets/css/abstracts/_variables.scss +++ b/assets/css/abstracts/_variables.scss @@ -12,3 +12,5 @@ $light-grey: hsl(0, 0%, 93.3%); // for backgrounds only $browser-context: 16; +$lt-background-color: $pink; + diff --git a/assets/css/base/_a.scss b/assets/css/base/_a.scss index 58460314..b475a7d8 100644 --- a/assets/css/base/_a.scss +++ b/assets/css/base/_a.scss @@ -1,16 +1,18 @@ a { - border-bottom: $dark-grey solid 0.1em; color: $black; font-family: $ext-sans; margin: 1rem 0; - text-decoration: none; + text-decoration-color: $dark-grey; + text-decoration-line: underline; + text-decoration-thickness: 0.1em; &:hover, &:focus { - border-bottom: $primary-color solid 0.1rem; + text-decoration-color: $primary-color; } &:focus { - outline: pxToRem(3) solid $primary-color; - outline-offset: pxToRem(5); + background-color: $lt-background-color; + color: $black; + outline: 0; } } diff --git a/assets/css/structures/_grid.scss b/assets/css/structures/_grid.scss index 3c775725..d8a394ad 100644 --- a/assets/css/structures/_grid.scss +++ b/assets/css/structures/_grid.scss @@ -64,5 +64,10 @@ a { color: white; + + &:focus { + background-color: $lt-background-color; + color: $black; + } } }