fix: make callbacks expandable by keyboard (#1354)

Redocly · Aug 20, 2020 · 46eee7b · 46eee7b
1 parent 0ab06cf
commit 46eee7b
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 2 deletions.
diff --git a/src/components/Callbacks/CallbackTitle.tsx b/src/components/Callbacks/CallbackTitle.tsx
@@ -32,7 +32,10 @@ export class CallbackTitle extends React.PureComponent<CallbackTitleProps> {
   }
 }
 
-const CallbackTitleWrapper = styled.div`
+const CallbackTitleWrapper = styled.button`
+  border: 0;
+  width: 100%;
+  text-align: left;
   & > * {
     vertical-align: middle;
   }
@@ -45,7 +48,7 @@ const CallbackTitleWrapper = styled.div`
 `;
 
 const CallbackName = styled.span<{ deprecated?: boolean }>`
-  text-decoration: ${props => (props.deprecated ? 'line-through' : 'none')};
+  text-decoration: ${(props) => (props.deprecated ? 'line-through' : 'none')};
   margin-right: 8px;
 `;
 

diff --git a/src/components/Callbacks/styled.elements.ts b/src/components/Callbacks/styled.elements.ts
@@ -1,5 +1,6 @@
 import styled from '../../styled-components';
 import { CallbackTitle } from './CallbackTitle';
+import { darken } from 'polished';
 
 export const StyledCallbackTitle = styled(CallbackTitle)`
   padding: 10px;
@@ -8,6 +9,7 @@ export const StyledCallbackTitle = styled(CallbackTitle)`
   line-height: 1.5em;
   background-color: ${({ theme }) => theme.colors.gray[100]};
   cursor: pointer;
+  outline-color: ${({ theme }) => darken(theme.colors.tonalOffset, theme.colors.gray[100])};
 `;
 
 export const CallbackDetailsWrap = styled.div`