From 442014c06d6a7d2260adf7bc5798dd29869f10c9 Mon Sep 17 00:00:00 2001
From: Anya Stasiuk <stasiukanya@gmail.com>
Date: Tue, 2 Jun 2020 16:30:14 +0300
Subject: [PATCH] fix: make response sections focusable

---
 src/common-elements/shelfs.tsx              |  1 +
 src/components/Responses/ResponseTitle.tsx  |  9 +++++++--
 src/components/Responses/styled.elements.ts | 12 +++++++++++-
 3 files changed, 19 insertions(+), 3 deletions(-)

diff --git a/src/common-elements/shelfs.tsx b/src/common-elements/shelfs.tsx
index 649bc904e6..278a1c40c9 100644
--- a/src/common-elements/shelfs.tsx
+++ b/src/common-elements/shelfs.tsx
@@ -26,6 +26,7 @@ class IntShelfIcon extends React.PureComponent<{
         x="0"
         xmlns="http://www.w3.org/2000/svg"
         y="0"
+        aria-hidden="true"
       >
         <polygon points="17.3 8.3 12 13.6 6.7 8.3 5.3 9.7 12 16.4 18.7 9.7 " />
       </svg>
diff --git a/src/components/Responses/ResponseTitle.tsx b/src/components/Responses/ResponseTitle.tsx
index 382c24ad2f..3058f8d301 100644
--- a/src/components/Responses/ResponseTitle.tsx
+++ b/src/components/Responses/ResponseTitle.tsx
@@ -17,7 +17,12 @@ export class ResponseTitle extends React.PureComponent<ResponseTitleProps> {
   render() {
     const { title, type, empty, code, opened, className, onClick } = this.props;
     return (
-      <div className={className} onClick={(!empty && onClick) || undefined}>
+      <button
+        className={className}
+        onClick={(!empty && onClick) || undefined}
+        aria-expanded={opened}
+        disabled={empty}
+      >
         {!empty && (
           <ShelfIcon
             size={'1.5em'}
@@ -28,7 +33,7 @@ export class ResponseTitle extends React.PureComponent<ResponseTitleProps> {
         )}
         <strong>{code} </strong>
         <Markdown compact={true} inline={true} source={title} />
-      </div>
+      </button>
     );
   }
 }
diff --git a/src/components/Responses/styled.elements.ts b/src/components/Responses/styled.elements.ts
index bb0735da7d..a705812186 100644
--- a/src/components/Responses/styled.elements.ts
+++ b/src/components/Responses/styled.elements.ts
@@ -5,6 +5,10 @@ import styled from '../../styled-components';
 import { ResponseTitle } from './ResponseTitle';
 
 export const StyledResponseTitle = styled(ResponseTitle)`
+  display: block;
+  border: 0;
+  width: 100%;
+  text-align: left;
   padding: 10px;
   border-radius: 2px;
   margin-bottom: 4px;
@@ -14,7 +18,10 @@ export const StyledResponseTitle = styled(ResponseTitle)`
 
   color: ${props => props.theme.colors.responses[props.type].color};
   background-color: ${props => props.theme.colors.responses[props.type].backgroundColor};
-
+  &:focus {
+    outline: auto;
+    outline-color: ${props => props.theme.colors.responses[props.type].color};
+  }
   ${props =>
     (props.empty &&
       `
@@ -26,6 +33,9 @@ cursor: default;
   text-align: center;
   display: inline-block;
 }
+&:focus {
+  outline: 0;
+}
 `) ||
     ''};
 `;