Focus follows mouse

openstax · Sep 17, 2024 · 50679b6 · 50679b6
1 parent 2af92e5
commit 50679b6
Show file tree

Hide file tree

Showing 6 changed files with 29 additions and 1 deletion.
diff --git a/src/app/components/Dropdown.spec.tsx b/src/app/components/Dropdown.spec.tsx
@@ -107,6 +107,7 @@ describe('Dropdown', () => {
     const useOnEscSpy = jest.spyOn(reactUtils, 'useOnEsc');
 
     const focus = jest.fn();
+    const focus2 = jest.fn();
     const addEventListener = jest.fn();
     const removeEventListener = jest.fn();
     const createNodeMock = () => ({focus, addEventListener, removeEventListener});
@@ -126,12 +127,19 @@ describe('Dropdown', () => {
 
     expect(() => component.root.findByType(DropdownList)).not.toThrow();
 
+    renderer.act(() => {
+      const buttons = component.root.findAllByType('button');
+
+      buttons[1].props.onMouseEnter({target: {focus: focus2}});
+    });
+
     renderer.act(() => {
       useOnEscSpy.mock.calls[0][1]();
     });
 
     expect(() => component.root.findByType(DropdownList)).toThrow();
     expect(focus).toHaveBeenCalled();
+    expect(focus2).toHaveBeenCalled();
 
     useOnEscSpy.mockClear();
   });

diff --git a/src/app/components/Dropdown.tsx b/src/app/components/Dropdown.tsx
@@ -245,21 +245,28 @@ const DropdownItemContent = ({
     'data-analytics-label': dataAnalyticsLabel,
     'data-analytics-region': dataAnalyticsRegion,
   });
-  return <FormattedMessage id={message}>
+  const focusMe = React.useCallback(
+    ({target: me}) => me.focus(),
+    []
+  );
+
+return <FormattedMessage id={message}>
     {(msg) => href
       ? <a
         role='button'
         href={href}
         tabIndex={0}
         onClick={onClick}
         target={target}
+        onMouseEnter={focusMe}
         {...analyticsDataProps}
       >{prefix}{msg}</a>
       // Safari support tab-navigation of buttons; this operates with space or Enter
       : <button
         type='button'
         tabIndex={0}
         onClick={onClick ? flow(preventDefault, onClick) : preventDefault}
+        onMouseEnter={focusMe}
         {...analyticsDataProps}
       >
         {prefix}{msg}

diff --git a/src/app/components/__snapshots__/DotMenu.spec.tsx.snap b/src/app/components/__snapshots__/DotMenu.spec.tsx.snap
@@ -231,6 +231,7 @@ exports[`Dropdown matches snapshot 1`] = `
       <li>
         <button
           onClick={[Function]}
+          onMouseEnter={[Function]}
           tabIndex={0}
           type="button"
         >
@@ -241,6 +242,7 @@ exports[`Dropdown matches snapshot 1`] = `
         <a
           href="/wooo"
           onClick={[Function]}
+          onMouseEnter={[Function]}
           role="button"
           tabIndex={0}
         >
@@ -507,6 +509,7 @@ exports[`Dropdown matches snapshot on right align 1`] = `
       <li>
         <button
           onClick={[Function]}
+          onMouseEnter={[Function]}
           tabIndex={0}
           type="button"
         >
@@ -517,6 +520,7 @@ exports[`Dropdown matches snapshot on right align 1`] = `
         <a
           href="/wooo"
           onClick={[Function]}
+          onMouseEnter={[Function]}
           role="button"
           tabIndex={0}
         >

diff --git a/src/app/components/__snapshots__/Dropdown.spec.tsx.snap b/src/app/components/__snapshots__/Dropdown.spec.tsx.snap
@@ -162,6 +162,7 @@ exports[`Dropdown matches snapshot 1`] = `
       <li>
         <button
           onClick={[Function]}
+          onMouseEnter={[Function]}
           tabIndex={0}
           type="button"
         >
@@ -172,6 +173,7 @@ exports[`Dropdown matches snapshot 1`] = `
         <a
           href="/wooo"
           onClick={[Function]}
+          onMouseEnter={[Function]}
           role="button"
           tabIndex={0}
         >
@@ -470,6 +472,7 @@ exports[`Dropdown matches snapshot for tab hidden (open) 1`] = `
     <li>
       <button
         onClick={[Function]}
+        onMouseEnter={[Function]}
         tabIndex={0}
         type="button"
       >
@@ -480,6 +483,7 @@ exports[`Dropdown matches snapshot for tab hidden (open) 1`] = `
       <a
         href="/wooo"
         onClick={[Function]}
+        onMouseEnter={[Function]}
         role="button"
         tabIndex={0}
       >

diff --git a/src/app/content/highlights/components/SummaryPopup/__snapshots__/ContextMenu.spec.tsx.snap b/src/app/content/highlights/components/SummaryPopup/__snapshots__/ContextMenu.spec.tsx.snap
@@ -979,6 +979,7 @@ exports[`ContextMenu match snapshot when open 1`] = `
         >
           <button
             onClick={[Function]}
+            onMouseEnter={[Function]}
             tabIndex={0}
             type="button"
           >
@@ -1003,6 +1004,7 @@ exports[`ContextMenu match snapshot when open 1`] = `
         >
           <button
             onClick={[Function]}
+            onMouseEnter={[Function]}
             tabIndex={0}
             type="button"
           >
@@ -1026,6 +1028,7 @@ exports[`ContextMenu match snapshot when open 1`] = `
           <a
             data-analytics-region="MH gotohighlight"
             href="/link/to/highlight"
+            onMouseEnter={[Function]}
             role="button"
             tabIndex={0}
             target="_blank"

diff --git a/src/app/content/highlights/components/__snapshots__/DisplayNote.spec.tsx.snap b/src/app/content/highlights/components/__snapshots__/DisplayNote.spec.tsx.snap
@@ -619,6 +619,7 @@ exports[`DisplayNote matches snapshot when focused with opened dropdown 1`] = `
       <li>
         <button
           onClick={[Function]}
+          onMouseEnter={[Function]}
           tabIndex={0}
           type="button"
         >
@@ -628,6 +629,7 @@ exports[`DisplayNote matches snapshot when focused with opened dropdown 1`] = `
       <li>
         <button
           onClick={[Function]}
+          onMouseEnter={[Function]}
           tabIndex={0}
           type="button"
         >