Fix focus outline (#1033)

HowTheyVote · Sep 9, 2024 · 1a91aa7 · 1a91aa7
2 parents dd1ca0c + 7ce6f02
commit 1a91aa7
Show file tree

Hide file tree

Showing 5 changed files with 18 additions and 2 deletions.
diff --git a/frontend/src/components/Disclosure.css b/frontend/src/components/Disclosure.css
@@ -16,6 +16,7 @@
   font-weight: 500;
   cursor: default;
   user-select: none;
+  border-radius: var(--border-radius-xs);
 }
 
 .disclosure > summary::-webkit-details-marker {

diff --git a/frontend/src/components/FilterSelect.css b/frontend/src/components/FilterSelect.css
@@ -11,6 +11,7 @@
 
 .filter-select:focus-within {
   outline: var(--focus-outline);
+  outline-offset: var(--focus-outline-offset);
 }
 
 .filter-select > select {

diff --git a/frontend/src/components/VoteCard.css b/frontend/src/components/VoteCard.css
@@ -8,6 +8,12 @@
   margin-block-end: var(--space-xxs);
 }
 
+.vote-card__title:focus-within {
+  outline: var(--focus-outline);
+  outline-offset: var(--focus-outline-offset);
+  border-radius: var(--border-radius-xs);
+}
+
 .vote-card__title a {
   text-decoration: none;
 }
@@ -16,6 +22,10 @@
   text-decoration: underline;
 }
 
+.vote-card__title a:focus {
+  outline: none;
+}
+
 .vote-card__meta {
   display: flex;
   flex-wrap: wrap;

diff --git a/frontend/src/css/base.css b/frontend/src/css/base.css
@@ -24,6 +24,7 @@ body {
 
 a {
   color: inherit;
+  border-radius: var(--border-radius-xs);
 }
 
 input,
@@ -42,4 +43,5 @@ noscript {
 
 :focus {
   outline: var(--focus-outline);
+  outline-offset: var(--focus-outline-offset);
 }
diff --git a/frontend/src/css/variables.css b/frontend/src/css/variables.css
@@ -32,6 +32,7 @@
 
   --border-radius: 8px;
   --border-radius-sm: 4px;
+  --border-radius-xs: 1px;
 
   --shadow-elevated: 0 1px 2px rgba(0, 0, 0, 0.075),
     0 5px 20px rgba(0, 0, 0, 0.1);
@@ -97,8 +98,9 @@
   --color-focus-outline: hsla(
     var(--blue-h),
     var(--blue-s),
-    calc(var(--blue-l) + 30%),
-    0.5
+    calc(var(--blue-l) + 15%),
+    1
   );
   --focus-outline: 2px solid var(--color-focus-outline);
+  --focus-outline-offset: 2px;
 }