Make organism filter toggle button fully keyboard accessible

VEuPathDB · Nov 14, 2024 · d2ecfbc · d2ecfbc
1 parent d8d3d26
commit d2ecfbc
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 2 deletions.
diff --git a/...ages/sites/genomics-site/webapp/wdkCustomization/js/client/components/OrganismFilter.scss b/...ages/sites/genomics-site/webapp/wdkCustomization/js/client/components/OrganismFilter.scss
@@ -89,6 +89,12 @@
     white-space: nowrap;
     width: 18em;
 
+    &:hover,
+    &:focus {
+      background-color: #396aa4;
+      background-image: none;
+    }
+
     &Text {
       margin: 0 2em;
     }

diff --git a/packages/sites/genomics-site/webapp/wdkCustomization/js/client/components/OrganismFilter.tsx b/packages/sites/genomics-site/webapp/wdkCustomization/js/client/components/OrganismFilter.tsx
@@ -123,11 +123,15 @@ type ExpansionBarProps = {
 
 function ExpansionBar(props: ExpansionBarProps) {
   return (
-    <div className={cx('--ExpansionBar')} onClick={props.onClick}>
+    <button
+      type="button"
+      className={cx('--ExpansionBar')}
+      onClick={props.onClick}
+    >
       {props.arrow}
       <span className={cx('--ExpansionBarText')}>{props.message}</span>
       {props.arrow}
-    </div>
+    </button>
   );
 }