fix(components-LandingNav): add navigation Enter keydown handler (#838

)

components/Icons/Hamburger.tsx

@@ -1,5 +1,6 @@
 import type { MotionProps } from '@components/utils';
 import { motion } from '@components/utils';
+import type { KeyboardEvent } from 'react';
 import { useCallback, useState } from 'react';
 import IconFactory from './IconFactory';
 
@@ -24,6 +25,11 @@ const Svg = (): JSX.Element => {
     () => setIsChecked(isChecked => !isChecked),
     []
   );
+  const handleKeyDown = useCallback((event: KeyboardEvent<SVGSVGElement>) => {
+    if (event.key === 'Enter') {
+      setIsChecked(isChecked => !isChecked);
+    }
+  }, []);
 
   return (
     <motion.svg
@@ -32,9 +38,11 @@ const Svg = (): JSX.Element => {
       width="2em"
       height="2em"
       fill="currentColor"
+      tabIndex={0}
       initial={false}
       animate={isChecked ? 'checked' : 'unchecked'}
       onClick={handleClick}
+      onKeyDown={handleKeyDown}
       data-testid="hamburger-icon"
     >
       <motion.path

components/Icons/IconFactory.tsx

@@ -1,8 +1,9 @@
 import Icon from '@ant-design/icons';
-import type { SVGProps } from 'react';
+import type { KeyboardEvent, SVGProps } from 'react';
 
 interface Props {
   onClick?: () => void;
+  onKeyDown?: (event: KeyboardEvent<HTMLSpanElement>) => void;
   className?: string;
 }
 
@@ -14,6 +15,7 @@ const IconFactory = (
 ): IconType => {
   const IconComponent = ({
     onClick,
+    onKeyDown,
     className,
     ...props
   }: Props): JSX.Element => (
@@ -22,6 +24,7 @@ const IconFactory = (
       component={svg}
       aria-label={ariaLabel}
       onClick={onClick}
+      onKeyDown={onKeyDown}
       className={className}
     />
   );

components/Icons/__snapshots__/Icons.test.tsx.snap

@@ -38,6 +38,7 @@ exports[`Icons should render 1 icon correctly (snapshot) 1`] = `
       data-testid="hamburger-icon"
       fill="currentColor"
       height="2em"
+      tabindex="0"
       viewBox="0 0 1024 1024"
       width="2em"
     >

components/LandingNav/LandingNav.test.tsx

@@ -40,7 +40,39 @@ describe('LandingNav', () => {
     navLinks.forEach(navLink => expect(nav).toContainElement(navLink));
   });
 
-  test('should expanded when clicked', () => {
+  test('should expanded when navigation button toggled', () => {
+    render(<LandingNav />);
+    act(() => {
+      jest.advanceTimersByTime(1000);
+    });
+
+    expect(screen.getByRole('navigation')).toHaveStyle(
+      'transform: translateX(-100%) translateZ(0);'
+    );
+    expect(screen.getByRole('banner')).toHaveStyle('opacity: 0');
+
+    fireEvent.click(screen.getByTestId('hamburger-button'));
+    act(() => {
+      jest.advanceTimersByTime(1000);
+    });
+
+    expect(screen.getByRole('navigation')).toHaveStyle(
+      'transform: translateX(0%) translateZ(0);'
+    );
+    expect(screen.getByRole('banner')).toHaveStyle('opacity: 0.8');
+
+    fireEvent.keyDown(screen.getByTestId('hamburger-button'), { key: 'Enter' });
+    act(() => {
+      jest.advanceTimersByTime(1000);
+    });
+
+    expect(screen.getByRole('navigation')).toHaveStyle(
+      'transform: translateX(-100%) translateZ(0);'
+    );
+    expect(screen.getByRole('banner')).toHaveStyle('opacity: 0');
+  });
+
+  test('should expanded when navigation icon toggled', () => {
     render(<LandingNav />);
     act(() => {
       jest.advanceTimersByTime(1000);
@@ -61,7 +93,7 @@ describe('LandingNav', () => {
     );
     expect(screen.getByRole('banner')).toHaveStyle('opacity: 0.8');
 
-    fireEvent.click(screen.getByTestId('hamburger-button'));
+    fireEvent.keyDown(screen.getByTestId('hamburger-icon'), { key: 'Enter' });
     act(() => {
       jest.advanceTimersByTime(1000);
     });

components/LandingNav/LandingNav.tsx

@@ -3,6 +3,7 @@ import { Switch } from '@components/Motion';
 import type { MotionProps } from '@components/utils';
 import { routes as defaultRoutes } from '@config';
 import type { Route } from '@types';
+import type { KeyboardEvent } from 'react';
 import { useCallback, useState } from 'react';
 import styles from './LandingNav.module.css';
 import LandingNavLink from './LandingNavLink';
@@ -43,14 +44,21 @@ const bannerTransition: MotionProps['transition'] = {
 const LandingNav = ({ routes = defaultRoutes }: Props): JSX.Element => {
   const [expanded, setExpanded] = useState(false);
 
-  const handleToggle = useCallback(() => {
+  const handleClick = useCallback(() => {
     setExpanded(expanded => !expanded);
   }, []);
 
+  const handleKeyDown = useCallback((event: KeyboardEvent<HTMLSpanElement>) => {
+    if (event.key === 'Enter') {
+      setExpanded(expanded => !expanded);
+    }
+  }, []);
+
   return (
     <>
       <Hamburger
-        onClick={handleToggle}
+        onClick={handleClick}
+        onKeyDown={handleKeyDown}
         className={styles.icon}
         data-testid="hamburger-button"
       />

components/LandingNav/__snapshots__/LandingNav.test.tsx.snap

@@ -13,6 +13,7 @@ exports[`LandingNav should render routes correctly (snapshot) 1`] = `
       data-testid="hamburger-icon"
       fill="currentColor"
       height="2em"
+      tabindex="0"
       viewBox="0 0 1024 1024"
       width="2em"
     >