Fix accessibility bugs in Chart Viewer and Advanced properties (#2240)

* fix accessibility bugs in chart viewer

* add advanced properties

* add comments for changes in vs
This commit is contained in:
Anthony Dresser
2018-08-20 16:19:29 -07:00
committed by GitHub
parent 08a8288293
commit 6668ec4b5d
9 changed files with 45 additions and 20 deletions

View File

@@ -7,9 +7,9 @@
</div>
<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 class="dialog-label" id="chartTypeLabel">{{localizedStrings.CHART_TYPE}}</div>
<div class="dialog-label">{{localizedStrings.CHART_TYPE}}</div>
<select-box #chartTypeSelect class="input-divider"
aria-labelledby="chartTypeLabel"
[aria-label]="localizedStrings.CHART_TYPE"
[options]="insightRegistry.getAllIds()"
[selectedOption]="getDefaultChartType()"
[onlyEmitOnChange]="true"
@@ -150,7 +150,8 @@
-->
<ng-template #legendInput>
<div class="dialog-label" id="legendLabel">{{localizedStrings.LEGEND}}</div>
<select-box class="input-divider" aria-labelledby="legendLabel"
<select-box class="input-divider"
[aria-label]="localizedStrings.LEGEND"
[options]="legendOptions"
[selectedOption]="_chartConfig.legendPosition"
[onlyEmitOnChange]="true"
@@ -214,18 +215,23 @@
<ng-template #yAxisLabelInput>
<span>
{{localizedStrings.Y_AXIS_LABEL}}
<input-box (onDidChange)="setConfigValue('yAxisLabel', $event)"></input-box>
<input-box (onDidChange)="setConfigValue('yAxisLabel', $event)"
[aria-label]="localizedStrings.Y_AXIS_LABEL"></input-box>
</span>
</ng-template>
<ng-template #yAxisMinMaxInput>
<span>
{{localizedStrings.Y_AXIS_MAX_VAL}}
<input-box [type]="'number'" (onDidChange)="setConfigValue('yAxisMax', $event)"></input-box>
<input-box [type]="'number'"
(onDidChange)="setConfigValue('yAxisMax', $event)"
[aria-label]="localizedStrings.Y_AXIS_MAX_VAL"></input-box>
</span>
<span>
{{localizedStrings.Y_AXIS_MIN_VAL}}
<input-box [type]="'number'" (onDidChange)="setConfigValue('yAxisMin', $event)"></input-box>
<input-box [type]="'number'"
(onDidChange)="setConfigValue('yAxisMin', $event)"
[aria-label]="localizedStrings.Y_AXIS_MIN_VAL"></input-box>
</span>
</ng-template>
@@ -237,17 +243,22 @@
<ng-template #xAxisLabelInput>
<span>
{{localizedStrings.X_AXIS_LABEL}}
<input-box (onDidChange)="setConfigValue('xAxisLabel', $event)"></input-box>
<input-box (onDidChange)="setConfigValue('xAxisLabel', $event)"
[aria-label]="localizedStrings.X_AXIS_LABEL"></input-box>
</span>
</ng-template>
<ng-template #xAxisMinMaxInput>
<span>
{{localizedStrings.X_AXIS_MAX_VAL}}
<input-box [type]="'number'" (onDidChange)="setConfigValue('xAxisMax', $event)"></input-box>
<input-box [type]="'number'"
(onDidChange)="setConfigValue('xAxisMax', $event)"
[aria-label]="localizedStrings.X_AXIS_MAX_VAL"></input-box>
</span>
<span>
{{localizedStrings.X_AXIS_MIN_VAL}}
<input-box [type]="'number'" (onDidChange)="setConfigValue('xAxisMin', $event)"></input-box>
<input-box [type]="'number'"
(onDidChange)="setConfigValue('xAxisMin', $event)"
[aria-label]="localizedStrings.X_AXIS_MIN_VAL"></input-box>
</span>
</ng-template>