Change:
Change the key event handling so that the user can tab once into the indicators container, and then use left/right arrows to focus on different indicators.
the Settings editor, search on the setting. tab should focus on the first indicator. again should go to the checkbox. -tabbing twice from there should focus the entire setting again. again to the indicator. The left and right arrow keys, along with the home and end keys should allow the user to focus onto the other indicators. indicators container should keep track of the focused indicator. If the second indicator is focused, and the user tabs to the checkbox and back, the second indicator should be the one focused rather than the first one.

Discussion:
interface SettingIndicator { element: HTMLElement; <ins> /** * The element to focus on when navigating with keyboard. * When undefined, use {@link element} instead. */ focusElement?: HTMLElement; </ins> label: SimpleIconLabel; disposables: DisposableStore; }

private readonly profilesEnabled: boolean; <ins> private readonly keybindingListeners: DisposableStore = new DisposableStore(); private focusedIndex = 0; </ins> constructor( container: HTMLElement, @IConfigurationService private readonly configurationService: IConfigurationService,

private createWorkspaceTrustIndicator(): SettingIndicator { const workspaceTrustElement = $('span.setting-indicator.setting-item-workspace-trust'); <del> workspaceTrustElement.tabIndex = 0; </del> const workspaceTrustLabel = new SimpleIconLabel(workspaceTrustElement); workspaceTrustLabel.text = '$(warning) ' + localize('workspaceUntrustedLabel', "Setting value not applied");

private createSyncIgnoredIndicator(): SettingIndicator { const syncIgnoredElement = $('span.setting-indicator.setting-item-ignored'); <del> syncIgnoredElement.tabIndex = 0; </del> const syncIgnoredLabel = new SimpleIconLabel(syncIgnoredElement); syncIgnoredLabel.text = localize('extensionSyncIgnoredLabel', 'Not synced');

private createDefaultOverrideIndicator(): SettingIndicator { const defaultOverrideIndicator = $('span.setting-indicator.setting-item-default-overridden'); <del> defaultOverrideIndicator.tabIndex = 0; </del> const defaultOverrideLabel = new SimpleIconLabel(defaultOverrideIndicator); defaultOverrideLabel.text = localize('defaultOverriddenLabel', "Default value changed");

} DOM.append(this.indicatorsContainerElement, indicatorsToShow[indicatorsToShow.length - 1].element); DOM.append(this.indicatorsContainerElement, $('span', undefined, ')')); <ins> this.resetIndicatorNavigationKeyBindings(indicatorsToShow); } } private resetIndicatorNavigationKeyBindings(indicators: SettingIndicator[]) { this.keybindingListeners.clear(); this.indicatorsContainerElement.role = indicators.length >= 1 ? 'toolbar' : 'button'; if (!indicators.length) { return; </ins> } <ins> const firstElement = indicators[0].focusElement ?? indicators[0].element; firstElement.tabIndex = 0; this.keybindingListeners.add(DOM.addDisposableListener(this.indicatorsContainerElement, 'keydown', (e) => { const ev = new StandardKeyboardEvent(e); let handled = true; if (ev.equals(KeyCode.Home)) { this.focusIndicatorAt(indicators, 0); } else if (ev.equals(KeyCode.End)) { this.focusIndicatorAt(indicators, indicators.length - 1); } else if (ev.equals(KeyCode.RightArrow)) { const indexToFocus = (this.focusedIndex + 1) % indicators.length; this.focusIndicatorAt(indicators, indexToFocus); } else if (ev.equals(KeyCode.LeftArrow)) { const indexToFocus = this.focusedIndex ? this.focusedIndex - 1 : indicators.length - 1; this.focusIndicatorAt(indicators, indexToFocus); } else { handled = false; } if (handled) { e.preventDefault(); e.stopPropagation(); } })); } private focusIndicatorAt(indicators: SettingIndicator[], index: number) { if (index === this.focusedIndex) { return; } const indicator = indicators[index]; const elementToFocus = indicator.focusElement ?? indicator.element; elementToFocus.tabIndex = 0; elementToFocus.focus(); const currentlyFocusedIndicator = indicators[this.focusedIndex]; const previousFocusedElement = currentlyFocusedIndicator.focusElement ?? currentlyFocusedIndicator.element; previousFocusedElement.removeAttribute('tabIndex'); this.focusedIndex = index; </ins> } updateWorkspaceTrust(element: SettingsTreeSettingElement) {

} dispose() { <del> const indicators = [this.workspaceTrustIndicator, this.scopeOverridesIndicator, this.syncIgnoredIndicator, this.defaultOverrideIndicator]; for (const indicator of indicators) { </del> <ins> this.keybindingListeners.dispose(); for (const indicator of this.allIndicators) { </ins> indicator.disposables.dispose(); } }

updateScopeOverrides(element: SettingsTreeSettingElement, onDidClickOverrideElement: Emitter<ISettingOverrideClickEvent>, onApplyFilter: Emitter<string>) { this.scopeOverridesIndicator.element.innerText = ''; this.scopeOverridesIndicator.element.style.display = 'none'; <del> this.scopeOverridesIndicator.element.tabIndex = 0; </del> <ins> this.scopeOverridesIndicator.focusElement = this.scopeOverridesIndicator.element; </ins> if (element.hasPolicyValue) { // If the setting falls under a policy, then no matter what the user sets, the policy value takes effect. this.scopeOverridesIndicator.element.style.display = 'inline';

// just to click into the one override there is. this.scopeOverridesIndicator.element.style.display = 'inline'; this.scopeOverridesIndicator.element.classList.remove('setting-indicator'); <del> this.scopeOverridesIndicator.element.removeAttribute('tabIndex'); </del> this.scopeOverridesIndicator.disposables.clear(); const prefaceText = element.isConfigured ?

const overriddenScope = element.overriddenScopeList[0]; const view = DOM.append(this.scopeOverridesIndicator.element, $('a.modified-scope', undefined, this.getInlineScopeDisplayText(overriddenScope))); <ins> this.scopeOverridesIndicator.focusElement = view; </ins> const onClickOrKeydown = (e: UIEvent) => { const [scope, language] = overriddenScope.split(':'); onDidClickOverrideElement.fire({