fix: fix some accessibility issues

package.json

@@ -152,7 +152,7 @@
     "polished": "^3.4.4",
     "prismjs": "^1.19.0",
     "prop-types": "^15.7.2",
-    "react-dropdown": "^1.7.0",
+    "react-dropdown-aria": "^2.0.6",
     "react-tabs": "^3.1.0",
     "slugify": "^1.4.0",
     "stickyfill": "^1.1.1",

src/common-elements/CopyButtonWrapper.tsx

@@ -34,14 +34,14 @@ export class CopyButtonWrapper extends React.PureComponent<
 
   renderCopyButton = () => {
     return (
-      <span onClick={this.copy}>
+      <button onClick={this.copy}>
         <Tooltip
           title={ClipboardService.isSupported() ? 'Copied' : 'Not supported in your browser'}
           open={this.state.tooltipShown}
         >
           Copy
         </Tooltip>
-      </span>
+      </button>
     );
   };
 

src/common-elements/dropdown.ts

@@ -1,113 +1,134 @@
-import Dropdown from 'react-dropdown';
+import Dropdown from 'react-dropdown-aria';
 
 import styled from '../styled-components';
 
 export interface DropdownOption {
-  label: string;
+  idx: number;
   value: string;
 }
 
 export interface DropdownProps {
   options: DropdownOption[];
-  value: DropdownOption;
-  onChange: (val: DropdownOption) => void;
+  value: string;
+  onChange: (option: DropdownOption) => void;
+  ariaLabel: string;
 }
 
 export const StyledDropdown = styled(Dropdown)`
-  min-width: 100px;
-  display: inline-block;
-  position: relative;
-  width: auto;
-  font-family: ${props => props.theme.typography.headings.fontFamily};
-
-  .Dropdown-control {
-    font-family: ${props => props.theme.typography.headings.fontFamily};
+  && {
+    box-sizing: border-box;
+    min-width: 100px;
+    outline: none;
+    display: inline-block;
+    border-radius: 2px;
+    border: 1px solid rgba(38, 50, 56, 0.5);
+    vertical-align: bottom;
+    padding: 2px 0px 2px 6px;
     position: relative;
+    width: auto;
+    background: white;
+    color: #263238;
+    font-family: ${props => props.theme.typography.headings.fontFamily};
     font-size: 0.929em;
-    width: 100%;
     line-height: 1.5em;
-    vertical-align: middle;
     cursor: pointer;
-    border-color: rgba(38, 50, 56, 0.5);
-    color: #263238;
-    outline: none;
-    padding: 0.15em 1.5em 0.2em 0.5em;
-    border-radius: 2px;
-    border-width: 1px;
-    border-style: solid;
-    margin-top: 5px;
-    background: white;
-
-    box-sizing: border-box;
-
-    &:hover {
-      border-color: ${props => props.theme.colors.primary.main};
+    transition: border 0.25s ease, color 0.25s ease, box-shadow 0.25s ease;
+    &:hover,
+    &:focus-within {
+      border: 1px solid ${props => props.theme.colors.primary.main};
       color: ${props => props.theme.colors.primary.main};
-      box-shadow: 0px 2px 4px 0px rgba(34, 36, 38, 0.12);
+      box-shadow: 0px 0px 0px 1px ${props => props.theme.colors.primary.main};
+    }
+    .dropdown-selector {
+      display: inline-flex;
+      padding: 0;
+      height: auto;
+      padding-right: 20px;
+      position: relative;
+      margin-bottom: 5px;
+    }
+    .dropdown-selector-value {
+      font-family: ${props => props.theme.typography.headings.fontFamily};
+      position: relative;
+      font-size: 0.929em;
+      width: 100%;
+      line-height: 1;
+      vertical-align: middle;
+      color: #263238;
+      left: 0;
+      transition: color 0.25s ease, text-shadow 0.25s ease;
+    }
+    .dropdown-arrow {
+      position: absolute;
+      right: 3px;
+      top: 50%;
+      transform: translateY(-50%);
+      border-color: ${props => props.theme.colors.primary.main} transparent transparent;
+      border-style: solid;
+      border-width: 0.35em 0.35em 0;
+      width: 0;
+      svg {
+        display: none;
+      }
     }
-  }
 
-  .Dropdown-arrow {
-    border-color: ${props => props.theme.colors.primary.main} transparent transparent;
-    border-style: solid;
-    border-width: 0.35em 0.35em 0;
-    content: ' ';
-    display: block;
-    height: 0;
-    position: absolute;
-    right: 0.3em;
-    top: 50%;
-    margin-top: -0.125em;
-    width: 0;
-  }
+    .dropdown-selector-content {
+      position: absolute;
+      margin-top: 2px;
+      left: -2px;
+      right: 0;
 
-  .Dropdown-menu {
-    position: absolute;
-    margin-top: 2px;
-    left: 0;
-    right: 0;
+      z-index: 10;
+      min-width: 100px;
 
-    z-index: 10;
-    min-width: 100px;
+      background: white;
+      border: 1px solid rgba(38, 50, 56, 0.2);
+      box-shadow: 0px 2px 4px 0px rgba(34, 36, 38, 0.12), 0px 2px 10px 0px rgba(34, 36, 38, 0.08);
 
-    background: white;
-    border: 1px solid rgba(38, 50, 56, 0.2);
-    box-shadow: 0px 2px 4px 0px rgba(34, 36, 38, 0.12), 0px 2px 10px 0px rgba(34, 36, 38, 0.08);
+      max-height: 220px;
+      overflow: auto;
+    }
 
-    max-height: 220px;
-    overflow: auto;
-  }
+    .dropdown-option {
+      font-size: 0.9em;
+      color: #263238;
+      cursor: pointer;
+      padding: 0.4em;
 
-  .Dropdown-option {
-    font-size: 0.9em;
-    color: #263238;
-    cursor: pointer;
-    padding: 0.4em;
+      &[aria-selected='true'] {
+        background-color: rgba(0, 0, 0, 0.05);
+      }
 
-    &.is-selected {
-      background-color: rgba(0, 0, 0, 0.05);
+      &:hover {
+        background-color: rgba(38, 50, 56, 0.12);
+      }
     }
-
-    &:hover {
-      background-color: rgba(38, 50, 56, 0.12);
+    input {
+      cursor: pointer;
+      height: 1px;
     }
   }
 `;
 
 export const SimpleDropdown = styled(StyledDropdown)`
-  margin-left: 10px;
-  text-transform: none;
-  font-size: 0.969em;
+  && {
+    margin-left: 10px;
+    text-transform: none;
+    font-size: 0.969em;
 
-  .Dropdown-control {
     font-size: 1em;
     border: none;
     padding: 0 1.2em 0 0;
     background: transparent;
 
-    &:hover {
-      color: ${props => props.theme.colors.primary.main};
+    &:hover,
+    &:focus-within {
+      border: none;
       box-shadow: none;
+      .dropdown-selector-value {
+        color: ${props => props.theme.colors.primary.main};
+        text-shadow: 0px 0px 0px ${props => props.theme.colors.primary.main};
+      }
     }
   }
 `;

