From 43e0afebd83a25b479fad8d88872a6c8ff24b4ef Mon Sep 17 00:00:00 2001 From: Sandeep Somavarapu Date: Fri, 6 Jul 2018 15:07:37 +0200 Subject: [PATCH] Fix #52393 --- .../markers/electron-browser/markersPanel.ts | 32 +++++++++++++++---- .../electron-browser/markersPanelActions.ts | 1 + .../electron-browser/media/markers.css | 3 +- 3 files changed, 27 insertions(+), 9 deletions(-) diff --git a/src/vs/workbench/parts/markers/electron-browser/markersPanel.ts b/src/vs/workbench/parts/markers/electron-browser/markersPanel.ts index a5976612345..62916140d4a 100644 --- a/src/vs/workbench/parts/markers/electron-browser/markersPanel.ts +++ b/src/vs/workbench/parts/markers/electron-browser/markersPanel.ts @@ -50,6 +50,7 @@ export class MarkersPanel extends Panel { private treeContainer: HTMLElement; private messageBoxContainer: HTMLElement; + private ariaLabelElement: HTMLElement; private panelSettings: any; private currentResourceGotAddedToMarkersData: boolean = false; @@ -76,8 +77,9 @@ export class MarkersPanel extends Panel { dom.addClass(parent, 'markers-panel'); - let container = dom.append(parent, dom.$('.markers-panel-container')); + const container = dom.append(parent, dom.$('.markers-panel-container')); + this.createArialLabelElement(container); this.createMessageBox(container); this.createTree(container); this.createActions(); @@ -183,11 +185,17 @@ export class MarkersPanel extends Panel { private createMessageBox(parent: HTMLElement): void { this.messageBoxContainer = dom.append(parent, dom.$('.message-box-container')); + this.messageBoxContainer.setAttribute('aria-labelledby', 'markers-panel-arialabel'); + } + + private createArialLabelElement(parent: HTMLElement): void { + this.ariaLabelElement = dom.append(parent, dom.$('')); + this.ariaLabelElement.setAttribute('id', 'markers-panel-arialabel'); + this.ariaLabelElement.setAttribute('aria-live', 'polite'); } private createTree(parent: HTMLElement): void { - this.treeContainer = dom.append(parent, dom.$('.tree-container')); - dom.addClass(this.treeContainer, 'show-file-icons'); + this.treeContainer = dom.append(parent, dom.$('.tree-container.show-file-icons')); const renderer = this.instantiationService.createInstance(Viewer.Renderer); const dnd = this.instantiationService.createInstance(SimpleFileResourceDragAndDrop, obj => obj instanceof ResourceMarkers ? obj.uri : void 0); const controller = this.instantiationService.createInstance(Controller); @@ -291,11 +299,18 @@ export class MarkersPanel extends Panel { } private renderMessage(): void { - const markersModel = this.markersWorkbenchService.markersModel; - const hasFilteredResources = markersModel.hasFilteredResources(); dom.clearNode(this.messageBoxContainer); - dom.toggleClass(this.messageBoxContainer, 'hidden', hasFilteredResources); - if (!hasFilteredResources) { + const markersModel = this.markersWorkbenchService.markersModel; + if (markersModel.hasFilteredResources()) { + const { total, filtered } = markersModel.stats(); + if (filtered === total) { + this.ariaLabelElement.setAttribute('aria-label', localize('No problems filtered', "Showing {0} problems", total)); + } else { + this.ariaLabelElement.setAttribute('aria-label', localize('problems filtered', "Showing {0} of {1} problems", filtered, total)); + } + this.messageBoxContainer.removeAttribute('tabIndex'); + } else { + this.messageBoxContainer.setAttribute('tabIndex', '0'); if (markersModel.hasResources()) { if (markersModel.filterOptions.filter) { this.renderFilteredByFilterMessage(this.messageBoxContainer); @@ -315,6 +330,7 @@ export class MarkersPanel extends Panel { link.textContent = localize('disableFilesExclude', "Disable Files Exclude Filter."); link.setAttribute('tabIndex', '0'); dom.addDisposableListener(link, dom.EventType.CLICK, () => this.filterInputActionItem.useFilesExclude = false); + this.ariaLabelElement.setAttribute('aria-label', Messages.MARKERS_PANEL_NO_PROBLEMS_FILE_EXCLUSIONS_FILTER); } private renderFilteredByFilterMessage(container: HTMLElement) { @@ -324,11 +340,13 @@ export class MarkersPanel extends Panel { link.textContent = localize('clearFilter', "Clear Filter."); link.setAttribute('tabIndex', '0'); dom.addDisposableListener(link, dom.EventType.CLICK, () => this.filterInputActionItem.clear()); + this.ariaLabelElement.setAttribute('aria-label', Messages.MARKERS_PANEL_NO_PROBLEMS_FILTERS); } private renderNoProblemsMessage(container: HTMLElement) { const span = dom.append(container, dom.$('span')); span.textContent = Messages.MARKERS_PANEL_NO_PROBLEMS_BUILT; + this.ariaLabelElement.setAttribute('aria-label', Messages.MARKERS_PANEL_NO_PROBLEMS_BUILT); } private autoExpand(): void { diff --git a/src/vs/workbench/parts/markers/electron-browser/markersPanelActions.ts b/src/vs/workbench/parts/markers/electron-browser/markersPanelActions.ts index b6479f0a8ec..4cffca371fd 100644 --- a/src/vs/workbench/parts/markers/electron-browser/markersPanelActions.ts +++ b/src/vs/workbench/parts/markers/electron-browser/markersPanelActions.ts @@ -157,6 +157,7 @@ export class MarkersFilterActionItem extends BaseActionItem { ariaLabel: Messages.MARKERS_PANEL_FILTER_ARIA_LABEL, history: this.itemOptions.filterHistory })); + this.filterInputBox.inputElement.setAttribute('aria-labelledby', 'markers-panel-arialabel'); this._register(attachInputBoxStyler(this.filterInputBox, this.themeService)); this.filterInputBox.value = this.itemOptions.filterText; this._register(this.filterInputBox.onDidChange(filter => this.delayedFilterUpdate.trigger(() => this.onDidInputChange()))); diff --git a/src/vs/workbench/parts/markers/electron-browser/media/markers.css b/src/vs/workbench/parts/markers/electron-browser/media/markers.css index 1aa1fecffe9..4741c81c69e 100644 --- a/src/vs/workbench/parts/markers/electron-browser/media/markers.css +++ b/src/vs/workbench/parts/markers/electron-browser/media/markers.css @@ -79,8 +79,7 @@ display: none; } -.markers-panel .markers-panel-container .tree-container.hidden, -.markers-panel .markers-panel-container .message-box-container.hidden { +.markers-panel .markers-panel-container .tree-container.hidden { display: none; visibility: hidden; }