Merge pull request #160 from fedspendingtransparency/mod/9573-add-tab…

…Index-to-card-links 9573 - added tabIndex to links in CardButton.jsx
fedspendingtransparency · Mar 20, 2023 · 4fae859 · 4fae859
2 parents 631afbf + 850e8a5
commit 4fae859
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 3 deletions.
diff --git a/components/cards/CardBody.jsx b/components/cards/CardBody.jsx
@@ -30,7 +30,9 @@ const propTypes = {
 const CardBody = ({
     overline, headline, onClick, subhead, text, variant = '', children, imageContainerHeight, customClassName = ""
 }) => (
-    <div className={`card__body ${variant} ${customClassName}`} style={{ height: imageContainerHeight ? `calc(100% - ${imageContainerHeight} - 12px)` : '' }}>
+    <div
+        className={`card__body ${variant} ${customClassName}`}
+        style={{ height: imageContainerHeight ? `calc(100% - ${imageContainerHeight} - 12px)` : '' }}>
         {overline && <div className="overline">{overline}</div>}
         {/* eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions */}
         {headline && <div><div className="headline" onClick={onClick}>{headline}</div></div>}

diff --git a/components/cards/CardButton.jsx b/components/cards/CardButton.jsx
@@ -33,13 +33,20 @@ const CardButton = ({
         text: "card__button--borderless"
     };
 
+    const handleKeyUp = (e) => {
+        if (e.key === "Enter") {
+            action();
+        }
+    };
+
     if (onlyPerformAction === true) {
         return (
             <div className="card__button">
                 <button
                     className={`card__button--secondary ${variantMapper[variant]} ${customClassName}`}
                     aria-label={`${text}`}
                     disabled={disabled}
+                    onKeyUp={(e) => handleKeyUp(e)}
                     onClick={action}>
                     {text || children}
                 </button>
@@ -52,10 +59,12 @@ const CardButton = ({
                 <div
                     className={`card__button--secondary ${variantMapper[variant]}`}
                     role="button"
+                    tabIndex="0"
                     aria-label={`${text}`}>
                     <a
                         target="_blank"
                         rel="noopener noreferrer"
+                        onKeyUp={(e) => handleKeyUp(e)}
                         onClick={action}
                         href={link}>
                         {text}
@@ -67,9 +76,10 @@ const CardButton = ({
                     <a
                         className={`card__button--secondary ${variantMapper[variant]} ${customClassName}`}
                         role="button"
-                        tabIndex={disabled ? "-1" : ""}
+                        tabIndex={disabled ? "-1" : "0"}
                         aria-label={`${text}`}
                         href={link}
+                        onKeyUp={(e) => handleKeyUp(e)}
                         onClick={action}>
                         {text || children}
                     </a>

diff --git a/components/cards/CardContainer.jsx b/components/cards/CardContainer.jsx
@@ -28,7 +28,12 @@ const CardContainer = ({
     variant = '', size = "md", children, fill, height, className = "", onClick, onKeyUp
 }) => (
     // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
-    <div className={`card-column ${className}`} onClick={onClick} role="presentation" tabIndex="0" onKeyUp={onKeyUp}>
+    <div
+        className={`card-column ${className}`}
+        onClick={onClick}
+        role="presentation"
+        tabIndex="0"
+        onKeyUp={onKeyUp}>
         <div className={`${variant} ${size} card-container`} style={{ backgroundColor: `${fill}`, height: `${height}` }}>
             { children }
         </div>