fix(protocolselector): WCAG2AA - Elements with scrollable content mus…

…t be keyboard accessible
PaulFasola · Mar 25, 2021 · 3bed194 · 3bed194
1 parent aa47ec1
commit 3bed194
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 4 deletions.
diff --git a/src/components/ProtocolSelector/index.tsx b/src/components/ProtocolSelector/index.tsx
@@ -30,7 +30,8 @@ export const ProtocolSelector: React.FC<IProps> = (props) => {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [props.current]);
 
-  const _handleProtocolPick = (protocol: IProtocol) => (): void => {
+  const handleProtocolPick = (protocol: IProtocol) => (): void => {
+    console.log(protocol);
     if (typeof props.onChange === 'function') {
       props.onChange(protocol);
     }
@@ -80,9 +81,14 @@ export const ProtocolSelector: React.FC<IProps> = (props) => {
   return (
     <>
       {button}
-      <DropDownList data-test='dropdown' open={dropdownIsOpen} ref={dropdownRef}>
+      <DropDownList data-test='dropdown' open={dropdownIsOpen} tabIndex={0} ref={dropdownRef}>
         {props.list.map((protocol, i) => (
-          <div key={i} onClick={_handleProtocolPick(protocol)}>
+          <div
+            key={i}
+            onClick={handleProtocolPick(protocol)}
+            onKeyPress={(e) => e.key === 'Enter' && handleProtocolPick(protocol)()}
+            tabIndex={0}
+          >
             <ProtocolIcon src={protocol.logoURI} title={fullLabel} />
             <div>{protocol.name}</div>
             <div>{protocol.symbol}</div>

diff --git a/src/components/ProtocolSelector/style.ts b/src/components/ProtocolSelector/style.ts
@@ -33,7 +33,8 @@ export const Button = styled.button`
   &:not(:disabled) {
     cursor: pointer;
 
-    &:hover {
+    &:hover,
+    &:focus {
       background-color: ${({ theme }) => _(theme, 'defaultButton', 'hoverBgColor')};
     }
   }