From 006031c51787b617f2b0aed80a4b8486c5d2d3ca Mon Sep 17 00:00:00 2001
From: Anya Stasiuk <stasiukanya@gmail.com>
Date: Wed, 3 Jun 2020 13:32:45 +0300
Subject: [PATCH] fix: make sample controls focusable

---
 src/common-elements/CopyButtonWrapper.tsx |  4 ++--
 src/common-elements/samples.tsx           | 13 ++++++++++---
 src/components/JsonViewer/JsonViewer.tsx  |  4 ++--
 3 files changed, 14 insertions(+), 7 deletions(-)

diff --git a/src/common-elements/CopyButtonWrapper.tsx b/src/common-elements/CopyButtonWrapper.tsx
index c1b5e468..3111af8d 100644
--- a/src/common-elements/CopyButtonWrapper.tsx
+++ b/src/common-elements/CopyButtonWrapper.tsx
@@ -34,14 +34,14 @@ export class CopyButtonWrapper extends React.PureComponent<
 
   renderCopyButton = () => {
     return (
-      <span onClick={this.copy}>
+      <button onClick={this.copy}>
         <Tooltip
           title={ClipboardService.isSupported() ? 'Copied' : 'Not supported in your browser'}
           open={this.state.tooltipShown}
         >
           Copy
         </Tooltip>
-      </span>
+      </button>
     );
   };
 
diff --git a/src/common-elements/samples.tsx b/src/common-elements/samples.tsx
index f4855a43..a2509724 100644
--- a/src/common-elements/samples.tsx
+++ b/src/common-elements/samples.tsx
@@ -6,12 +6,19 @@ export const SampleControls = styled.div`
   transition: opacity 0.3s ease;
   text-align: right;
 
-  > span {
-    display: inline-block;
+  > button {
+    background-color: transparent;
+    border: 0;
+    color: inherit;
     padding: 2px 10px;
+    font-family: ${({ theme }) => theme.typography.fontFamily};
+    font-size: ${({ theme }) => theme.typography.fontSize};
+    line-height: ${({ theme }) => theme.typography.lineHeight};
     cursor: pointer;
+    outline: 0;
 
-    :hover {
+    :hover,
+    :focus {
       background: rgba(255, 255, 255, 0.1);
     }
   }
diff --git a/src/components/JsonViewer/JsonViewer.tsx b/src/components/JsonViewer/JsonViewer.tsx
index d42c9df7..0ef0da51 100644
--- a/src/components/JsonViewer/JsonViewer.tsx
+++ b/src/components/JsonViewer/JsonViewer.tsx
@@ -30,8 +30,8 @@ class Json extends React.PureComponent<JsonProps> {
     <JsonViewerWrap>
       <SampleControls>
         {renderCopyButton()}
-        <span onClick={this.expandAll}> Expand all </span>
-        <span onClick={this.collapseAll}> Collapse all </span>
+        <button onClick={this.expandAll}> Expand all </button>
+        <button onClick={this.collapseAll}> Collapse all </button>
       </SampleControls>
       <OptionsContext.Consumer>
         {options => (