ckaczor/azuredatastudio
1
0
Fork 0
mirror of https://github.com/ckaczor/azuredatastudio.git synced 2026-02-16 10:58:30 -05:00
Code Issues Packages Projects Releases Wiki Activity

fix chart viewer accessibility (#1164)

Browse Source
This commit is contained in:
Anthony Dresser
2018-04-18 13:44:33 -07:00
committed by GitHub
parent d3f0ac7954
commit f0aadebd2c
2 changed files with 34 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
src/sql/parts/grid/views/query/chartViewer.component.html
View File

@@ -8,28 +8,28 @@
</div> </div>
<div class="angular-modal-body-content chart-viewer" style="flex:1 1 auto; border-left: 1px solid; margin: 5px;"> <div class="angular-modal-body-content chart-viewer" style="flex:1 1 auto; border-left: 1px solid; margin: 5px;">
<div style="position: relative; width: 100%"> <div style="position: relative; width: 100%">
<div class="dialog-label">{{chartTypeLabel}}</div> <div class="dialog-label" id="chartTypeLabel">{{localizedStrings.CHART_TYPE}}</div>
<div class="input-divider" #chartTypesContainer></div> <div class="input-divider" aria-labelledby="chartTypeLabel" #chartTypesContainer></div>
<div [hidden]="chartTypesSelectBox.value === 'count' || chartTypesSelectBox.value === 'image'"> <div [hidden]="chartTypesSelectBox.value === 'count' || chartTypesSelectBox.value === 'image'">
<div [hidden]="!showDataType"> <div [hidden]="!showDataType">
<div class="dialog-label">{{dataTypeLabel}}</div> <div class="dialog-label" id="dataTypeLabel">{{localizedStrings.DATA_TYPE}}</div>
<div class="radio-indent"> <div class="radio-indent" role="radiogroup" aria-labelledby="dataTypeLabel">
<div class="option"> <div class="option">
<input type="radio" name=data-type value="number" [(ngModel)]="dataType">{{numberLabel}} <input type="radio" role="radio" name="data-type" value="number" [(ngModel)]="dataType" aria-labelledby="numberLabel"><span id="numberLabel">{{localizedStrings.NUMBER}}</span>
</div> </div>
<div class="option"> <div class="option">
<input type="radio" name=data-type value="point" [(ngModel)]="dataType">{{pointLabel}} <input type="radio" role="radio" name="data-type" value="point" [(ngModel)]="dataType" aria-labelledby="pointLabel"><span id="pointLabel">{{localizedStrings.POINT}}</span>
</div> </div>
</div> </div>
</div> </div>
<div [hidden]="!showDataDirection"> <div [hidden]="!showDataDirection">
<div class="dialog-label">{{dataDirectionLabel}}</div> <div class="dialog-label" id="dataDirectionLabel">{{localizedStrings.DATA_DIRECTION}}</div>
<div class="radio-indent"> <div class="radio-indent" role="radiogroup" aria-labelledby="dataDirectionLabel">
<div class="option"> <div class="option">
<input type="radio" name=data-direction value="vertical" [(ngModel)]="dataDirection">{{verticalLabel}} <input type="radio" role="radio" name="data-direction" value="vertical" [(ngModel)]="dataDirection" aria-labelledby="verticalLabel"><span id="verticalLabel">{{localizedStrings.VERTICAL}}</span>
</div> </div>
<div class="option"> <div class="option">
<input type="radio" name=data-direction value="horizontal" [(ngModel)]="dataDirection">{{horizontalLabel}} <input type="radio" role="radio" name="data-direction" value="horizontal" [(ngModel)]="dataDirection" aria-labelledby="horizontalLabel"><span id="horizontalLabel">{{localizedStrings.HORIZONTAL}}</span>
</div> </div>
</div> </div>
</div> </div>
@@ -41,8 +41,8 @@
<div class="input-divider" #columnsAsLabelsContainer></div> <div class="input-divider" #columnsAsLabelsContainer></div>
</div> </div>
<div class="dialog-label">{{legendLabel}}</div> <div class="dialog-label" id="legendLabel">{{localizedStrings.LEGEND}}</div>
<div class="input-divider" #legendContainer></div> <div class="input-divider" #legendContainer aria-labelledby="legendLabel"></div>
<div class="footer"> <div class="footer">
<div class="right-footer"> <div class="right-footer">

41
src/sql/parts/grid/views/query/chartViewer.component.ts
View File

@@ -42,6 +42,20 @@ import * as pfs from 'vs/base/node/pfs';
const insightRegistry = Registry.as<IInsightRegistry>(Extensions.InsightContribution); const insightRegistry = Registry.as<IInsightRegistry>(Extensions.InsightContribution);
const LocalizedStrings = {
CHART_TYPE: nls.localize('chartTypeLabel', 'Chart Type'),
DATA_DIRECTION: nls.localize('dataDirectionLabel', 'Data Direction'),
VERTICAL: nls.localize('verticalLabel', 'Vertical'),
HORIZONTAL: nls.localize('horizontalLabel', 'Horizontal'),
DATA_TYPE: nls.localize('dataTypeLabel', 'Data Type'),
NUMBER: nls.localize('numberLabel', 'Number'),
POINT: nls.localize('pointLabel', 'Point'),
LABEL_FIRST_COLUMN: nls.localize('labelFirstColumnLabel', 'Use First Column as row label?'),
COLUMNS_AS_LABELS: nls.localize('columnsAsLabelsLabel', 'Use Column names as labels?'),
LEGEND: nls.localize('legendLabel', 'Legend Position'),
CHART_NOT_FOUND: nls.localize('chartNotFound', 'Could not find chart to save')
};
@Component({ @Component({
selector: 'chart-viewer', selector: 'chart-viewer',
templateUrl: decodeURI(require.toUrl('sql/parts/grid/views/query/chartViewer.component.html')) templateUrl: decodeURI(require.toUrl('sql/parts/grid/views/query/chartViewer.component.html'))
@@ -54,19 +68,6 @@ export class ChartViewerComponent implements OnInit, OnDestroy, IChartViewAction
private columnsAsLabelsCheckBox: Checkbox; private columnsAsLabelsCheckBox: Checkbox;
/* UI */ /* UI */
/* tslint:disable:no-unused-variable */
private chartTypeLabel: string = nls.localize('chartTypeLabel', 'Chart Type');
private dataDirectionLabel: string = nls.localize('dataDirectionLabel', 'Data Direction');
private verticalLabel: string = nls.localize('verticalLabel', 'Vertical');
private horizontalLabel: string = nls.localize('horizontalLabel', 'Horizontal');
private dataTypeLabel: string = nls.localize('dataTypeLabel', 'Data Type');
private numberLabel: string = nls.localize('numberLabel', 'Number');
private pointLabel: string = nls.localize('pointLabel', 'Point');
private labelFirstColumnLabel: string = nls.localize('labelFirstColumnLabel', 'Use First Column as row label?');
private columnsAsLabelsLabel: string = nls.localize('columnsAsLabelsLabel', 'Use Column names as labels?');
private legendLabel: string = nls.localize('legendLabel', 'Legend Position');
private chartNotFoundError: string = nls.localize('chartNotFound', 'Could not find chart to save');
/* tslint:enable:no-unused-variable */
private _actionBar: Taskbar; private _actionBar: Taskbar;
private _createInsightAction: CreateInsightAction; private _createInsightAction: CreateInsightAction;
@@ -78,6 +79,8 @@ export class ChartViewerComponent implements OnInit, OnDestroy, IChartViewAction
private _executeResult: IInsightData; private _executeResult: IInsightData;
private _chartComponent: ChartInsight; private _chartComponent: ChartInsight;
private localizedStrings = LocalizedStrings;
@ViewChild(ComponentHostDirective) private componentHost: ComponentHostDirective; @ViewChild(ComponentHostDirective) private componentHost: ComponentHostDirective;
@ViewChild('taskbarContainer', { read: ElementRef }) private taskbarContainer; @ViewChild('taskbarContainer', { read: ElementRef }) private taskbarContainer;
@ViewChild('chartTypesContainer', { read: ElementRef }) private chartTypesElement; @ViewChild('chartTypesContainer', { read: ElementRef }) private chartTypesElement;
@@ -117,17 +120,17 @@ export class ChartViewerComponent implements OnInit, OnDestroy, IChartViewAction
// Init label first column checkbox // Init label first column checkbox
// Note: must use 'self' for callback // Note: must use 'self' for callback
this.labelFirstColumnCheckBox = new Checkbox(this.labelFirstColumnElement.nativeElement, { this.labelFirstColumnCheckBox = new Checkbox(this.labelFirstColumnElement.nativeElement, {
label: this.labelFirstColumnLabel, label: LocalizedStrings.LABEL_FIRST_COLUMN,
onChange: () => this.onLabelFirstColumnChanged(), onChange: () => this.onLabelFirstColumnChanged(),
ariaLabel: this.labelFirstColumnLabel ariaLabel: LocalizedStrings.LABEL_FIRST_COLUMN
}); });
// Init label first column checkbox // Init label first column checkbox
// Note: must use 'self' for callback // Note: must use 'self' for callback
this.columnsAsLabelsCheckBox = new Checkbox(this.columnsAsLabelsElement.nativeElement, { this.columnsAsLabelsCheckBox = new Checkbox(this.columnsAsLabelsElement.nativeElement, {
label: this.columnsAsLabelsLabel, label: LocalizedStrings.COLUMNS_AS_LABELS,
onChange: () => this.columnsAsLabelsChanged(), onChange: () => this.columnsAsLabelsChanged(),
ariaLabel: this.columnsAsLabelsLabel ariaLabel: LocalizedStrings.COLUMNS_AS_LABELS
}); });
// Init legend dropdown // Init legend dropdown
@@ -203,7 +206,7 @@ export class ChartViewerComponent implements OnInit, OnDestroy, IChartViewAction
public copyChart(): void { public copyChart(): void {
let data = this._chartComponent.getCanvasData(); let data = this._chartComponent.getCanvasData();
if (!data) { if (!data) {
this.showError(this.chartNotFoundError); this.showError(LocalizedStrings.CHART_NOT_FOUND);
return; return;
} }
@@ -214,7 +217,7 @@ export class ChartViewerComponent implements OnInit, OnDestroy, IChartViewAction
this.promptForFilepath().then(filePath => { this.promptForFilepath().then(filePath => {
let data = this._chartComponent.getCanvasData(); let data = this._chartComponent.getCanvasData();
if (!data) { if (!data) {
this.showError(this.chartNotFoundError); this.showError(LocalizedStrings.CHART_NOT_FOUND);
return; return;
} }
if (filePath) { if (filePath) {