Trap focus in note menu (#2246)

* Use normal component instead of "render" call This turns out to be unrelated to the dropdown I'm using. * Trap focus in dropdown menu [DISCO-307] * Update/use defaultFocusOutline * Remove doubled focus style * Use focus indicator on ColorIndicator, not ColorPicker Adjust focus outline style Update snapshots * Add z-index so MH ColorIndicator focus outline is visible --------- Co-authored-by: staxly[bot] <35789409+staxly[bot]@users.noreply.github.com>
openstax · Jul 18, 2024 · 3255c0d · 3255c0d
1 parent 5af586b
commit 3255c0d
Show file tree

Hide file tree

Showing 15 changed files with 484 additions and 438 deletions.
diff --git a/src/app/components/Dropdown.tsx b/src/app/components/Dropdown.tsx
@@ -1,13 +1,14 @@
+
 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 theme, { defaultFocusOutline } from '../theme';
 import { preventDefault } from '../utils';
 import { textStyle } from './Typography/base';
 
@@ -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};
@@ -198,12 +210,12 @@ export const DropdownList = styled.ol`
     &:hover,
     &:focus {
       background: ${theme.color.neutral.formBorder};
-      outline: 0.2rem auto Highlight;
-      outline: 0.2rem inset -webkit-focus-ring-color;
+      ${defaultFocusOutline}
     }
   }
 `;
 
