From 46eee7b70c8ee9da0d8857a823c4df39a5f18b53 Mon Sep 17 00:00:00 2001
From: Anna Stasiuk <stasiukanya@gmail.com>
Date: Thu, 20 Aug 2020 17:06:55 +0300
Subject: [PATCH] fix: make callbacks expandable by keyboard (#1354)

---
 src/components/Callbacks/CallbackTitle.tsx  | 7 +++++--
 src/components/Callbacks/styled.elements.ts | 2 ++
 2 files changed, 7 insertions(+), 2 deletions(-)

diff --git a/src/components/Callbacks/CallbackTitle.tsx b/src/components/Callbacks/CallbackTitle.tsx
index d91dab7c..10b888f3 100644
--- 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
index 522423bb..03dd3ff3 100644
--- 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`