fix(protocolselector): [a11y] fix keyboard protocol selection

PaulFasola · Apr 4, 2021 · 2cd91b8 · 2cd91b8
1 parent 2c11e7a
commit 2cd91b8
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 6 deletions.
diff --git a/src/components/ProtocolSelector/index.tsx b/src/components/ProtocolSelector/index.tsx
@@ -32,10 +32,10 @@ export const ProtocolSelector: React.FC<IProps> = (props) => {
 
   // TODO: use a proper e2e to test accessibility
   /* istanbul ignore next */
-  const handleKeypress = (e: React.KeyboardEvent) => (protocol: IProtocol) => {
-    if (e.key !== 'Enter') return;
-
-    handleProtocolPick(protocol)();
+  const handleKeypress = (protocol: IProtocol) => (e: React.KeyboardEvent) => {
+    if (e.key === 'Enter') {
+      handleProtocolPick(protocol)();
+    }
   };
 
   const handleProtocolPick = (protocol: IProtocol) => (): void => {
@@ -93,7 +93,7 @@ export const ProtocolSelector: React.FC<IProps> = (props) => {
           <div
             key={i}
             onClick={handleProtocolPick(protocol)}
-            onKeyPress={handleKeypress}
+            onKeyPress={handleKeypress(protocol)}
             tabIndex={0}
           >
             <ProtocolIcon src={protocol.logoURI} title={fullLabel} />

diff --git a/src/components/ProtocolSelector/style.ts b/src/components/ProtocolSelector/style.ts
@@ -89,7 +89,9 @@ export const DropDownList = styled.div`
     font-size: 0.9em;
     padding: 0.17rem 1.5rem 0.25rem 0;
 
-    &:hover {
+    &:hover,
+    &:focus {
+      outline: none;
       background-color: ${({ theme }) => _(theme, 'primary', 'hoverBgColor')};
       color: ${({ theme }) => _(theme, 'primary', 'hoverColor')};