fix(component-header): change onFocus to onClick for type definitions

ASU · Oct 2, 2024 · 9634a97 · 9634a97
1 parent faf982a
commit 9634a97
Show file tree

Hide file tree

Showing 8 changed files with 12 additions and 10 deletions.
diff --git a/packages/component-header/src/components/Button/index.js b/packages/component-header/src/components/Button/index.js
@@ -13,14 +13,13 @@ import { ButtonWrapper } from "./index.styles";
  * @returns {JSX.Element}
  */
 
-const Button = ({ href, color, text, classes, onClick, onFocus }) => {
+const Button = ({ href, color, text, classes, onClick }) => {
   return (
     <ButtonWrapper
       href={href}
       {...(!href ? { tabIndex: 0 } : {})}
       className={`button-${color} ${classes ?? ""}`}
       onClick={onClick}
-      onFocus={onFocus}
     >
       {text}
     </ButtonWrapper>

diff --git a/packages/component-header/src/components/HeaderMain/NavbarContainer/DropdownItem/index.js b/packages/component-header/src/components/HeaderMain/NavbarContainer/DropdownItem/index.js
@@ -53,7 +53,7 @@ const LinkItem = ({ link, dropdownName, handleLinkEvent }) => (
       href={link.href}
       onClick={e => handleLinkEvent(e, link)}
       onKeyDown={e => handleLinkEvent(e, link)}
-      onFocus={() => trackGAEvent({ text: link.text, component: dropdownName })}
+      onClick={() => trackGAEvent({ text: link.text, component: dropdownName })}
     >
       {link.text}
     </a>

diff --git a/packages/component-header/src/components/HeaderMain/NavbarContainer/NavItem/index.js b/packages/component-header/src/components/HeaderMain/NavbarContainer/NavItem/index.js
@@ -118,7 +118,10 @@ const NavItem = ({ link, setItemOpened, itemOpened }) => {
   };
 
   const handleKeyDown = e => {
-    if (!link.items && link.href) return;
+    if (!link.items && link.href) {
+      trackGAEvent({ ...LINK_DEFAULT_PROPS, text: link.text });
+      return;
+    };
     const { key } = e;
     const navigableKeys = [
       "ArrowUp",

diff --git a/packages/component-header/src/components/HeaderMain/Partner/index.js b/packages/component-header/src/components/HeaderMain/Partner/index.js
@@ -44,7 +44,7 @@ const Partner = () => {
       </a>
       <a
         href={asuLogo?.brandLink ?? "https://asu.edu"}
-        onFocus={() => trackGAEvent({ text: "asu logo" })}
+        onClick={() => trackGAEvent({ text: "asu logo" })}
       >
         <img
           className="vert"

diff --git a/packages/component-header/src/components/HeaderMain/Title/index.js b/packages/component-header/src/components/HeaderMain/Title/index.js
@@ -55,7 +55,7 @@ const Title = () => {
         <a
           className={`subunit-name ${active ? "active" : ""}`}
           href={baseUrl}
-          onFocus={() =>
+          onClick={() =>
             trackGAEvent({
               event: "link",
               action: "click",
@@ -83,7 +83,7 @@ const Title = () => {
       <a
         className={`title-subunit-name ${active ? "active" : ""}`}
         href={baseUrl}
-        onFocus={() => trackGAEvent({ text: title })}
+        onClick={() => trackGAEvent({ text: title })}
         title={`${title} home page`}
       >
         {title}

diff --git a/packages/component-header/src/core/models/app-prop-types.js b/packages/component-header/src/core/models/app-prop-types.js
@@ -29,7 +29,7 @@ const ButtonPropTypes = {
   href: PropTypes.string.isRequired,
   classes: PropTypes.string,
   onClick: PropTypes.func,
-  onFocus: PropTypes.func,
+  onClick: PropTypes.func,
 };
 
 const NavTreePropTypes = PropTypes.shape({

diff --git a/packages/component-header/src/core/models/types.js b/packages/component-header/src/core/models/types.js
@@ -18,7 +18,7 @@
  * @property {string} text
  * @property {string} [classes]
  * @property {function} [onClick]
- * @property {function} [onFocus]
+ * @property {function} [onClick]
  */
 
 /**

diff --git a/packages/component-header/types/main.d.ts b/packages/component-header/types/main.d.ts
@@ -14,7 +14,7 @@ export interface Button {
   text: string;
   classes?: string;
   onClick?: () => void;
-  onFocus?: () => void;
+  onClick?: () => void;
 }
 
 export interface NavTreeProps {