fix: make endpoint dropdown accessible

Redocly · Jul 13, 2020 · 3d25005 · 3d25005
1 parent e8a0d10
commit 3d25005
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 3 deletions.
diff --git 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
@@ -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>
     );