Merge pull request #3320 from tespin/refactor/menubar-a11y-keyboard-mouse

[Menubar] Adds keyboard behaviors to the menubar, improves accessibility

Author: raclim

client/common/ButtonOrLink.jsx

@@ -5,23 +5,60 @@ import PropTypes from 'prop-types';
 /**
  * Helper for switching between <button>, <a>, and <Link>
  */
-const ButtonOrLink = ({ href, children, ...props }) => {
-  if (href) {
-    if (href.startsWith('http')) {
+
+const ButtonOrLink = React.forwardRef(
+  ({ href, children, isDisabled, onClick, ...props }, ref) => {
+    const handleClick = (e) => {
+      if (isDisabled) {
+        e.preventDefault();
+        e.stopPropagation();
+        return;
+      }
+      if (onClick) {
+        onClick(e);
+      }
+    };
+
+    if (href) {
+      if (href.startsWith('http')) {
+        return (
+          <a
+            ref={ref}
+            href={href}
+            target="_blank"
+            rel="noopener noreferrer"
+            aria-disabled={isDisabled}
+            {...props}
+            onClick={handleClick}
+          >
+            {children}
+          </a>
+        );
+      }
       return (
-        <a href={href} target="_blank" rel="noopener noreferrer" {...props}>
+        <Link
+          ref={ref}
+          to={href}
+          aria-disabled={isDisabled}
+          {...props}
+          onClick={handleClick}
+        >
           {children}
-        </a>
+        </Link>
       );
     }
     return (
-      <Link to={href} {...props}>
+      <button
+        ref={ref}
+        aria-disabled={isDisabled}
+        {...props}
+        onClick={handleClick}
+      >
         {children}
-      </Link>
+      </button>
     );
   }
-  return <button {...props}>{children}</button>;
-};
+);
 
 /**
  * Accepts all the props of an HTML <a> or <button> tag.
@@ -34,15 +71,19 @@ ButtonOrLink.propTypes = {
    * External links should start with 'http' or 'https' and will open in a new window.
    */
   href: PropTypes.string,
+  isDisabled: PropTypes.bool,
   /**
    * Content of the button/link.
    * Can be either a string or a complex element.
    */
-  children: PropTypes.node.isRequired
+  children: PropTypes.node.isRequired,
+  onClick: PropTypes.func
 };
 
 ButtonOrLink.defaultProps = {
-  href: null
+  href: null,
+  isDisabled: false,
+  onClick: null
 };
 
 export default ButtonOrLink;

client/common/ButtonOrLink.test.jsx

@@ -13,7 +13,7 @@ describe('ButtonOrLink', () => {
     render(<ButtonOrLink onClick={clickHandler}>Text</ButtonOrLink>);
     const button = screen.getByRole('button');
     expect(button).toBeInstanceOf(HTMLButtonElement);
-    expect(button).toContainHTML('<button>Text</button>');
+    expect(button).toContainHTML('<button aria-disabled="false">Text</button>');
     fireEvent.click(button);
     expect(clickHandler).toHaveBeenCalled();
   });

client/common/usePrevious.js

@@ -0,0 +1,11 @@
+import { useEffect, useRef } from 'react';
+
+export default function usePrevious(value) {
+  const ref = useRef();
+
+  useEffect(() => {
+    ref.current = value;
+  }, [value]);
+
+  return ref.current;
+}