From 3d25005f084f06ac01b8fa13eb1d69092e99fd27 Mon Sep 17 00:00:00 2001
From: Anya Stasiuk <stasiukanya@gmail.com>
Date: Thu, 4 Jun 2020 16:37:28 +0300
Subject: [PATCH] fix: make endpoint dropdown accessible

---
 src/components/Endpoint/styled.elements.ts     | 10 +++++++++-
 src/components/SelectOnClick/SelectOnClick.tsx |  9 +++++++--
 2 files changed, 16 insertions(+), 3 deletions(-)

diff --git a/src/components/Endpoint/styled.elements.ts b/src/components/Endpoint/styled.elements.ts
index b2a45fde97..4eb5e1d145 100644
--- a/src/components/Endpoint/styled.elements.ts
+++ b/src/components/Endpoint/styled.elements.ts
@@ -14,7 +14,12 @@ export const ServerRelativeURL = styled.span`
   text-overflow: ellipsis;
 `;
 
-export const EndpointInfo = styled.div<{ expanded?: boolean; inverted?: boolean }>`
+export const EndpointInfo = styled.button<{ expanded?: boolean; inverted?: boolean }>`
+  outline: 0;
+  color: inherit;
+  width: 100%;
+  text-align: left;
+  cursor: pointer;
   padding: 10px 30px 10px ${props => (props.inverted ? '10px' : '20px')};
   border-radius: ${props => (props.inverted ? '0' : '4px 4px 0 0')};
   background-color: ${props =>
@@ -32,6 +37,9 @@ export const EndpointInfo = styled.div<{ expanded?: boolean; inverted?: boolean
   .${ServerRelativeURL} {
     color: ${props => (props.inverted ? props.theme.colors.text.primary : '#ffffff')}
   }
+  &:focus {
+    box-shadow: inset 0 2px 2px rgba(0, 0, 0, 0.3), 0 2px 0 rgba(128, 128, 128, 0.15);
+  }
 `;
 
 export const HttpVerb = styled.span.attrs((props: { type: string; compact?: boolean }) => ({
diff --git a/src/components/SelectOnClick/SelectOnClick.tsx b/src/components/SelectOnClick/SelectOnClick.tsx
index 9856905c2f..1cd966d309 100644
--- a/src/components/SelectOnClick/SelectOnClick.tsx
+++ b/src/components/SelectOnClick/SelectOnClick.tsx
@@ -4,14 +4,19 @@ import { ClipboardService } from '../../services';
 
 export class SelectOnClick extends React.PureComponent {
   private child: HTMLDivElement | null;
-  handleClick = () => {
+  selectElement = () => {
     ClipboardService.selectElement(this.child);
   };
 
   render() {
     const { children } = this.props;
     return (
-      <div ref={el => (this.child = el)} onClick={this.handleClick}>
+      <div
+        ref={el => (this.child = el)}
+        onClick={this.selectElement}
+        onFocus={this.selectElement}
+        tabIndex={0}
+      >
         {children}
       </div>
     );