Merge pull request #188 from OfficeDev/wdo3650/Fixes-for-#63-and-#187

Fixes for #63, #187 and tab index changes
OfficeDev · Nov 14, 2016 · ea42db6 · ea42db6
2 parents 18f2e63 + 7017766
commit ea42db6
Show file tree

Hide file tree

Showing 4 changed files with 36 additions and 24 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/ghdocs/components/Dialog.md b/ghdocs/components/Dialog.md
@@ -130,17 +130,17 @@ This component has only the default state.
 </pre>
 
 
-or add the following `<script>` tag to your page, below the references to Fabric's JS, to instantiate a single Dialog component on the page:
+    or add the following `<script>` tag to your page, below the references to Fabric's JS, to instantiate a single Dialog component on the page:
 
 
-<pre>
-    <code>
-&lt;script type&#x3D;&quot;text/javascript&quot;&gt;
+    <pre>
+        <code>
+     &lt;script type&#x3D;&quot;text/javascript&quot;&gt;
     var DialogElement &#x3D; document.querySelector(&quot;.ms-Dialog&quot;);
     var dialogComponent &#x3D; new fabric[&#x27;Dialog&#x27;](DialogElement);
 &lt;/script&gt;
-    </code>
-</pre>
+        </code>
+    </pre>
 
 4. Verify that the component is working the same as in the sample above.
 5. Replace the sample HTML content (such as the content of `.ms-Dialog-content`) with your content.
@@ -149,4 +149,4 @@ or add the following `<script>` tag to your page, below the references to Fabric
 This component has no dependencies on other components.
 
 ## Accessibility
-More details will be added here.
+More details will be added here.
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();
     }
 
@@ -75,9 +80,9 @@ namespace fabric {
     };
 
     /**
-     * removes a breadcrumb item by position in the breadcrumbs list
+     * removes a breadcrumb item by position in the breadcrumb's list
      * index starts at 0
-     * @param value {String} the item's index
+     * @param value {number} the item's index
     */
     public removeItemByPosition(value: number): void {
       this._itemCollection.splice(value, 1);
@@ -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 !== null) {
           a.setAttribute("href", item.link);
         }
+        a.setAttribute("tabindex", (this._tabIndex++).toString());
         a.textContent = item.text;
         li.appendChild(a);
         this._contextMenu.appendChild(li);
@@ -195,9 +199,7 @@ namespace fabric {
           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 }}
+--->