src/common/js/winjs/js/ui.js
function _LegacyAppBar_updateFirstAndFinalDiv() {
                    var appBarFirstDiv = this._element.querySelectorAll("." + _Constants.firstDivClass);
                    appBarFirstDiv = appBarFirstDiv.length >= 1 ? appBarFirstDiv[0] : null;

                    var appBarFinalDiv = this._element.querySelectorAll("." + _Constants.finalDivClass);
                    appBarFinalDiv = appBarFinalDiv.length >= 1 ? appBarFinalDiv[0] : null;

                    // Remove the firstDiv & finalDiv if they are not at the appropriate locations
                    if (appBarFirstDiv && (this._element.children[0] !== appBarFirstDiv)) {
                        appBarFirstDiv.parentNode.removeChild(appBarFirstDiv);
                        appBarFirstDiv = null;
                    }
                    if (appBarFinalDiv && (this._element.children[this._element.children.length - 1] !== appBarFinalDiv)) {
                        appBarFinalDiv.parentNode.removeChild(appBarFinalDiv);
                        appBarFinalDiv = null;
                    }

                    // Create and add the firstDiv & finalDiv if they don't already exist
                    if (!appBarFirstDiv) {
                        // Add a firstDiv that will be the first child of the appBar.
                        // On focus set focus to the last element of the AppBar.
                        appBarFirstDiv = _Global.document.createElement("div");
                        // display: inline is needed so that the div doesn't take up space and cause the page to scroll on focus
                        appBarFirstDiv.style.display = "inline";
                        appBarFirstDiv.className = _Constants.firstDivClass;
                        appBarFirstDiv.tabIndex = -1;
                        appBarFirstDiv.setAttribute("aria-hidden", "true");
                        _ElementUtilities._addEventListener(appBarFirstDiv, "focusin", this._focusOnLastFocusableElementOrThis.bind(this), false);
                        // add to beginning
                        if (this._element.children[0]) {
                            this._element.insertBefore(appBarFirstDiv, this._element.children[0]);
                        } else {
                            this._element.appendChild(appBarFirstDiv);
                        }
                    }
                    if (!appBarFinalDiv) {
                        // Add a finalDiv that will be the last child of the appBar.
                        // On focus set focus to the first element of the AppBar.
                        appBarFinalDiv = _Global.document.createElement("div");
                        // display: inline is needed so that the div doesn't take up space and cause the page to scroll on focus
                        appBarFinalDiv.style.display = "inline";
                        appBarFinalDiv.className = _Constants.finalDivClass;
                        appBarFinalDiv.tabIndex = -1;
                        appBarFinalDiv.setAttribute("aria-hidden", "true");
                        _ElementUtilities._addEventListener(appBarFinalDiv, "focusin", this._focusOnFirstFocusableElementOrThis.bind(this), false);
                        this._element.appendChild(appBarFinalDiv);
                    }


                    // invokeButton should be the second to last element in the _LegacyAppBar's tab order. Second to the finalDiv.
                    if (this._element.children[this._element.children.length - 2] !== this._invokeButton) {
                        this._element.insertBefore(this._invokeButton, appBarFinalDiv);
                    }
                    var elms = this._element.getElementsByTagName("*");
                    var highestTabIndex = _ElementUtilities._getHighestTabIndexInList(elms);
                    this._invokeButton.tabIndex = highestTabIndex;

                    // Update the tabIndex of the firstDiv & finalDiv
                    if (appBarFirstDiv) {
                        appBarFirstDiv.tabIndex = _ElementUtilities._getLowestTabIndexInList(elms);
                    }
                    if (appBarFinalDiv) {
                        appBarFinalDiv.tabIndex = highestTabIndex;
                    }
                }
function _LegacyAppBar_updateFirstAndFinalDiv() {
                    var appBarFirstDiv = this._element.querySelectorAll("." + _Constants.firstDivClass);
                    appBarFirstDiv = appBarFirstDiv.length >= 1 ? appBarFirstDiv[0] : null;

                    var appBarFinalDiv = this._element.querySelectorAll("." + _Constants.finalDivClass);
                    appBarFinalDiv = appBarFinalDiv.length >= 1 ? appBarFinalDiv[0] : null;

                    // Remove the firstDiv & finalDiv if they are not at the appropriate locations
                    if (appBarFirstDiv && (this._element.children[0] !== appBarFirstDiv)) {
                        appBarFirstDiv.parentNode.removeChild(appBarFirstDiv);
                        appBarFirstDiv = null;
                    }
                    if (appBarFinalDiv && (this._element.children[this._element.children.length - 1] !== appBarFinalDiv)) {
                        appBarFinalDiv.parentNode.removeChild(appBarFinalDiv);
                        appBarFinalDiv = null;
                    }

                    // Create and add the firstDiv & finalDiv if they don't already exist
                    if (!appBarFirstDiv) {
                        // Add a firstDiv that will be the first child of the appBar.
                        // On focus set focus to the last element of the AppBar.
                        appBarFirstDiv = _Global.document.createElement("div");
                        // display: inline is needed so that the div doesn't take up space and cause the page to scroll on focus
                        appBarFirstDiv.style.display = "inline";
                        appBarFirstDiv.className = _Constants.firstDivClass;
                        appBarFirstDiv.tabIndex = -1;
                        appBarFirstDiv.setAttribute("aria-hidden", "true");
                        _ElementUtilities._addEventListener(appBarFirstDiv, "focusin", this._focusOnLastFocusableElementOrThis.bind(this), false);
                        // add to beginning
                        if (this._element.children[0]) {
                            this._element.insertBefore(appBarFirstDiv, this._element.children[0]);
                        } else {
                            this._element.appendChild(appBarFirstDiv);
                        }
                    }
                    if (!appBarFinalDiv) {
                        // Add a finalDiv that will be the last child of the appBar.
                        // On focus set focus to the first element of the AppBar.
                        appBarFinalDiv = _Global.document.createElement("div");
                        // display: inline is needed so that the div doesn't take up space and cause the page to scroll on focus
                        appBarFinalDiv.style.display = "inline";
                        appBarFinalDiv.className = _Constants.finalDivClass;
                        appBarFinalDiv.tabIndex = -1;
                        appBarFinalDiv.setAttribute("aria-hidden", "true");
                        _ElementUtilities._addEventListener(appBarFinalDiv, "focusin", this._focusOnFirstFocusableElementOrThis.bind(this), false);
                        this._element.appendChild(appBarFinalDiv);
                    }


                    // invokeButton should be the second to last element in the _LegacyAppBar's tab order. Second to the finalDiv.
                    if (this._element.children[this._element.children.length - 2] !== this._invokeButton) {
                        this._element.insertBefore(this._invokeButton, appBarFinalDiv);
                    }
                    var elms = this._element.getElementsByTagName("*");
                    var highestTabIndex = _ElementUtilities._getHighestTabIndexInList(elms);
                    this._invokeButton.tabIndex = highestTabIndex;

                    // Update the tabIndex of the firstDiv & finalDiv
                    if (appBarFirstDiv) {
                        appBarFirstDiv.tabIndex = _ElementUtilities._getLowestTabIndexInList(elms);
                    }
                    if (appBarFinalDiv) {
                        appBarFinalDiv.tabIndex = highestTabIndex;
                    }
                }
