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" > 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 { render() { const { title, type, empty, code, opened, className, onClick } = this.props; return ( -
+
+ ); } } 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; +} `) || ''}; `;