Bug/1386 & Bug/1772

[vanessatran-ddi]

Notice for Bug/1386:
Design Website System

We want to set Get Started Menu Item active, whenever we visit any sub children links such as vscode or setup
At first I tried to modify the logic of setCurrentLink() function, especially this logic:

const href = (el as HTMLLinkElement).href;
const url = `${window.location.pathname}${window.location.search}${window.location.hash}`;
return href.endsWith(url);

We always will have an edge case, for example:

<goa-app-header heading="Design Systems" maxcontentwidth="1500px" [fullmenubreakpoint]="1700">
      <a href="#" (click)="navigateLink($event)">
        My Profile
      </a>
      <a routerLink="/accordion"> Accordion </a>
      <a href="/get-started">Get started</a>
      <a href="/patterns">Patterns and templates</a>
      <a href="/components">Components</a>
      <a href="/design-tokens">Styles</a>
      <a href="/content/capitalization">Content</a>
      <a href="/support">Support</a>
      <a href="https://github.com/GovAlta/ui-components/issues/new/choose" target="_blank">
        Report a bug
      </a>
      <a href="#">Support</a>
      <goa-app-header-menu heading="Tickets" leadingIcon="ticket">
        <a href="#">Cases</a>
        <a href="#">Payments</a>
        <a href="#">Outstanding</a>
      </goa-app-header-menu>
      <a href="#" className="interactive">Sign in</a>
    </goa-app-header>

If the website I set up has a base URL: http://localhost:4200/ui-components/ , and if I navigate to a URL such as "http://localhost:4200/ui-components/#/button-group" it will end up active at My Profile which is not correct. What I try to sum up is it really depends on developers who want the menu to be active in what occasion. For example the first link My Profile doesn't really care about href, it is based on the action navigateLink

So I came up with an idea, adding aria-current which is a valid HTML attribute for a:
https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-current

The testing code below will showcase how we can use aria-current to control whatever menu item we want to be active. If aria-current isn't set, we will fall back to a default using a link as a detection like the current logic.

export default function Root() {
  const location = useLocation();
  const [visible, setVisibility] = useState<boolean>(false);

  const isCurrentPage = (path: string) => {
    return location.pathname.startsWith(path);
  };

  return (
    <div className="app" style={{ opacity: visible ? "1" : "0" }}>
      <ScrollToTop />
      <GoAOneColumnLayout>
        <section className="header" slot="header">
          <GoAMicrositeHeader
            type={"alpha"}
            feedbackUrl="https://forms.microsoft.com/r/8Zp7zSJS6W"
            maxContentWidth={MAX_CONTENT_WIDTH}
          />
          <GoAAppHeader heading="Design system" maxContentWidth={MAX_CONTENT_WIDTH} url={"/"} fullMenuBreakpoint={1140}>
            <Link to="/get-started" aria-current={isCurrentPage("/get-started") ? "page" : undefined}>Get started</Link>
            <Link to="/patterns">Patterns</Link>
            <Link to="/components">Components</Link>
            <Link to="/design-tokens">Styles</Link>
            <Link to="/content/capitalization">Content</Link>
            <Link to="/support">Support</Link>
            <Link to="https://github.com/GovAlta/ui-components/issues/new/choose" target="_blank">
              Report a bug
            </Link>
          </GoAAppHeader>
        </section>

        <Outlet />

        <section slot="footer">
          <GoAAppFooter maxContentWidth={MAX_CONTENT_WIDTH}>
            <GoAAppFooterNavSection heading="Resources" maxColumnCount={2}>
              <Link to="/get-started">Get started</Link>
              <Link to="/patterns">Patterns</Link>
              <Link to="/components">Components</Link>
              <Link to="/design-tokens">Styles</Link>
              {/*Removed until content pages added <Link to="/content">Content</Link> */}
            </GoAAppFooterNavSection>
          </GoAAppFooter>
        </section>
      </GoAOneColumnLayout>
    </div>
  );
}

[vanessatran-ddi]

I merged this to another pull request #1843