function _LegacyAppBar_updateFirstAndFinalDiv ( ) { var appBarFirstDiv = this . _element . querySelectorAll ( "." + _Constants . firstDivClass ) ; appBarFirstDiv = appBarFirstDiv . length >= 1 ? appBarFirstDiv [ 0 ] : null ; var appBarFinalDiv = this . _element . querySelectorAll ( "." + _Constants . finalDivClass ) ; appBarFinalDiv = appBarFinalDiv . length >= 1 ? appBarFinalDiv [ 0 ] : null ; // Remove the firstDiv & finalDiv if they are not at the appropriate locations if ( appBarFirstDiv && ( this . _element . children [ 0 ] !== appBarFirstDiv ) ) { appBarFirstDiv . parentNode . removeChild ( appBarFirstDiv ) ; appBarFirstDiv = null ; } if ( appBarFinalDiv && ( this . _element . children [ this . _element . children . length - 1 ] !== appBarFinalDiv ) ) { appBarFinalDiv . parentNode . removeChild ( appBarFinalDiv ) ; appBarFinalDiv = null ; } // Create and add the firstDiv & finalDiv if they don't already exist if ( ! appBarFirstDiv ) { // Add a firstDiv that will be the first child of the appBar. // On focus set focus to the last element of the AppBar. appBarFirstDiv = _Global . document . createElement ( "div" ) ; // display: inline is needed so that the div doesn't take up space and cause the page to scroll on focus appBarFirstDiv . style . display = "inline" ; appBarFirstDiv . className = _Constants . firstDivClass ; appBarFirstDiv . tabIndex = - 1 ; appBarFirstDiv . setAttribute ( "aria-hidden" , "true" ) ; _ElementUtilities . _addEventListener ( appBarFirstDiv , "focusin" , this . _focusOnLastFocusableElementOrThis . bind ( this ) , false ) ; // add to beginning if ( this . _element . children [ 0 ] ) { this . _element . insertBefore ( appBarFirstDiv , this . _element . children [ 0 ] ) ; } else { this . _element . appendChild ( appBarFirstDiv ) ; } } if ( ! appBarFinalDiv ) { // Add a finalDiv that will be the last child of the appBar. // On focus set focus to the first element of the AppBar. appBarFinalDiv = _Global . document . createElement ( "div" ) ; // display: inline is needed so that the div doesn't take up space and cause the page to scroll on focus appBarFinalDiv . style . display = "inline" ; appBarFinalDiv . className = _Constants . finalDivClass ; appBarFinalDiv . tabIndex = - 1 ; appBarFinalDiv . setAttribute ( "aria-hidden" , "true" ) ; _ElementUtilities . _addEventListener ( appBarFinalDiv , "focusin" , this . _focusOnFirstFocusableElementOrThis . bind ( this ) , false ) ; this . _element . appendChild ( appBarFinalDiv ) ; } // invokeButton should be the second to last element in the _LegacyAppBar's tab order. Second to the finalDiv. if ( this . _element . children [ this . _element . children . length - 2 ] !== this . _invokeButton ) { this . _element . insertBefore ( this . _invokeButton , appBarFinalDiv ) ; } var elms = this . _element . getElementsByTagName ( "*" ) ; var highestTabIndex = _ElementUtilities . _getHighestTabIndexInList ( elms ) ; this . _invokeButton . tabIndex = highestTabIndex ; // Update the tabIndex of the firstDiv & finalDiv if ( appBarFirstDiv ) { appBarFirstDiv . tabIndex = _ElementUtilities . _getLowestTabIndexInList ( elms ) ; } if ( appBarFinalDiv ) { appBarFinalDiv . tabIndex = highestTabIndex ; } }
If there is a shown non-sticky _LegacyAppBar then it sets the firstDiv tabIndex to the minimum tabIndex found in the _LegacyAppBars and finalDiv to the max found. Otherwise sets their tabIndex to -1 so they are not tab stops.
If there is a shown non - sticky _LegacyAppBar then it sets the firstDiv tabIndex to the minimum tabIndex found in the _LegacyAppBars and finalDiv to the max found . Otherwise sets their tabIndex to - 1 so they are not tab stops .