Revert "Merge pull request #165 from VilledeMontreal/feature/issue#164"

This reverts commit ff321f9, reversing
changes made to a591fc3.

Author: MaudeLaflamme

projects/angular-ui/src/lib/breadcrumb/breadcrumb.component.html

@@ -1,5 +1,8 @@
-<nav class="bao-breadcrumb-nav" aria-label="Breadcrumb">
-  <ol #container (cdkObserveContent)="onContentChange()">
-    <ng-content></ng-content>
-  </ol>
+<nav
+  #container
+  class="bao-breadcrumb-nav"
+  aria-label="Breadcrumb"
+  (cdkObserveContent)="onContentChange()"
+>
+  <ng-content></ng-content>
 </nav>

projects/angular-ui/src/lib/breadcrumb/breadcrumb.component.scss

@@ -9,44 +9,36 @@ $margin-between-lines: 0.5rem;
   display: inline-flex;
   flex-direction: row;
   flex-wrap: wrap;
-  > ol {
-    list-style: none;
-    padding-left: 0;
-    margin-bottom: 0;
-    > li {
-      line-height: 1rem;
-      display: inline-flex;
-      margin-bottom: 0;
-      margin-right: $margin-between-links;
-      &:last-child {
-        margin-right: 0;
-        &:after {
-          content: none;
-        }
-      }
+  > a {
+    @include typo-interface-xsmall-bold;
+    display: inline-flex;
+    align-items: end;
+    text-decoration: none;
+    text-transform: uppercase;
+    color: $neutral-secondary;
+    margin-bottom: $margin-between-lines;
+    margin-right: $margin-between-links;
+    border-bottom: none;
+    background-color: $transparent;
+    &:hover {
+      color: $action;
+    }
+    &:last-child {
+      margin-right: 0;
       &:after {
-        display: inline-block;
-        content: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ADB5BD' fill-rule='evenodd'><path d='M12.586 12L9.293 8.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414-1.414L12.586 12z'/></svg>");
-        height: $size-xx-small;
-        width: $size-xx-small;
-        margin-left: $margin-between-links;
-        color: $neutral-secondary;
-        background-color: $transparent;
-        cursor: default;
-        flex-shrink: 0;
-      }
-      > a {
-        @include typo-interface-xsmall-bold;
-        align-items: end;
-        text-decoration: none;
-        text-transform: uppercase;
-        color: $neutral-secondary;
-        border-bottom: none;
-        background-color: $transparent;
-        &:hover {
-          color: $action;
-        }
+        content: none;
       }
     }
+    &:after {
+      display: inline-block;
+      content: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ADB5BD' fill-rule='evenodd'><path d='M12.586 12L9.293 8.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414-1.414L12.586 12z'/></svg>");
+      height: $size-xx-small;
+      width: $size-xx-small;
+      margin-left: $margin-between-links;
+      color: $neutral-secondary;
+      background-color: $transparent;
+      cursor: default;
+      flex-shrink: 0;
+    }
   }
 }

projects/angular-ui/src/lib/breadcrumb/breadcrumb.component.spec.ts

@@ -32,22 +32,15 @@ describe('BaoBreadcrumbComponent', () => {
       );
     });
 
-    it('should contains the exact html tag and attributes', () => {
-      const nav = breadcrumbDebugElement.nativeElement.querySelector('nav');
-      expect(nav).toBeTruthy();
-
-      const orderLists =
-        breadcrumbDebugElement.children[0].nativeElement.querySelector('ol');
-      expect(orderLists).toBeTruthy();
-
-      const lists = breadcrumbDebugElement.children[0].children[0].children;
-      lists.forEach((el: DebugElement) => {
-        expect(el.name).toBe('LI');
-        expect(el.nativeElement.querySelector('a')).toBeTruthy();
+    it('should apply appropriate attribute on navigation elements', () => {
+      const navElements = Array.from(
+        breadcrumbDebugElement.childNodes[0].nativeNode.childNodes
+      );
+      const lastElement = navElements.pop() as Element;
+      navElements.forEach((el: Element) => {
+        expect(el.ariaCurrent).toBe(null);
       });
-
-      const lastLink = lists.slice(-1).pop();
-      expect(lastLink.children[0].nativeElement.ariaCurrent).toBe('page');
+      expect(lastElement.ariaCurrent).toBe('page');
     });
   });
 });

projects/angular-ui/src/lib/breadcrumb/breadcrumb.component.ts

@@ -26,23 +26,17 @@ const LAST_NODE_ATTRIBUTE = { 'aria-current': 'page' };
 export class BaoBreadcrumbComponent implements AfterViewInit {
   @ViewChild('container', { static: false })
   private staticContainer: ElementRef;
+
   constructor(private renderer: Renderer2) {}
+
   public ngAfterViewInit() {
-    this.createLiElement();
-  }
-  public onContentChange() {
     this.setLastLinkAttribute();
   }
 
-  private createLiElement() {
-    const children = Array.from(this.staticContainer.nativeElement.children);
+  public onContentChange() {
     this.setLastLinkAttribute();
-    children.forEach(c => {
-      const liElement = this.renderer.createElement('li');
-      this.renderer.appendChild(liElement, c);
-      this.renderer.appendChild(this.staticContainer.nativeElement, liElement);
-    });
   }
+
   private setLastLinkAttribute() {
     const children = Array.from(this.staticContainer.nativeElement.children);
     this.renderer.setAttribute(