Trap focus in dropdown menu

[DISCO-307]

Author: RoyEJohnson

src/app/components/Dropdown.tsx

@@ -1,11 +1,12 @@
+
 import { HTMLElement } from '@openstax/types/lib.dom';
 import flow from 'lodash/fp/flow';
 import isUndefined from 'lodash/fp/isUndefined';
 import omitBy from 'lodash/fp/omitBy';
 import React, { ReactNode } from 'react';
 import { FormattedMessage, useIntl } from 'react-intl';
 import styled, { css, keyframes } from 'styled-components/macro';
-import { useFocusLost } from '../reactUtils';
+import { useFocusLost, useTrapTabNavigation } from '../reactUtils';
 import { useOnEsc } from '../reactUtils';
 import theme from '../theme';
 import { preventDefault } from '../utils';
@@ -165,8 +166,19 @@ const TabTransparentDropdown = styled((
   `}
 `;
 
+function TrappingDropdownList(props: object) {
+  const ref = React.useRef(null);
+
+  useTrapTabNavigation(ref);
+
+  return (
+    <ol ref={ref} {...props} />
+  );
+}
+
+
 // tslint:disable-next-line:variable-name
-export const DropdownList = styled.ol`
+export const DropdownList = styled(TrappingDropdownList)`
   margin: 0;
   padding: 0.6rem 0;
   background: ${theme.color.neutral.formBackground};
@@ -204,6 +216,7 @@ export const DropdownList = styled.ol`
   }
 `;
 
+
 interface DropdownItemProps {
   message: string;
   ariaMessage?: string;

src/app/components/__snapshots__/DotMenu.spec.tsx.snap

@@ -499,6 +499,7 @@ exports[`Dropdown matches snapshot on right align 1`] = `
     </button>
     <ol
       className="c12"
+      rightAlign={true}
     >
       <li>
         <a

src/app/content/highlights/components/ColorPicker.tsx

@@ -61,6 +61,11 @@ const ColorButton = styled(({className, size, style, ...props}: ColorButtonProps
     height: 0;
     width: 0;
   }
+
+  :focus-within {
+    outline: 0.2rem auto Highlight;
+    outline: 0.2rem inset -webkit-focus-ring-color;
+  }
 `;
 
 type NavKeys = 'Home' | 'End' | 'ArrowLeft' | 'ArrowRight' | ' ' | 'Enter';

src/app/content/highlights/components/SummaryPopup/ContextMenu.tsx

@@ -126,12 +126,14 @@ const ContextMenu = ({
       transparentTab={false}
     >
       <HighlightToggleEditContent>
-        <ColorPicker
-          color={color}
-          size='small'
-          onChange={onColorChange}
-        />
         <StyledDropdownList>
+          <li>
+            <ColorPicker
+            color={color}
+            size='small'
+            onChange={onColorChange}
+            />
+          </li>
           <DropdownItem
             data-testid='edit'
             ariaMessage={editMessage}