Update/use defaultFocusOutline

Author: RoyEJohnson

src/app/components/Dropdown.tsx

@@ -8,7 +8,7 @@ import { FormattedMessage, useIntl } from 'react-intl';
 import styled, { css, keyframes } from 'styled-components/macro';
 import { useFocusLost, useTrapTabNavigation } from '../reactUtils';
 import { useOnEsc } from '../reactUtils';
-import theme from '../theme';
+import theme, { defaultFocusOutline } from '../theme';
 import { preventDefault } from '../utils';
 import { textStyle } from './Typography/base';
 
@@ -210,8 +210,7 @@ export const DropdownList = styled(TrappingDropdownList)`
     &:hover,
     &:focus {
       background: ${theme.color.neutral.formBorder};
-      outline: 0.2rem auto Highlight;
-      outline: 0.2rem inset -webkit-focus-ring-color;
+      ${defaultFocusOutline}
     }
   }
 `;

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

@@ -7,6 +7,7 @@ import { highlightStyles } from '../../constants';
 import { cardPadding } from '../constants';
 import ColorIndicator from './ColorIndicator';
 import { HTMLDivElement, HTMLInputElement } from '@openstax/types/lib.dom';
+import { defaultFocusOutline } from '../../../theme';
 
 interface SingleSelectProps {
   color?: HighlightColorEnum;
@@ -63,8 +64,7 @@ const ColorButton = styled(({className, size, style, ...props}: ColorButtonProps
   }
 
   :focus-within {
-    outline: 0.2rem auto Highlight;
-    outline: 0.2rem inset -webkit-focus-ring-color;
+    ${defaultFocusOutline}
   }
 `;
 

src/app/theme.ts

@@ -30,10 +30,10 @@ const textColors = {
 
 // Browser default outline for focus items per
 // tslint:disable-next-line:max-line-length
-// https://stackoverflow.com/questions/20609485/what-is-the-default-style-of-the-blue-focus-outline-in-chrome/38498539#38498539
+// https://css-tricks.com/copy-the-browsers-native-focus-styles/
 export const defaultFocusOutline = `
-  outline: 0.1rem dotted #212121;
-  outline: 0.5rem auto -webkit-focus-ring-color;
+  outline: 0.2rem auto Highlight;
+  outline: 0.2rem inset -webkit-focus-ring-color;
 `;
 
 const greyColors = {