fix: make sample controls focusable

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>
     );
   };
 

src/common-elements/samples.tsx

@@ -6,12 +6,19 @@ export const SampleControls = styled.div`
   transition: opacity 0.3s ease;
   text-align: right;
 
-  > span {
+  > button {
-    display: inline-block;
+    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);
     }
   }

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>
+        <button onClick={this.expandAll}> Expand all </button>
-        <span onClick={this.collapseAll}> Collapse all </span>
+        <button onClick={this.collapseAll}> Collapse all </button>
       </SampleControls>
       <OptionsContext.Consumer>
         {options => (