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

fix: make elements accessible by keyboard navigation tools (#1339)

Browse Source 
* fix: make api endpoint selectable

* fix: make response schema details selectable

* fix: update react-dropdown-aria to make dropdowns selectable
This commit is contained in:
Anna Stasiuk 2020-08-04 12:19:01 +03:00 committed by GitHub
parent 3ae069c436
commit 2ce71895bc
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 20 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
package-lock.json generated
View File

@ -3204,9 +3204,9 @@
} }
}, },
"parse-json": { "parse-json": {
"version": "5.0.0", "version": "5.0.1",
"resolved": "https://registry.npmjs.org/parse-json/-/parse-json-5.0.0.tgz", "resolved": "https://registry.npmjs.org/parse-json/-/parse-json-5.0.1.tgz",
"integrity": "sha512-OOY5b7PAEFV0E2Fir1KOkxchnZNCdowAJgQ5NuxjpBKTRP3pQhwkrkxqQjeoKJ+fO7bCpmIZaogI4eZGDMEGOw==", "integrity": "sha512-ztoZ4/DYeXQq4E21v169sC8qWINGpcosGv9XhTDvg9/hWvx/zrFkc9BiWxR58OJLHGk28j5BL0SDLeV2WmFZlQ==",
"requires": { "requires": {
"@babel/code-frame": "^7.0.0", "@babel/code-frame": "^7.0.0",
"error-ex": "^1.3.1", "error-ex": "^1.3.1",
@ -14908,9 +14908,9 @@
} }
}, },
"react-dropdown-aria": { "react-dropdown-aria": {
"version": "2.0.6", "version": "2.0.7",
"resolved": "https://registry.npmjs.org/react-dropdown-aria/-/react-dropdown-aria-2.0.6.tgz", "resolved": "https://registry.npmjs.org/react-dropdown-aria/-/react-dropdown-aria-2.0.7.tgz",
"integrity": "sha512-/9NlFopChlSKmuGL2P6S3oDwl9ddXcbNLnd1a7POov4f5/oGtSc3qBFmS4wH5xmLJe/38MhPOKF3e2q3laRi1g==", "integrity": "sha512-wRjmmMUmA/q33ZugY0lTka4b6jY1ehp8qgHG2yeda64z5I0gTOtyxUVI/tA9ZBlBqysDN22hMGHNMnPb2sg+Qw==",
"requires": { "requires": {
"emotion": "^9.2.6" "emotion": "^9.2.6"
} }

2
package.json
View File

@ -152,7 +152,7 @@
"polished": "^3.6.5", "polished": "^3.6.5",
"prismjs": "^1.20.0", "prismjs": "^1.20.0",
"prop-types": "^15.7.2", "prop-types": "^15.7.2",
"react-dropdown-aria": "^2.0.6", "react-dropdown-aria": "^2.0.7",
"react-tabs": "^3.1.1", "react-tabs": "^3.1.1",
"slugify": "^1.4.4", "slugify": "^1.4.4",
"stickyfill": "^1.1.1", "stickyfill": "^1.1.1",

16
src/common-elements/schema.ts
View File

@ -1,9 +1,8 @@
import styled from '../styled-components'; import styled from '../styled-components';
import { darken } from 'polished';
export const OneOfList = styled.ul` export const OneOfList = styled.div`
margin: 0 0 3px 0; margin: 0 0 3px 0;
padding: 0;
list-style: none;
display: inline-block; display: inline-block;
`; `;
@ -15,7 +14,7 @@ export const OneOfLabel = styled.span`
} }
`; `;
export const OneOfButton = styled.li<{ active: boolean }>` export const OneOfButton = styled.button<{ active: boolean }>`
display: inline-block; display: inline-block;
margin-right: 10px; margin-right: 10px;
margin-bottom: 5px; margin-bottom: 5px;
@ -23,12 +22,21 @@ export const OneOfButton = styled.li<{ active: boolean }>`
cursor: pointer; cursor: pointer;
border: 1px solid ${props => props.theme.colors.primary.main}; border: 1px solid ${props => props.theme.colors.primary.main};
padding: 2px 10px; padding: 2px 10px;
line-height: 1.5em;
outline: none;
&:focus {
box-shadow: 0 0 0 1px ${props => props.theme.colors.primary.main};
}
${props => { ${props => {
if (props.active) { if (props.active) {
return ` return `
color: white; color: white;
background-color: ${props.theme.colors.primary.main}; background-color: ${props.theme.colors.primary.main};
&:focus {
box-shadow: none;
background-color: ${darken(0.15, props.theme.colors.primary.main)};
}
`; `;
} else { } else {
return ` return `

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

@ -16,6 +16,7 @@ export class SelectOnClick extends React.PureComponent {
onClick={this.selectElement} onClick={this.selectElement}
onFocus={this.selectElement} onFocus={this.selectElement}
tabIndex={0} tabIndex={0}
role="button"
> >
{children} {children}
</div> </div>