Redocly/redoc
1
1
Fork 0
mirror of https://github.com/Redocly/redoc.git synced 2024-11-25 10:03:45 +03:00
Code Issues Packages Projects Releases Wiki Activity

fix: make response sections focusable

Browse Source
This commit is contained in:
Anya Stasiuk 2020-06-02 16:30:14 +03:00 committed by Roman Hotsiy
parent 47c6319206
commit 442014c06d
3 changed files with 19 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
src/common-elements/shelfs.tsx
View File

@ -26,6 +26,7 @@ class IntShelfIcon extends React.PureComponent<{
x="0" x="0"
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
y="0" 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 " /> <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> </svg>

9
src/components/Responses/ResponseTitle.tsx
View File

@ -17,7 +17,12 @@ export class ResponseTitle extends React.PureComponent<ResponseTitleProps> {
render() { render() {
const { title, type, empty, code, opened, className, onClick } = this.props; const { title, type, empty, code, opened, className, onClick } = this.props;
return ( return (
<div className={className} onClick={(!empty && onClick) || undefined}> <button
className={className}
onClick={(!empty && onClick) || undefined}
aria-expanded={opened}
disabled={empty}
>
{!empty && ( {!empty && (
<ShelfIcon <ShelfIcon
size={'1.5em'} size={'1.5em'}
@ -28,7 +33,7 @@ export class ResponseTitle extends React.PureComponent<ResponseTitleProps> {
)} )}
<strong>{code} </strong> <strong>{code} </strong>
<Markdown compact={true} inline={true} source={title} /> <Markdown compact={true} inline={true} source={title} />
</div> </button>
); );
} }
} }

12
src/components/Responses/styled.elements.ts
View File

@ -5,6 +5,10 @@ import styled from '../../styled-components';
import { ResponseTitle } from './ResponseTitle'; import { ResponseTitle } from './ResponseTitle';
export const StyledResponseTitle = styled(ResponseTitle)` export const StyledResponseTitle = styled(ResponseTitle)`
display: block;
border: 0;
width: 100%;
text-align: left;
padding: 10px; padding: 10px;
border-radius: 2px; border-radius: 2px;
margin-bottom: 4px; margin-bottom: 4px;
@ -14,7 +18,10 @@ export const StyledResponseTitle = styled(ResponseTitle)`
color: ${props => props.theme.colors.responses[props.type].color}; color: ${props => props.theme.colors.responses[props.type].color};
background-color: ${props => props.theme.colors.responses[props.type].backgroundColor}; 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 =>
(props.empty && (props.empty &&
` `
@ -26,6 +33,9 @@ cursor: default;
text-align: center; text-align: center;
display: inline-block; display: inline-block;
} }
&:focus {
outline: 0;
}
`) || `) ||
''}; ''};
`; `;