[Management] Improve accessibility within management

src/core_plugins/kibana/public/management/app.html

@@ -14,11 +14,9 @@
 
       <!-- Tabs. -->
       <div data-transclude-slot="bottomRow" class="kuiLocalTabs">
-        <header ng-if="!sectionName" id="tabHeader" tabindex="0">
-          <h2 class="kuiLocalTab">
-            {{::section.display}}
-          </h2>
-        </header>
+        <h2 class="kuiLocalTab" ng-if="!sectionName" id="tabHeader" tabindex="0">
+          {{::section.display}}
+        </h2>
         <a
           ng-if="sectionName"
           ng-repeat="item in section.visibleItems"

src/ui/public/field_format_editor/editors/color/color.html

@@ -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>

src/ui/public/field_format_editor/editors/date/date.html

@@ -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>

src/ui/public/field_format_editor/editors/duration/duration.html

@@ -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>

src/ui/public/field_format_editor/editors/numeral/numeral.html

@@ -5,7 +5,7 @@
     </a>
   </small>
 
-  <label>
+  <label for="scriptFieldNumeral">
     Numeral.js format pattern
     <small>
       (Default: "{{ editor.field.format.getParamDefaults().pattern }}")
@@ -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">

src/ui/public/field_format_editor/editors/string/string.html

@@ -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">

src/ui/public/field_format_editor/editors/truncate/truncate.html

@@ -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>

src/ui/public/field_format_editor/editors/url/url.html

@@ -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">
@@ -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
@@ -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
@@ -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>

src/ui/public/field_format_editor/pattern/pattern.html

@@ -1,5 +1,6 @@
 <div class="form-group">
   <input
+    id="{{ id }}"
     ng-model="model"
     placeholder="{{ placeholder }}"
     class="form-control">

src/ui/public/field_format_editor/pattern/pattern.js

@@ -15,6 +15,10 @@ uiModules
 
       $scope.$bind('inputs', attrs.inputs);
       $scope.$bind('placeholder', attrs.placeholder);
+      // The id attribute is not always an angular expression but nearly always
+      // just a string passed in
+      $scope.id = attrs.id;
+      attrs.$observe('id', () => $scope.id = attrs.id);
 
       // bind our local model with the outside ngModel
       $scope.$watch('model', ngModelCntrl.$setViewValue);