in packages/react-focus/src/components/FocusZone/FocusZone.tsx [1240:1308]
private _updateTabIndexes(element?: HTMLElement): void {
if (
!this._activeElement &&
this.props.defaultTabbableElement &&
typeof this.props.defaultTabbableElement === 'function'
) {
this._activeElement = this.props.defaultTabbableElement(this._root.current as HTMLElement);
}
if (!element && this._root.current) {
this._defaultFocusElement = null;
element = this._root.current;
if (this._activeElement && !elementContains(element, this._activeElement)) {
this._activeElement = null;
}
}
// If active element changes state to disabled, set it to null.
// Otherwise, we lose keyboard accessibility to other elements in focus zone.
if (this._activeElement && !isElementTabbable(this._activeElement)) {
this._activeElement = null;
}
const childNodes = element && element.children;
for (let childIndex = 0; childNodes && childIndex < childNodes.length; childIndex++) {
const child = childNodes[childIndex] as HTMLElement;
if (!isElementFocusZone(child)) {
// If the item is explicitly set to not be focusable then TABINDEX needs to be set to -1.
if (child.getAttribute && child.getAttribute(IS_FOCUSABLE_ATTRIBUTE) === 'false') {
child.setAttribute(TABINDEX, '-1');
}
if (isElementTabbable(child)) {
if (this.props.disabled) {
child.setAttribute(TABINDEX, '-1');
} else if (
!this._isInnerZone &&
((!this._activeElement && !this._defaultFocusElement) || this._activeElement === child)
) {
this._defaultFocusElement = child;
if (child.getAttribute(TABINDEX) !== '0') {
child.setAttribute(TABINDEX, '0');
}
} else if (child.getAttribute(TABINDEX) !== '-1') {
child.setAttribute(TABINDEX, '-1');
}
} else if (child.tagName === 'svg' && child.getAttribute('focusable') !== 'false') {
// Disgusting IE hack. Sad face.
child.setAttribute('focusable', 'false');
}
} else if (child.getAttribute(IS_FOCUSABLE_ATTRIBUTE) === 'true') {
if (
!this._isInnerZone &&
((!this._activeElement && !this._defaultFocusElement) || this._activeElement === child)
) {
this._defaultFocusElement = child;
if (child.getAttribute(TABINDEX) !== '0') {
child.setAttribute(TABINDEX, '0');
}
} else if (child.getAttribute(TABINDEX) !== '-1') {
child.setAttribute(TABINDEX, '-1');
}
}
this._updateTabIndexes(child);
}
}