Redocly/redoc
1
1
Fork 0
mirror of https://github.com/Redocly/redoc.git synced 2025-06-01 19:53:08 +03:00
Code Issues Packages Projects Releases Wiki Activity

fix: make endpoint dropdown accessible

Browse Source
This commit is contained in:
Anya Stasiuk 2020-06-04 16:37:28 +03:00 committed by Roman Hotsiy
parent e8a0d105ca
commit 3d25005f08
2 changed files with 16 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
src/components/Endpoint/styled.elements.ts
View File

@ -14,7 +14,12 @@ export const ServerRelativeURL = styled.span`
text-overflow: ellipsis; text-overflow: ellipsis;
`; `;
export const EndpointInfo = styled.div<{ expanded?: boolean; inverted?: boolean }>` export const EndpointInfo = styled.button<{ expanded?: boolean; inverted?: boolean }>`
outline: 0;
color: inherit;
width: 100%;
text-align: left;
cursor: pointer;
padding: 10px 30px 10px ${props => (props.inverted ? '10px' : '20px')}; padding: 10px 30px 10px ${props => (props.inverted ? '10px' : '20px')};
border-radius: ${props => (props.inverted ? '0' : '4px 4px 0 0')}; border-radius: ${props => (props.inverted ? '0' : '4px 4px 0 0')};
background-color: ${props => background-color: ${props =>
@ -32,6 +37,9 @@ export const EndpointInfo = styled.div<{ expanded?: boolean; inverted?: boolean
.${ServerRelativeURL} { .${ServerRelativeURL} {
color: ${props => (props.inverted ? props.theme.colors.text.primary : '#ffffff')} color: ${props => (props.inverted ? props.theme.colors.text.primary : '#ffffff')}
} }
&:focus {
box-shadow: inset 0 2px 2px rgba(0, 0, 0, 0.3), 0 2px 0 rgba(128, 128, 128, 0.15);
}
`; `;
export const HttpVerb = styled.span.attrs((props: { type: string; compact?: boolean }) => ({ export const HttpVerb = styled.span.attrs((props: { type: string; compact?: boolean }) => ({

9
src/components/SelectOnClick/SelectOnClick.tsx
View File

@ -4,14 +4,19 @@ import { ClipboardService } from '../../services';
export class SelectOnClick extends React.PureComponent { export class SelectOnClick extends React.PureComponent {
private child: HTMLDivElement | null; private child: HTMLDivElement | null;
handleClick = () => { selectElement = () => {
ClipboardService.selectElement(this.child); ClipboardService.selectElement(this.child);
}; };
render() { render() {
const { children } = this.props; const { children } = this.props;
return ( return (
<div ref={el => (this.child = el)} onClick={this.handleClick}> <div
ref={el => (this.child = el)}
onClick={this.selectElement}
onFocus={this.selectElement}
tabIndex={0}
>
{children} {children}
</div> </div>
); );