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

)

* fix: make api endpoint selectable

* fix: make response schema details selectable

* fix: update react-dropdown-aria to make dropdowns selectable

package.json

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

src/common-elements/schema.ts

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

src/components/SelectOnClick/SelectOnClick.tsx

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