fix: make response sections focusable

Redocly · Jul 13, 2020 · 442014c · 442014c
1 parent 47c6319
commit 442014c
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 3 deletions.
diff --git 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
@@ -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
@@ -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;
+}
 `) ||
     ''};
 `;