Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Management] Improve accessibility within management #13364

Merged
merged 16 commits into from
Aug 10, 2017
Merged

[Management] Improve accessibility within management #13364

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
16 commits
Select commit Hold shift + click to select a range
7430a3d
Use header/h tag for tab header, #12861
chrisronline Aug 3, 2017
e7f6e36
Add tabindexes for tables, #12862
chrisronline Aug 3, 2017
14b8e23
Add for/id pairings, #12863
chrisronline Aug 4, 2017
43a664b
Search role, #12868
chrisronline Aug 4, 2017
e99955d
Use better descriptions for aria labels, #12865
chrisronline Aug 7, 2017
21ea3ac
Add aria label, #12870
chrisronline Aug 7, 2017
1fe2f2d
Button and a tags are already in tab order, removing unnecessary change
chrisronline Aug 7, 2017
ad0575f
The input field cannot contain the role="search"
chrisronline Aug 7, 2017
0bf778a
The tabindex needs to be on the element which the click handler
chrisronline Aug 7, 2017
04f9f7f
Remove tabindex and remove the class applying the hover styles - hone…
chrisronline Aug 7, 2017
dbc6e38
Revert "Remove tabindex and remove the class applying the hover style…
chrisronline Aug 7, 2017
124c3af
Remove the extra code my cat added
chrisronline Aug 8, 2017
d031b93
Addressing hidden inputs from #12863
chrisronline Aug 9, 2017
fa8d64c
Remove unnecessary header tag
chrisronline Aug 9, 2017
ca0cccd
Add clarifying comment
chrisronline Aug 9, 2017
f6f82ab
Prevent multiple ids
chrisronline Aug 10, 2017
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
37 changes: 24 additions & 13 deletions src/ui/public/field_format_editor/editors/color/color.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,38 +13,49 @@
<span aria-hidden="true" class="kuiIcon fa-times"></span>
</button>
<div class="form-group" ng-if="editor.formatParams.fieldType === 'number'">
<label>Range <small>(min:max)</small></label>
<label for="scriptFieldColorRange">Range <small>(min:max)</small></label>
<input
id="scriptFieldColorRange"
ng-model="color.range"
class="form-control">
class="form-control"
>
</div>
<div class="form-group" ng-if="editor.formatParams.fieldType === 'string'">
<label>Pattern <small>(regular expression)</small></label>
<label for="scriptFieldColorPattern">Pattern <small>(regular expression)</small></label>
<input
ng-model="color.regex"
class="form-control">
id="scriptFieldColorPattern"
ng-model="color.regex"
class="form-control"
>
</div>
<div class="form-group">
<label>Font Color</label>
<label for="scriptFieldColorFont">Font Color</label>
<input
id="scriptFieldColorFont"
ng-model="color.text"
colorpicker
type="text"
class="form-control">
class="form-control"
>
</div>
<div class="form-group">
<label>Background Color</label>
<label for="scriptFieldColorBackground">Background Color</label>
<input
id="scriptFieldColorBackground"
ng-model="color.background"
colorpicker
type="text"
class="form-control">
class="form-control"
>
</div>
<div class="form-group">
<label>Example</label>
<div class="form-control"
ng-style="{color: color.text, 'background-color': color.background}"
value="formatted">
<label for="scriptFieldColorExample">Example</label>
<div
id="scriptFieldColorExample"
class="form-control"
ng-style="{color: color.text, 'background-color': color.background}"
value="formatted"
>
123456
</div>
</div>
Expand Down
3 changes: 2 additions & 1 deletion src/ui/public/field_format_editor/editors/date/date.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,14 +5,15 @@
</a>
</small>

<label>
<label for="scriptFieldDate">
moment.js format pattern
<small>
(Default: "{{ editor.field.format.getParamDefaults().pattern }}")
</small>
</label>

<field-format-editor-pattern
id="scriptFieldDate"
ng-model="editor.formatParams.pattern"
inputs="cntrl.sampleInputs"
></field-format-editor-pattern>
Expand Down
17 changes: 13 additions & 4 deletions src/ui/public/field_format_editor/editors/duration/duration.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,23 +1,32 @@
<div class="editor-duration">
<div class="form-group">
<label>Input Format</label>
<label for="scriptFieldDurationInputFormat">Input Format</label>
<select
id="scriptFieldDurationInputFormat"
ng-model="editor.formatParams.inputFormat"
ng-options="inputFormat.kind as inputFormat.text for inputFormat in editor.field.format.type.inputFormats"
class="form-control">
</select>
</div>
<div class="form-group">
<label>Output Format</label>
<label for="scriptFieldDurationOutputFormat">Output Format</label>
<select
id="scriptFieldDurationOutputFormat"
ng-model="editor.formatParams.outputFormat"
ng-options="outputFormat.method as outputFormat.text for outputFormat in editor.field.format.type.outputFormats"
class="form-control">
</select>
</div>
<div class="form-group" ng-hide="editor.field.format.isHuman()">
<label>Decimal Places</label>
<input type="number" min="0" max="20" ng-model="editor.formatParams.outputPrecision" class="form-control" />
<label for="scriptFieldDurationDecimal">Decimal Places</label>
<input
type="number"
min="0"
max="20"
id="scriptFieldDurationDecimal"
ng-model="editor.formatParams.outputPrecision"
class="form-control"
/>
</div>
</div>
<div>
Expand Down
3 changes: 2 additions & 1 deletion src/ui/public/field_format_editor/editors/numeral/numeral.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@
</a>
</small>

