[Management] Improve accessibility within management (#13364)

* Use header/h tag for tab header, #12861

* Add tabindexes for tables, #12862

* Add for/id pairings, #12863

* Search role, #12868

* Use better descriptions for aria labels, #12865

* Add aria label, #12870

* Button and a tags are already in tab order, removing unnecessary change

* The input field cannot contain the role="search"

* The tabindex needs to be on the element which the click handler

* Remove tabindex and remove the class applying the hover styles - honestly, we can probably make due without any class (using default h2 styles)

* Revert "Remove tabindex and remove the class applying the hover styles - honestly, we can probably make due without any class (using default h2 styles)"

This reverts commit c54ea227889898baef85ee71b3350bbf69ef5d7c.

* Remove the extra code my cat added

* Addressing hidden inputs from #12863

* Remove unnecessary header tag

* Add clarifying comment

* Prevent multiple ids

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

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

src/core_plugins/kibana/public/management/sections/objects/_objects.html

@@ -67,7 +67,10 @@
       <!-- ToolBar -->
       <div class="kuiToolBar">
         <div class="kuiToolBarSearch">
-          <div class="kuiToolBarSearchBox">
+          <div
+            class="kuiToolBarSearchBox"
+            role="search"
+          >
             <div class="kuiToolBarSearchBox__icon kuiIcon fa-search"></div>
             <input
               class="kuiToolBarSearchBox__input"
@@ -129,6 +132,7 @@
             <th class="kuiTableHeaderCell kuiTableHeaderCell--checkBox">
               <input
                 type="checkbox"
+                aria-label="Select All"
                 class="kuiCheckBox"
                 ng-checked="managementObjectsController.areAllRowsChecked()"
                 ng-click="toggleAll()"

src/ui/public/field_editor/field_editor.html

@@ -7,9 +7,10 @@
     </p>
   </div>
   <div ng-if="editor.creating" class="form-group">
-    <label>Name</label>
+    <label for="scriptedFieldName">Name</label>
     <input
       ng-model="editor.field.name"
+      id="scriptedFieldName"
       required
       placeholder="New Scripted Field"
       input-focus
@@ -26,9 +27,10 @@
   </div>
 
   <div ng-if="editor.field.scripted" class="form-group">
-    <label>Language</label>
+    <label for="scriptedFieldLang">Language</label>
     <select
       ng-model="editor.field.lang"
+      id="scriptedFieldLang"
       ng-options="lang as lang for lang in editor.scriptingLangs"
       required
       class="form-control"
@@ -38,9 +40,10 @@
   </div>
 
   <div class="form-group">
-    <label>Type</label>
+    <label for="scriptedFieldType">Type</label>
     <select
       ng-if="editor.field.scripted"
+      id="scriptedFieldType"
       ng-model="editor.field.type"
       ng-options="type as type for type in editor.fieldTypes"
       class="form-control"
@@ -48,6 +51,7 @@
     </select>
     <input
       ng-if="!editor.field.scripted"
+      id="scriptedFieldType"
       ng-model="editor.field.type"
       readonly
       class="form-control">
@@ -58,7 +62,7 @@
       <i class="fa fa-warning"></i> Warning
     </span>
 
-    <label>Format <small>(Default: <i>{{editor.defFormatType.resolvedTitle}}</i>)</small></label>
+    <label for="scriptFieldFormat">Format <small>(Default: <i>{{editor.defFormatType.resolvedTitle}}</i>)</small></label>
 
     <div class="hintbox" ng-if="editor.showFormatHelp">
       <h4 class="hintbox-heading">
@@ -72,6 +76,7 @@
 
     <select
       ng-model="editor.selectedFormatId"
+      id="scriptFieldFormat"
       ng-options="format.id as format.title for format in editor.fieldFormatTypes"
       class="form-control"
       data-test-subj="editorSelectedFormatId">
@@ -85,11 +90,12 @@
   </div>
 
   <div class="form-group">
-    <label for="editor.field.count">Popularity</label>
+    <label for="editorFieldCount">Popularity</label>
     <div class="kuiFieldGroup">
       <div class="kuiFieldGroupSection">
         <input
           ng-model="editor.field.count"
+          id="editorFieldCount"
           type="number"
           class="form-control"
           data-test-subj=editorFieldCount
@@ -102,7 +108,7 @@
             data-test-subj="fieldIncreasePopularityButton"
             type="button"
             ng-click="editor.field.count = editor.field.count + 1"
-            aria-label="Plus"
+            aria-label="Increment popularity"
             class="kuiButton kuiButton--basic"
           >
             <span
@@ -114,7 +120,7 @@
           <button
             type="button"
             ng-click="editor.field.count = editor.field.count - 1"
-            aria-label="Minus"
+            aria-label="Decrement popularity"
             class="kuiButton kuiButton--basic"
           >
             <span
@@ -129,9 +135,14 @@
 
   <div ng-if="editor.field.scripted">
     <div class="form-group">
-      <label>Script</label>
-      <textarea required class="field-editor_script-input form-control text-monospace"
-      ng-model="editor.field.script" data-test-subj="editorFieldScript"></textarea>
+      <label for="scriptedFieldScript">Script</label>
+      <textarea
+        required
+        class="field-editor_script-input form-control text-monospace"
+        id="scriptedFieldScript"
+        ng-model="editor.field.script"
+        data-test-subj="editorFieldScript"
+      ></textarea>
     </div>
 
     <div class="form-group">

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,7 +5,7 @@
     </a>
   </small>
 
-  <label>
+  <label for="scriptFieldDate">
     moment.js format pattern
     <small>
       (Default: "{{ editor.field.format.getParamDefaults().pattern }}")
@@ -13,6 +13,7 @@
   </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,7 +61,11 @@
     </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">
@@ -68,7 +73,7 @@
     <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 @@
     </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,11 +1,14 @@
-<div class="form-group">
-  <input
-    ng-model="model"
-    placeholder="{{ placeholder }}"
-    class="form-control">
-</div>
+<div>
+  <div class="form-group">
+    <input
+      id="{{ id }}"
+      ng-model="model"
+      placeholder="{{ placeholder }}"
+      class="form-control">
+  </div>
 
-<field-format-editor-samples
-  ng-model="model"
-  inputs="inputs">
-</field-format-editor-samples>
+  <field-format-editor-samples
+    ng-model="model"
+    inputs="inputs">
+  </field-format-editor-samples>
+</div>

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

@@ -7,9 +7,12 @@ uiModules
 .directive('fieldFormatEditorPattern', function () {
   return {
     restrict: 'E',
+    replace: true,
     template: patternTemplate,
     require: ['ngModel', '^fieldEditor'],
-    scope: true,
+    scope: {
+      id: '@'
+    },
     link: function ($scope, $el, attrs, cntrls) {
       const ngModelCntrl = cntrls[0];
 

src/ui/public/paginated_table/paginated_table.html

@@ -10,6 +10,8 @@
           <th
             ng-repeat="col in columns"
             ng-click="paginatedTable.sortColumn($index)"
+            kbn-accessible-click
+            tabindex="0"
             class="{{ col.class }}">
             <span ng-bind="::col.title"></span>
             <kbn-info ng-if="col.info" info="{{ col.info }}" placement="top"></kbn-info>