Change:
Environment Details: VSCode Version : 1.24.0 OS Version : Win10 Additional Details: MAS Violated: MAS1.3.1 ScreenReader Version: NVDA2018.2 Repro Steps: VS Code while NVDA is ON. to View menu and Select Integrated Terminal. till combo box next to Terminal tab item. Actual: NVDA does not read the state of tree view "expanded" when combobox next to Terminal tab item opens. Expected: NVDA should read read its state whenever it is expanded or collapsed. Recommendations: Refer below link which is repository of bug fixes code snippets: User Impact: User will not be able to know the control's state. MAS Reference {-a2d1-4dcd-84e1-} Attachment for Reference: Does this issue occur when all extensions are disabled?: Yes
(Experimental duplicate detection) Thanks for submitting this issue. Please also check if it is already covered by an existing one, like: <!-- score: 0.655 --- <!-- score: 0.641 --- <!-- score: 0.608 --- <!-- score: 0.588 --- <!-- score: 0.583 --<!-- potentialduplicates_comment --
FYI
Please refer to the video attached in "Attachment for Reference" section for more clarification.
This is nothing related to the terminal, it is an issue with our windows select box imlementation. Forwarding to and
I started looking at this, I was not familiar with aria-expanded, I think toggling this class on select box open for the parents select should be the answer. When looking at this my NVDA does not seem to read out the options anymore which was long time ago: ('aria-label', nls.localize('selectAriaOption', "{0}", optionText)); Do others hear are the options when selected?
seems to work for me: !
okay that's good, maybe I have a configuration issue. What is the screenshot above?
it is the "Speech Viewer" from NVDA (the one that just shows what is being read instead of reading it)
I'll try that, it doesn't work very well to have NVDA babbling and Dragon attempting to respond, silent operation will make it easier!
I got myself more familiar with various aria attributes and did some experimentation. Additionally I looked at other widgets like quickopen. The selectBox on Windows and Linux is a combination of a native HTML select in the header and a list widget within a contextView container. Since the select does not actually expand (the contextView drop-down list is revealed), we can't rely on the screen reader doing auto readout of the select. The list (tree ) gets focus and we can apply the aria-expanded to that. Below screenshot shows the reader output (as currently exists) for opening the debug configurations drop-down and changing the selection. ! I propose the following to address expanded and related issues: selectBox.ariaLabel() so that each client can set the label to be used for the parent select as well as the drop-down list/tree. This add clarity and matches other widgets. I created a separate issue for this since it also requires tweaks to each client. See Issue aria-expanded on the drop-down list ariaLabel to the list options aria-selected to the focus list item (exists in tree widget but not list) Example below (excepting ): !
Let's discuss in :+1: I wonder if that helps though because of the context view being special. I would check with the example If you look at the second screenshot above for the screenreader output, I prototyped this and it works fine. The context view does not appear to affect aria output at all us. User sets focus on Debug Configurations Drop-down: Reader: "Debug Launch Configurations combobox collapsed [current option] User opens drop-down (select/combobox DOES NOT open therefore no "expanded" readout Reader: "Debug Launch Configurations tree expanded " [current option] Level 1 From the tree/list we can get the expanded readout I am not sure that is needed, I would use the option label as aria label, what else would be needed? I think my description was not clear. What I mean is that we pass the aria-label in some fashion for in the instantiation of the list. Therefore when the drop-down is expanded the list will be read out with both the name and the expanded status. Yes, if the tree is doing something that the list is not yet doing, we should align. :+1: I will create an issue, and self assign

Discussion:
import * as lifecycle from 'vs/base/common/lifecycle'; import { TPromise } from 'vs/base/common/winjs.base'; import { Builder, $ } from 'vs/base/browser/builder'; <del> import { SelectBox } from 'vs/base/browser/ui/selectBox/selectBox'; </del> <ins> import { SelectBox, ISelectBoxOptions } from 'vs/base/browser/ui/selectBox/selectBox'; </ins> import { IAction, IActionRunner, Action, IActionChangeEvent, ActionRunner, IRunEvent } from 'vs/base/common/actions'; import * as DOM from 'vs/base/browser/dom'; import * as types from 'vs/base/common/types';

protected selectBox: SelectBox; protected toDispose: lifecycle.IDisposable[]; <del> constructor(ctx: any, action: IAction, options: string[], selected: number, contextViewProvider: IContextViewProvider </del> <ins> constructor(ctx: any, action: IAction, options: string[], selected: number, contextViewProvider: IContextViewProvider, selectBoxOptions?: ISelectBoxOptions </ins> ) { super(ctx, action); <del> this.selectBox = new SelectBox(options, selected, contextViewProvider); </del> <ins> this.selectBox = new SelectBox(options, selected, contextViewProvider, null, selectBoxOptions); </ins> this.toDispose = []; this.toDispose.push(this.selectBox);

} export interface ISelectBoxOptions { <ins> ariaLabel?: string; </ins> minBottomMargin?: number; }

// Instantiate select implementation based on platform if (isMacintosh) { <del> this.selectBoxDelegate = new SelectBoxNative(options, selected, styles); </del> <ins> this.selectBoxDelegate = new SelectBoxNative(options, selected, styles, selectBoxOptions); </ins> } else { this.selectBoxDelegate = new SelectBoxList(options, selected, contextViewProvider, styles, selectBoxOptions); }

// Use custom CSS vars for padding calculation this.selectElement.className = 'monaco-select-box monaco-select-box-dropdown-padding'; <ins> if (typeof this.selectBoxOptions.ariaLabel === 'string') { this.selectElement.setAttribute('aria-label', this.selectBoxOptions.ariaLabel); } </ins> this._onDidSelect = new Emitter<ISelectData>(); this.styles = styles; this.registerListeners();

this.listRenderer = new SelectListRenderer(); this.selectList = new List(this.selectDropDownListContainer, this, [this.listRenderer], { <ins> ariaLabel: this.selectBoxOptions.ariaLabel, </ins> useShadows: false, selectOnMouseDown: false, verticalScrollMode: ScrollbarVisibility.Visible,

.on(e => this.onMouseUp(e), this, this.toDispose); this.toDispose.push(this.selectList.onDidBlur(e => this.onListBlur())); <ins> this.selectList.getHTMLElement().setAttribute('aria-expanded', 'true'); </ins> } // List methods

import { KeyCode } from 'vs/base/common/keyCodes'; import * as dom from 'vs/base/browser/dom'; import * as arrays from 'vs/base/common/arrays'; <del> import { ISelectBoxDelegate, ISelectBoxStyles, ISelectData } from 'vs/base/browser/ui/selectBox/selectBox'; </del> <ins> import { ISelectBoxDelegate, ISelectBoxOptions, ISelectBoxStyles, ISelectData } from 'vs/base/browser/ui/selectBox/selectBox'; </ins> import { isMacintosh } from 'vs/base/common/platform'; export class SelectBoxNative implements ISelectBoxDelegate {

private toDispose: IDisposable[]; private styles: ISelectBoxStyles; <del> constructor(options: string[], selected: number, styles: ISelectBoxStyles) { </del> <ins> constructor(options: string[], selected: number, styles: ISelectBoxStyles, selectBoxOptions?: ISelectBoxOptions) { </ins> this.toDispose = []; this.selectElement = document.createElement('select'); this.selectElement.className = 'monaco-select-box'; <ins> if (typeof selectBoxOptions.ariaLabel === 'string') { this.selectElement.setAttribute('aria-label', selectBoxOptions.ariaLabel); } </ins> this._onDidSelect = new Emitter<ISelectData>(); this.styles = styles; this.registerListeners(); this.setOptions(options, selected); }