<label>
<label for="scriptFieldNumeral">
Numeral.js format pattern
<small>
(Default: "{{ editor.field.format.getParamDefaults().pattern }}")
Expand All @@ -14,6 +14,7 @@
</div>

<field-format-editor-pattern
id="scriptFieldNumeral"
ng-model="editor.formatParams.pattern"
placeholder="editor.field.format.getParamDefaults().pattern"
inputs="cntrl.sampleInputs">
Expand Down
3 changes: 2 additions & 1 deletion src/ui/public/field_format_editor/editors/string/string.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
<div class="form-group">
<label>Transform</label>
<label for="scriptFieldTransformString">Transform</label>
<select
id="scriptFieldTransformString"
ng-model="editor.formatParams.transform"
ng-options="opt.id as opt.name for opt in cntrl.transformOpts"
class="form-control">
Expand Down
8 changes: 6 additions & 2 deletions src/ui/public/field_format_editor/editors/truncate/truncate.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,10 @@
<div class="form-group">
<label>Field Length</label>
<input ng-model="editor.formatParams.fieldLength" class="form-control">
<label for="scriptFieldTruncateLength">Field Length</label>
<input
id="scriptFieldTruncateLength"
ng-model="editor.formatParams.fieldLength"
class="form-control"
>
</div>

<field-format-editor-samples inputs="cntrl.sampleInputs"></field-format-editor-samples>
19 changes: 14 additions & 5 deletions src/ui/public/field_format_editor/editors/url/url.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
<div class="form-group">
<label>Type</label>
<label for="scriptFieldUrlType">Type</label>
<select
id="scriptFieldUrlType"
ng-model="editor.formatParams.type"
ng-options="type.id as type.name for type in url.urlTypes"
class="form-control">
Expand All @@ -12,7 +13,7 @@
<i class="fa fa-info"></i> Url Template Help
</span>

<label>Url Template</label>
<label for="scriptFieldUrlTemplate">Url Template</label>
<div class="hintbox" ng-if="editor.showUrlTmplHelp">
<h4 class="hintbox-heading">
<i class="fa fa-question-circle text-info"></i> Url Template Help
Expand Down Expand Up @@ -60,15 +61,19 @@ <h4 class="hintbox-heading">
</table>
</div>

<input ng-model="editor.formatParams.urlTemplate" class="form-control">
<input
id="scriptFieldUrlTemplate"
ng-model="editor.formatParams.urlTemplate"
class="form-control"
>
</div>

<div class="form-group">
<span class="pull-right text-info hintbox-label" ng-click="editor.showLabelTmplHelp = !editor.showLabelTmplHelp">
<i class="fa fa-info"></i> Label Template Help
</span>

<label>Label Template</label>
<label for="scriptFieldUrlLabelTemplate">Label Template</label>
<div class="hintbox" ng-if="editor.showLabelTmplHelp">
<h4 class="hintbox-heading">
<i class="fa fa-question-circle text-info"></i> Label Template Help
Expand Down Expand Up @@ -118,7 +123,11 @@ <h4 class="hintbox-heading">
</table>
</div>

<input ng-model="editor.formatParams.labelTemplate" class="form-control">
<input
id="scriptFieldUrlLabelTemplate"
ng-model="editor.formatParams.labelTemplate"
class="form-control"
>
</div>

<field-format-editor-samples inputs="url.samples[editor.formatParams.type]"></field-format-editor-samples>
1 change: 1 addition & 0 deletions src/ui/public/field_format_editor/pattern/pattern.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
<div class="form-group">
<input
id="{{ id }}"
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Is there any requirement for a label here?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It corresponds to labels used outside of the directive: https://github.com/elastic/kibana/pull/13364/files#diff-cdc9adaaaf6e3096b1edb04fc611d045

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Gotcha 👍

ng-model="model"
placeholder="{{ placeholder }}"
class="form-control">
Expand Down
5 changes: 5 additions & 0 deletions src/ui/public/field_format_editor/pattern/pattern.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,11 @@ uiModules

$scope.$bind('inputs', attrs.inputs);
$scope.$bind('placeholder', attrs.placeholder);
// Note: the below binding does not work but the two lines
// under it do work
// $scope.$bind('id', attrs.id);
$scope.id = attrs.id;
attrs.$observe('id', () => $scope.id = attrs.id);
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think this directive needs replace: true, or else the directive shows up as a DOM element with an id on it, which I think will take precedence over the input's id.

Also, I think you can define this a little more simply via the scope property:

scope: {
  id: '@',
},

Did you already give that a shot?

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

You might also want to double check my assertion about the id in the browser.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

You're absolutely right. Good call out


// bind our local model with the outside ngModel
$scope.$watch('model', ngModelCntrl.$setViewValue);
Expand Down