src/common-elements/fields-layout.ts

@@ -62,7 +62,7 @@ export const PropertyNameCell = styled(PropertyCell)`
   vertical-align: top;
   line-height: 20px;
   white-space: nowrap;
-  font-size: 0.929em;
+  font-size: 13px;
   font-family: ${props => props.theme.typography.code.fontFamily};
 
   &.deprecated {

src/common-elements/fields.ts

@@ -5,8 +5,19 @@ import { PropertyNameCell } from './fields-layout';
 import { ShelfIcon } from './shelfs';
 
 export const ClickablePropertyNameCell = styled(PropertyNameCell)`
-  cursor: pointer;
-
+  button {
+    background-color: transparent;
+    border: 0;
+    outline: 0;
+    font-size: 13px;
+    font-family: ${props => props.theme.typography.code.fontFamily};
+    cursor: pointer;
+    padding: 0;
+    color: ${props => props.theme.colors.text.primary};
+    &:focus {
+      font-weight: ${({ theme }) => theme.typography.fontWeightBold};
+    }
+  }
   ${ShelfIcon} {
     height: ${({ theme }) => theme.schema.arrow.size};
     width: ${({ theme }) => theme.schema.arrow.size};

src/common-elements/linkify.tsx

@@ -14,6 +14,7 @@ export const linkifyMixin = className => css`
     line-height: 1;
     width: 20px;
     display: inline-block;
+    outline: 0;
   }
   ${className}:before {
     content: '';

src/common-elements/samples.tsx

@@ -5,13 +5,22 @@ export const SampleControls = styled.div`
   opacity: 0.4;
   transition: opacity 0.3s ease;
   text-align: right;
-
-  > span {
-    display: inline-block;
+  &:focus-within {
+    opacity: 1;
+  }
+  > button {
+    background-color: transparent;
+    border: 0;
+    color: inherit;
     padding: 2px 10px;
+    font-family: ${({ theme }) => theme.typography.fontFamily};
+    font-size: ${({ theme }) => theme.typography.fontSize};
+    line-height: ${({ theme }) => theme.typography.lineHeight};
     cursor: pointer;
+    outline: 0;
 
-    :hover {
+    :hover,
+    :focus {
       background: rgba(255, 255, 255, 0.1);
     }
   }

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"
       >
         <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>

src/common-elements/tabs.ts

@@ -33,6 +33,9 @@ export const Tabs = styled(ReactTabs)`
       &.react-tabs__tab--selected {
         color: ${props => props.theme.colors.text.primary};
         background: ${({ theme }) => theme.rightPanel.textColor};
+        &:focus {
+          outline: auto;
+        }
       }
 
       &:only-child {

src/components/CallbackSamples/CallbackSamples.tsx

@@ -43,8 +43,8 @@ export class CallbackSamples extends React.Component<CallbackSamplesProps> {
 
     const dropdownOptions = operations.map((callback, idx) => {
       return {
-        label: `${callback.httpVerb.toUpperCase()}: ${callback.name}`,
-        value: idx.toString(),
+        value: `${callback.httpVerb.toUpperCase()}: ${callback.name}`,
+        idx,
       };
     });
 

src/components/DropdownOrLabel/DropdownOrLabel.tsx

@@ -10,7 +10,7 @@ export interface DropdownOrLabelProps extends DropdownProps {
 export function DropdownOrLabel(props: DropdownOrLabelProps): JSX.Element {
   const { Label = MimeLabel, Dropdown = SimpleDropdown } = props;
   if (props.options.length === 1) {
-    return <Label>{props.options[0].label}</Label>;
+    return <Label>{props.options[0].value}</Label>;
   }
-  return <Dropdown {...props} />;
+  return <Dropdown {...props} searchable={false} />;
 }

src/components/Endpoint/Endpoint.tsx

@@ -62,7 +62,7 @@ export class Endpoint extends React.Component<EndpointProps, EndpointState> {
                 style={{ marginRight: '-25px' }}
               />
             </EndpointInfo>
-            <ServersOverlay expanded={expanded}>
+            <ServersOverlay expanded={expanded} aria-hidden={!expanded}>
               {operation.servers.map(server => {
                 const normalizedUrl = options.expandDefaultServerVariables
                   ? expandDefaultServerVariables(server.url, server.variables)

src/components/Endpoint/styled.elements.ts

@@ -14,7 +14,12 @@ export const ServerRelativeURL = styled.span`
   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')};
   border-radius: ${props => (props.inverted ? '0' : '4px 4px 0 0')};
   background-color: ${props =>
@@ -32,6 +37,9 @@ export const EndpointInfo = styled.div<{ expanded?: boolean; inverted?: boolean
   .${ServerRelativeURL} {
     color: ${props => (props.inverted ? props.theme.colors.text.primary : '#ffffff')}
   }
+  &:focus {
+    box-shadow: inset 0 2px 2px rgba(0, 0, 0, 0.45), 0 2px 0 rgba(128, 128, 128, 0.25);
+  }
 `;
 
 export const HttpVerb = styled.span.attrs((props: { type: string; compact?: boolean }) => ({
@@ -59,7 +67,8 @@ export const ServersOverlay = styled.div<{ expanded: boolean }>`
   border-bottom-left-radius: 4px;
   border-bottom-right-radius: 4px;
   transition: all 0.25s ease;
-  ${props => (props.expanded ? '' : 'transform: translateY(-50%) scaleY(0);')}
+  visibility: hidden;
+  ${props => (props.expanded ? 'visibility: visible;' : 'transform: translateY(-50%) scaleY(0);')}
 `;
 
 export const ServerItem = styled.div`