+
 interface DropdownItemProps {
   message: string;
   ariaMessage?: string;

diff --git a/src/app/components/__snapshots__/DotMenu.spec.tsx.snap b/src/app/components/__snapshots__/DotMenu.spec.tsx.snap
@@ -179,7 +179,7 @@ exports[`Dropdown matches snapshot 1`] = `
 .c12 li a:focus {
   background: #d5d5d5;
   outline: 0.2rem auto Highlight;
-  outline: 0.2rem inset -webkit-focus-ring-color;
+  outline: 0.2rem auto -webkit-focus-ring-color;
 }
 
 .c12.c12 {
@@ -452,7 +452,7 @@ exports[`Dropdown matches snapshot on right align 1`] = `
 .c12 li a:focus {
   background: #d5d5d5;
   outline: 0.2rem auto Highlight;
-  outline: 0.2rem inset -webkit-focus-ring-color;
+  outline: 0.2rem auto -webkit-focus-ring-color;
 }
 
 .c12.c12 {
@@ -499,6 +499,7 @@ exports[`Dropdown matches snapshot on right align 1`] = `
     </button>
     <ol
       className="c12"
+      rightAlign={true}
     >
       <li>
         <a

diff --git a/src/app/components/__snapshots__/Dropdown.spec.tsx.snap b/src/app/components/__snapshots__/Dropdown.spec.tsx.snap
@@ -135,7 +135,7 @@ exports[`Dropdown matches snapshot 1`] = `
 .c6 li a:focus {
   background: #d5d5d5;
   outline: 0.2rem auto Highlight;
-  outline: 0.2rem inset -webkit-focus-ring-color;
+  outline: 0.2rem auto -webkit-focus-ring-color;
 }
 
 .c1 {
@@ -443,7 +443,7 @@ exports[`Dropdown matches snapshot for tab hidden (open) 1`] = `
 .c4 li a:focus {
   background: #d5d5d5;
   outline: 0.2rem auto Highlight;
-  outline: 0.2rem inset -webkit-focus-ring-color;
+  outline: 0.2rem auto -webkit-focus-ring-color;
 }
 
 .c1 {

diff --git a/src/app/content/components/popUp/__snapshots__/ChapterFilter.spec.tsx.snap b/src/app/content/components/popUp/__snapshots__/ChapterFilter.spec.tsx.snap
@@ -115,8 +115,8 @@ input:checked + .c10 .c12 {
 .c8:focus-within {
   border-radius: 0.4rem;
   background-color: #f1f1f1;
-  outline: 0.1rem dotted #212121;
-  outline: 0.5rem auto -webkit-focus-ring-color;
+  outline: 0.2rem auto Highlight;
+  outline: 0.2rem auto -webkit-focus-ring-color;
 }
 
 .c8:focus-within .c9 {
@@ -161,8 +161,8 @@ input:checked + .c10 .c12 {
 .c15:focus-within {
   border-radius: 0.4rem;
   background-color: #f1f1f1;
-  outline: 0.1rem dotted #212121;
-  outline: 0.5rem auto -webkit-focus-ring-color;
+  outline: 0.2rem auto Highlight;
+  outline: 0.2rem auto -webkit-focus-ring-color;
 }
 
 .c15:focus-within .c9 {

diff --git a/src/app/content/components/popUp/__snapshots__/ColorFilter.spec.tsx.snap b/src/app/content/components/popUp/__snapshots__/ColorFilter.spec.tsx.snap
@@ -115,8 +115,8 @@ input:checked + .c8 .c10 {
 .c6:focus-within {
   border-radius: 0.4rem;
   background-color: #f1f1f1;
-  outline: 0.1rem dotted #212121;
-  outline: 0.5rem auto -webkit-focus-ring-color;
+  outline: 0.2rem auto Highlight;
+  outline: 0.2rem auto -webkit-focus-ring-color;
 }
 
 .c6:focus-within .c7 {
@@ -161,8 +161,8 @@ input:checked + .c8 .c10 {
 .c22:focus-within {
   border-radius: 0.4rem;
   background-color: #f1f1f1;
-  outline: 0.1rem dotted #212121;
-  outline: 0.5rem auto -webkit-focus-ring-color;
+  outline: 0.2rem auto Highlight;
+  outline: 0.2rem auto -webkit-focus-ring-color;
 }
 
 .c22:focus-within .c7 {
@@ -296,8 +296,9 @@ input:checked + .c8 .c10 {
 
 .c13 input:focus + .c16 {
   display: block;
-  outline: 0.1rem dotted #212121;
-  outline: 0.5rem auto -webkit-focus-ring-color;
+  outline: 0.2rem auto Highlight;
+  outline: 0.2rem auto -webkit-focus-ring-color;
+  z-index: 1;
 }
 
 .c20 {
@@ -329,8 +330,9 @@ input:checked + .c8 .c10 {
 
 .c20 input:focus + .c16 {
   display: block;
-  outline: 0.1rem dotted #212121;
-  outline: 0.5rem auto -webkit-focus-ring-color;
+  outline: 0.2rem auto Highlight;
+  outline: 0.2rem auto -webkit-focus-ring-color;
+  z-index: 1;
 }
 
 .c23 {
@@ -362,8 +364,9 @@ input:checked + .c8 .c10 {
 
 .c23 input:focus + .c16 {
   display: block;
-  outline: 0.1rem dotted #212121;
-  outline: 0.5rem auto -webkit-focus-ring-color;
+  outline: 0.2rem auto Highlight;
+  outline: 0.2rem auto -webkit-focus-ring-color;
+  z-index: 1;
 }
 
 .c25 {
@@ -395,8 +398,9 @@ input:checked + .c8 .c10 {
 
 .c25 input:focus + .c16 {
   display: block;
-  outline: 0.1rem dotted #212121;
-  outline: 0.5rem auto -webkit-focus-ring-color;
+  outline: 0.2rem auto Highlight;
+  outline: 0.2rem auto -webkit-focus-ring-color;
+  z-index: 1;
 }
 
 .c27 {
@@ -428,8 +432,9 @@ input:checked + .c8 .c10 {
 
 .c27 input:focus + .c16 {
   display: block;
-  outline: 0.1rem dotted #212121;
-  outline: 0.5rem auto -webkit-focus-ring-color;
+  outline: 0.2rem auto Highlight;
+  outline: 0.2rem auto -webkit-focus-ring-color;
+  z-index: 1;
 }
 
 .c19 {

diff --git a/src/app/content/highlights/components/ColorIndicator.tsx b/src/app/content/highlights/components/ColorIndicator.tsx
@@ -110,6 +110,7 @@ const ColorIndicator = styled(Hoc)`
   input:focus + ${FocusedStyle} {
     display: block;
     ${defaultFocusOutline}
+    z-index: 1;
   }
 `;
 

diff --git a/src/app/content/highlights/components/SummaryPopup/ContextMenu.tsx b/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}