From a32019d1e7b21c45e01c0f84bc1f94cd92ccf3bc Mon Sep 17 00:00:00 2001
From: Penar Musaraj <pmusaraj@gmail.com>
Date: Sun, 14 Aug 2022 21:36:55 -0400
Subject: [PATCH] A11Y: add focus state for advanced search toggles (#17894)
Using `focus-visible` to ensure this only shows when navigating using
a keyboard.
---
app/assets/stylesheets/common/base/search.scss | 9 ++++++++-
1 file changed, 8 insertions(+), 1 deletion(-)
diff --git a/app/assets/stylesheets/common/base/search.scss b/app/assets/stylesheets/common/base/search.scss
index 79f956cc12b..933ecfb5a6c 100644
--- a/app/assets/stylesheets/common/base/search.scss
+++ b/app/assets/stylesheets/common/base/search.scss
@@ -157,14 +157,21 @@
details.advanced-filters,
details.search-advanced-additional-options {
margin-top: 1em;
-
> summary {
color: var(--tertiary);
cursor: pointer;
+ padding-top: 0.25em;
+ padding-bottom: 0.25em;
+ &:focus-visible {
+ background-color: var(--tertiary-very-low);
+ }
}
&[open] > summary {
color: var(--primary);
margin-bottom: 1em;
+ &:focus-visible {
+ background-color: var(--tertiary-very-low);
+ }
}
}