diff --git a/src/app/components/Dropdown.spec.tsx b/src/app/components/Dropdown.spec.tsx index 217249e328..27a2fc994d 100644 --- 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 index 294e8dec02..314b7c82fb 100644 --- a/src/app/components/Dropdown.tsx +++ b/src/app/components/Dropdown.tsx @@ -245,7 +245,12 @@ const DropdownItemContent = ({ 'data-analytics-label': dataAnalyticsLabel, 'data-analytics-region': dataAnalyticsRegion, }); - return + const focusMe = React.useCallback( + ({target: me}) => me.focus(), + [] + ); + +return {(msg) => href ? {prefix}{msg} // Safari support tab-navigation of buttons; this operates with space or Enter @@ -260,6 +266,7 @@ const DropdownItemContent = ({ 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 index d5b3f2312f..82f30f67f8 100644 --- 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`] = `