Removed tabindex parameter from addItem in favor of autoincrementing …

…tabindex. Fixed documentation bug. Moved handler bindings to constructor.
FelixSchwarzmeier · Nov 14, 2016 · 7017766 · 7017766
1 parent 3310111
commit 7017766
Show file tree

Hide file tree

Showing 3 changed files with 29 additions and 17 deletions.
diff --git a/ghdocs/components/Breadcrumb.md b/ghdocs/components/Breadcrumb.md
@@ -99,3 +99,9 @@ ContextualMenu
 
 ## Accessibility
 The component's JavaScript will apply the correct `tabindex` values to ensure keyboard accessibility.
+
+
+<script type="text/javascript">
+    var BreadcrumbHTML = document.querySelector('.ms-Breadcrumb');
+    var Breadcrumb = new fabric['Breadcrumb'](BreadcrumbHTML);
+</script>
diff --git a/src/components/Breadcrumb/Breadcrumb.ts b/src/components/Breadcrumb/Breadcrumb.ts
@@ -28,7 +28,7 @@ namespace fabric {
 
     private _currentMaxItems: number = 0;
     private _itemCollection: Array<any> = [];
-
+    private _tabIndex: number;
     /**
      *
      * @param {HTMLElement} container - the target container for an instance of Breadcrumb
@@ -38,7 +38,13 @@ namespace fabric {
      * in the DOM.
     */
     constructor(container: HTMLElement) {
+      this._tabIndex = 2;
       this.container = container;
+      this._onResize = this._onResize.bind(this);
+      this._openOverflow = this._openOverflow.bind(this);
+      this._overflowKeyPress = this._overflowKeyPress.bind(this);
+      this._closeOverflow = this._closeOverflow.bind(this);
+      this.removeOutlinesOnClick = this.removeOutlinesOnClick.bind(this);
       this.init();
     }
 
@@ -53,10 +59,9 @@ namespace fabric {
      * Adds a breadcrumb item to a breadcrumb
      * @param itemLabel {String} the item's text label
      * @param itemLink {String} the item's href link
-     * @param tabIndex {number} the item's tabIndex
     */
-    public addItem(itemLabel: string, itemLink: string, tabIndex: number): void {
-      this._itemCollection.push({text: itemLabel, link: itemLink, tabIndex: tabIndex});
+    public addItem(itemLabel: string, itemLink: string): void {
+      this._itemCollection.push({ text: itemLabel, link: itemLink });
       this._updateBreadcrumbs();
     }
 
@@ -140,15 +145,16 @@ namespace fabric {
      * updates the breadcrumbs and overflow menu
     */
     private _updateBreadcrumbs() {
+      this._tabIndex = 2;
       const maxItems: number = window.innerWidth > Breadcrumb.MEDIUM ? 4 : 2;
       if (this._itemCollection.length > maxItems) {
         this._breadcrumb.classList.add("is-overflow");
       } else {
         this._breadcrumb.classList.remove("is-overflow");
       }
 
-      this._addBreadcrumbItems(maxItems);
       this._addItemsToOverflow(maxItems);
+      this._addBreadcrumbItems(maxItems);
     };
 
     /**
@@ -162,14 +168,12 @@ namespace fabric {
       overflowItems.forEach( (item) => {
         const li: HTMLLIElement = document.createElement("li");
         li.className = "ms-ContextualMenu-item";
-        if (!isNaN(item.tabIndex)) {
-          li.setAttribute("tabindex", item.tabIndex);
-        }
         const a: HTMLAnchorElement = document.createElement("a");
         a.className = "ms-ContextualMenu-link";
-        if (item.link !== undefined) {
+        if (item.link !== null) {
           a.setAttribute("href", item.link);
         }
+        a.setAttribute("tabindex", (this._tabIndex++).toString());
         a.textContent = item.text;
         li.appendChild(a);
         this._contextMenu.appendChild(li);
@@ -192,12 +196,10 @@ namespace fabric {
           const chevron: HTMLPhraseElement = document.createElement("i");
           listItem.className = "ms-Breadcrumb-listItem";
           a.className = "ms-Breadcrumb-itemLink";
-          if (item.link !== undefined) {
+          if (item.link !== null) {
               a.setAttribute("href", item.link);
           }
-          if (!isNaN(item.tabIndex)) {
-            a.setAttribute("tabindex", item.tabIndex);
-          }
+          a.setAttribute("tabindex", (this._tabIndex++).toString());
           a.textContent = item.text;
           chevron.className = "ms-Breadcrumb-chevron ms-Icon ms-Icon--ChevronRight";
           listItem.appendChild(a);
@@ -259,10 +261,10 @@ namespace fabric {
     * sets handlers for resize and button click events
     */
     private _setListeners(): void {
-      window.addEventListener("resize", this._onResize.bind(this));
-      this._overflowButton.addEventListener("click", this._openOverflow.bind(this), false);
-      this._overflowButton.addEventListener("keypress", this._overflowKeyPress.bind(this), false);
-      document.addEventListener("click", this._closeOverflow.bind(this), false);
+      window.addEventListener("resize", this._onResize, false);
+      this._overflowButton.addEventListener("click", this._openOverflow, false);
+      this._overflowButton.addEventListener("keypress", this._overflowKeyPress, false);
+      document.addEventListener("click", this._closeOverflow, false);
       this._breadcrumbList.addEventListener("click", this.removeOutlinesOnClick, false);
     }
   }

diff --git a/src/documentation/pages/Breadcrumb/Breadcrumb.md b/src/documentation/pages/Breadcrumb/Breadcrumb.md
@@ -56,3 +56,7 @@ ContextualMenu
 
 ## Accessibility
 The component's JavaScript will apply the correct `tabindex` values to ensure keyboard accessibility.
+
+<!---
+{{> BreadcrumbExampleJS }}
+--->