refactor Navbar children to render as a semantic list

Author: mkernohanbc

packages/react-components/src/components/Navbar/Navbar.css

@@ -14,19 +14,37 @@
 .bcds-react-aria-Navbar--Container {
   box-sizing: border-box;
   display: flex;
+  flex-direction: row;
   flex-grow: 1;
+  max-width: 1100px;
+}
+
+.bcds-react-aria-Navbar--List {
+  display: flex;
   flex-wrap: wrap;
   white-space: normal;
   align-items: center;
-  max-width: 1100px;
+  list-style: none;
+  margin: unset;
+  padding: unset;
+}
+
+.bcds-react-aria-Navbar--Separator {
+  display: flex;
+  align-self: stretch;
+}
+
+.bcds-react-aria-Navbar--Separator
+  > .bcds-react-aria-Separator[aria-orientation="vertical"] {
+  height: 100%;
 }
 
 /* Sizing */
-.bcds-react-aria-Navbar--Container.small {
+.bcds-react-aria-Navbar--Container.small > .bcds-react-aria-Navbar--List {
   padding: var(--layout-padding-xsmall) var(--layout-padding-none);
   gap: var(--layout-margin-xsmall);
 }
-.bcds-react-aria-Navbar--Container.medium {
+.bcds-react-aria-Navbar--Container.medium > .bcds-react-aria-Navbar--List {
   padding: var(--layout-padding-small) var(--layout-padding-none);
   gap: var(--layout-margin-small);
 }

packages/react-components/src/components/Navbar/Navbar.test.tsx

@@ -22,7 +22,7 @@ describe("Navbar", () => {
   const navbar = screen.getByTestId("navbar");
   const button = screen.getByRole("button", { name: /button/i });
   const link = screen.getByRole("link", { name: /link/i });
-  const separators = screen.getAllByRole("separator");
+  const separators = screen.getAllByRole("separator", { hidden: true });
   const customChild = screen.getByTestId("custom-child");
 
   it("renders the navigation container", () => {

packages/react-components/src/components/Navbar/Navbar.tsx

@@ -51,14 +51,19 @@ export default function Navbar({
     /* Add separator between each child item */
     const childrenArray = React.Children.toArray(children);
     childrenToRender = childrenArray.flatMap((child, index) => [
-      injectSizeToKnownChild(child, size),
+      <li className="bcds-react-aria-Navbar--Item" key={`item-${index}`}>
+        {injectSizeToKnownChild(child, size)}
+      </li>,
       ...(index < childrenArray.length - 1
         ? [
-            <Separator
-              orientation="vertical"
-              size="small"
+            <li
+              className="bcds-react-aria-Navbar--Separator"
               key={`sep-${index}`}
-            />,
+              role="presentation"
+              aria-hidden="true"
+            >
+              <Separator orientation="vertical" size="small" />
+            </li>,
           ]
         : []),
     ]);
@@ -67,7 +72,7 @@ export default function Navbar({
   return (
     <div className="bcds-react-aria-Navbar">
       <nav className={`bcds-react-aria-Navbar--Container ${size}`} {...props}>
-        {childrenToRender}
+        <ul className="bcds-react-aria-Navbar--List">{childrenToRender}</ul>
       </nav>
     </div>
   );