Reimplement the Sidenav as a `<nav>` element

[GomezIvann]

Refactor Sidenav's current implementation as a <nav> element with <ul> and <li> inside for Groups and Links. This will provide users with a more semantic HTML code.

Other design systems examples:

• https://primer.style/css/components/side-nav
• https://spectrum.adobe.com/page/side-navigation/
• https://www.delldesignsystem.com/components/side-navigation/?tab=Code
• https://baseweb.design/components/side-nav/
• https://carbondesignsystem.com/components/UI-shell-header/usage

[github-actions[bot]]

This issue is stale because it has been open for 15 days with no activity. If there are no further updates or modifications within the next 15 days, it will be automatically closed.

[Mil4n0r]

We should discuss what the wanted behavior is.

From what I have seen, the optimal structure, used by other design systems and recommended by W3C is the following:

<nav>
  <ul>
    <li>
    ...
  </ul>
  ...
</nav>

However, our scenario is a bit more complex, as we have some more grouping options, for example the following structure is considered a correct usage:

<DxcSideNav>
  <DxcSideNav.Link>
  </DxcSideNav.Link>
</DxcSideNav>

So we cannot set the Link to be a <li> because it cannot be a direct child of a <nav> component.

Also there is the problem of the DxcSideNav.Section, which can be the parent of a Link or any other HTML tag (such as a <p> or some <div> with a search bar), so it cannot be considered a <ul>. In theory though, the DxcSideNav.Group could be put as a <ul> as it is supposed to always be the parent of a <Link>.

So this leaves me with doubts about the Section and Link compound components in terms of what HTML should be used for them to cover all the current scenarios while meeting WCAG...