fix: make sample controls focusable

Redocly · Jul 13, 2020 · 006031c · 006031c
1 parent 05fd754
commit 006031c
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 7 deletions.
diff --git 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
@@ -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
@@ -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 => (