Uds 1793: Fix onclick in header navtree

[davidornelas11]

Description

fixed navtree with onclick not getting called

1. Add these props to a story navTree: [ { text: "Home", selected: false, onClick: () => { console.log("Home clicked"); } }, { text: "Test 1", selected: false, onClick: () => { console.log("Test 1 clicked"); } }, { text: "Fun", selected: false, onClick: () => { console.log("Test 2 clicked"); } } ], title: "Ira A. Fulton Schools of Engineering", parentOrg: "School of Computing, Informatics, and Decisions Systems Engineering", parentOrgUrl: "https://engineering.asu.edu", loggedIn: false,
2. Check to make sure the oncall is called and that it is keyboard navigable

Links

• JIRA ticket

FOR APPROVERS

• Percy build approval

[mlsamuelson]

I tested with sublinks and they're not clickable by keyboard or mouse. The tabindex="0" isn't applying to the sublinks also, so they aren't focusable.

Per @scott-williams-az , it appears sublinks never supported onClick behaviors.

code I used for navTree to illustrate this:

const myNavTree = [
  {
    text: "Home",
    selected: false,
    onClick: () => {
      console.log("Home clicked");
    },
  },
  {
    text: "Test 1",
    selected: false,
    onClick: () => {
      console.log("Test 1 clicked");
    },
  },
  {
    text: "Fun",
    selected: false,
    onClick: () => {
      console.log("Test 2 clicked");
    },
  },
  {
    text: "Link option 1",
    href: "#",
    items: [
      [
        {
          text: "Sublink 1",
          selected: false,
          onClick: () => {
            console.log("Sublink 1 clicked");
          },
        },
        {
          href: "https://www.asu.edu/",
          text: "Sublink 2",
        },
      ],
    ],
  },
];

[davidornelas11]

I tested with sublinks and they're not clickable by keyboard or mouse. The tabindex="0" isn't applying to the sublinks also, so they aren't focusable.

Per @scott-williams-az , it appears sublinks never supported onClick behaviors.

code I used for navTree to illustrate this:

const myNavTree = [
  {
    text: "Home",
    selected: false,
    onClick: () => {
      console.log("Home clicked");
    },
  },
  {
    text: "Test 1",
    selected: false,
    onClick: () => {
      console.log("Test 1 clicked");
    },
  },
  {
    text: "Fun",
    selected: false,
    onClick: () => {
      console.log("Test 2 clicked");
    },
  },
  {
    text: "Link option 1",
    href: "#",
    items: [
      [
        {
          text: "Sublink 1",
          selected: false,
          onClick: () => {
            console.log("Sublink 1 clicked");
          },
        },
        {
          href: "https://www.asu.edu/",
          text: "Sublink 2",
        },
      ],
    ],
  },
];

I cleaned up the dropdown component a bit and added the onClick event

[mlsamuelson]

[mlsamuelson]

Circular dependency: DropdownItem/index.js imports from NavItem/index.js and that in turn imports from DropdownItem/index.js.

The DropdownItem component file is just pulling in the LINK_DEFAULT_PROPS, and we're getting other eslint errors about the props, so perhaps the DropdownItem component file just needs to do its own thing for the link props?

[mlsamuelson]

Issues resolved! Thanks, @davidornelas11