[11532] Improve local nav accessibility (elastic#14365)

* Use h2 elements for titles in Sharing dropdown. * Override inherited typographic styles in kuiLocalDropdownTitle. * Use h2 elements for titles in Console dropdowns. * Update kuiLocalDropdownHeader__label class to be applicable to legend elements. * Update Console settings menu with aria labeling and UI Framework styles. * Remove unused config-close styles. * Update Dashboard local nav dropdowns with form labels and h2 elements. * Add support for dark theme to kuiCheckBox. * Update Dashboard local nav dropdowns and saved-object-save-as-check-box directive with kuiCheckBoxLabel styles. * Update Discover local nav with h2 elements. * Update Visualize local nav with h2 element. * Add aria-label to unlabeled inputs in Discover, Visualuze, and Timelion inputs. * Update Timelion local nav with h2 elements. * Update timepicker with tab roles, h2 elements, and UI Framework styles. * Improve labeling and add aria-selected to timepicker tabs. - Refactor timepicker tabs to adhere to tablist structure correctly. * Add tablist role.
cjcenizal · Oct 24, 2017 · 923c4b1 · 923c4b1
1 parent 704214a
commit 923c4b1
Show file tree

Hide file tree

Showing 29 changed files with 320 additions and 151 deletions.
diff --git a/src/core_plugins/console/public/src/directives/help.html b/src/core_plugins/console/public/src/directives/help.html
@@ -1,4 +1,4 @@
-<div class="kuiLocalDropdownTitle">Help</div>
+<h2 class="kuiLocalDropdownTitle">Help</h2>
 
 <tabset>
   <tab heading="Request format">

diff --git a/src/core_plugins/console/public/src/directives/history.html b/src/core_plugins/console/public/src/directives/history.html
@@ -1,4 +1,4 @@
-<div class="kuiLocalDropdownTitle">History</div>
+<h2 class="kuiLocalDropdownTitle">History</h2>
 
 <div class="history-body">
   <ul

diff --git a/src/core_plugins/console/public/src/directives/settings.html b/src/core_plugins/console/public/src/directives/settings.html
@@ -1,67 +1,91 @@
-<div class="kuiLocalDropdownTitle">Settings</div>
+<h2 class="kuiLocalDropdownTitle">Settings</h2>
 
 <form class="form" name="settingsForm" ng-submit="settingsForm.$valid && settings.apply()">
-  <div class="form-group">
+  <fieldset
+    class="kuiVerticalRhythm"
+    role="group"
+  >
     <div class="kuiLocalDropdownHeader">
-      <div class="kuiLocalDropdownHeader__label">Font Size</div>
-    </div>
-
-    <div>
-      <input
-        input-focus
-        ng-model="settings.vals.fontSize"
-        name="fontSize"
-        type="number"
-        required
-        class="form-control"
-        data-test-subj="setting-font-size-input"
+      <legend
+        id="consoleFontSize"
+        class="kuiLocalDropdownHeader__label"
       >
+        Font Size
+      </legend>
     </div>
 
-    <div class="checkbox">
-      <label>
-        <input type="checkbox" ng-model="settings.vals.wrapMode"/> Wrap long lines
-      </label>
-    </div>
+    <input
+      input-focus
+      ng-model="settings.vals.fontSize"
+      name="fontSize"
+      type="number"
+      required
+      class="kuiLocalDropdownInput kuiVerticalRhythmSmall"
+      aria-labelledby="consoleFontSize"
+      data-test-subj="setting-font-size-input"
+    >
 
-  </div>
+    <label class="kuiCheckBoxLabel kuiVerticalRhythmSmall">
+      <input
+        class="kuiCheckBox"
+        type="checkbox"
+        ng-model="settings.vals.wrapMode"
+        aria-describedby="consoleFontSize"
+      >
+      <span class="kuiCheckBoxLabel__text">
+        Wrap long lines
+      </span>
+    </label>
+  </fieldset>
 
-  <div class="form-group">
+  <fieldset
+    class="kuiVerticalRhythm"
+    role="group"
+  >
     <div class="kuiLocalDropdownHeader">
-      <div class="kuiLocalDropdownHeader__label">Autocomplete</div>
-    </div>
-
-    <div class="checkbox">
-      <label>
-        <input
-          name="autocompleteFields"
-          type="checkbox"
-          ng-model="settings.vals.autocomplete.fields">
-          Fields
-        </input>
-      </label>
+      <legend
+        id="consoleAutocomplete"
+        class="kuiLocalDropdownHeader__label"
+      >
+        Autocomplete
+      </legend>
     </div>
 
-    <div class="checkbox">
-      <label>
-        <input
-          name="autocompleteIndices"
-          type="checkbox"
-          ng-model="settings.vals.autocomplete.indices">
-          Indices &amp; Aliases
-        </input>
-      </label>
-    </div>
+    <label class="kuiCheckBoxLabel kuiVerticalRhythmSmall">
+      <input
+        class="kuiCheckBox"
+        name="autocompleteFields"
+        type="checkbox"
+        ng-model="settings.vals.autocomplete.fields"
+        aria-describedby="consoleAutocomplete"
+      >
+      <span class="kuiCheckBoxLabel__text">
+        Fields
+      </span>
+    </label>
 
-  </div>
+    <label class="kuiCheckBoxLabel kuiVerticalRhythmSmall">
+      <input
+        class="kuiCheckBox"
+        name="autocompleteIndices"
+        type="checkbox"
+        ng-model="settings.vals.autocomplete.indices"
+        aria-describedby="consoleAutocomplete"
+      >
+      <span class="kuiCheckBoxLabel__text">
+        Indices &amp; Aliases
+      </span>
+    </label>
+  </fieldset>
 
-  <div class="settings-footer">
+  <div class="kuiVerticalRhythm">
     <button
       ng-click="kbnTopNav.close()"
       class="kuiButton kuiButton--hollow"
     >
       Cancel
     </button>
+
     <button
       type="submit"
       ng-disabled="settingsForm.$invalid"

diff --git a/src/core_plugins/console/public/src/directives/welcome.html b/src/core_plugins/console/public/src/directives/welcome.html
@@ -1,4 +1,4 @@
-<div class="kuiLocalDropdownTitle">Welcome to Console</div>
+<h2 class="kuiLocalDropdownTitle">Welcome to Console</h2>
 
 <p><strong>Quick intro to the UI</strong></p>
 

diff --git a/src/core_plugins/kibana/public/dashboard/top_nav/add_panel.html b/src/core_plugins/kibana/public/dashboard/top_nav/add_panel.html
@@ -2,7 +2,9 @@
   ng-switch="mode"
   ng-init="mode = 'visualization'"
 >
-  <div class="kuiLocalDropdownTitle">Add Panels</div>
+  <h2 class="kuiLocalDropdownTitle">
+    Add Panels
+  </h2>
 
   <div class="kuiTabs">
     <button
@@ -14,6 +16,7 @@
     >
       Visualization
     </button>
+
     <button
       ng-class="{ 'kuiTab-isSelected': mode == 'search' }"
       class="kuiTab"

diff --git a/src/core_plugins/kibana/public/dashboard/top_nav/options.html b/src/core_plugins/kibana/public/dashboard/top_nav/options.html
@@ -1,15 +1,21 @@
 <form role="form">
-  <div class="kuiLocalDropdownTitle">Options</div>
+  <h2 class="kuiLocalDropdownTitle">
+    Options
+  </h2>
 
-  <div class="input-group">
-    <label>
+  <div class="kuiLocalDropdownSection">
+    <label class="kuiCheckBoxLabel">
       <input
+        class="kuiCheckBox"
         type="checkbox"
         ng-model="model.darkTheme"
         ng-checked="model.darkTheme"
         data-test-subj="dashboardDarkThemeCheckbox"
       >
-      Use dark theme
+
+      <span class="kuiCheckBoxLabel__text">
+        Use dark theme
+      </span>
     </label>
   </div>
 </form>
diff --git a/src/core_plugins/kibana/public/dashboard/top_nav/save.html b/src/core_plugins/kibana/public/dashboard/top_nav/save.html
@@ -2,14 +2,22 @@
   role="form"
   ng-submit="opts.save()"
 >
-  <div class="kuiLocalDropdownTitle">Save {{opts.displayName}}</div>
+  <h2 class="kuiLocalDropdownTitle">
+    Save {{opts.displayName}}
+  </h2>
+
   <div class="kuiLocalDropdownSection">
     <div class="kuiLocalDropdownHeader">
-      <div class="kuiLocalDropdownHeader__label">
+      <label
+        class="kuiLocalDropdownHeader__label"
+        for="saveDashboardTitle"
+      >
         Title
-      </div>
+      </label>
     </div>
+
     <input
+      id="saveDashboardTitle"
       class="kuiLocalDropdownInput"
       data-test-subj="dashboardTitle"
       type="text"
@@ -18,13 +26,19 @@
       input-focus="select"
     >
   </div>
+
   <div class="kuiLocalDropdownSection">
     <div class="kuiLocalDropdownHeader">
-      <div class="kuiLocalDropdownHeader__label">
+      <label
+        class="kuiLocalDropdownHeader__label"
+        for="saveDashboardDescription"
+      >
         Description
-      </div>
+      </label>
     </div>
+
     <input
+      id="saveDashboardDescription"
       class="kuiLocalDropdownInput"
       data-test-subj="dashboardDescription"
       type="text"
@@ -33,26 +47,36 @@
     >
   </div>
 
-  <saved-object-save-as-check-box saved-object="opts.dashboard"></saved-object-save-as-check-box>
+  <saved-object-save-as-check-box
+    class="kuiVerticalRhythmSmall"
+    saved-object="opts.dashboard"
+  ></saved-object-save-as-check-box>
 
-  <div class="form-group">
-    <label>
+  <div class="kuiVerticalRhythm">
+    <label class="kuiCheckBoxLabel kuiVerticalRhythmSmall">
       <input
+        class="kuiCheckBox"
         type="checkbox"
         ng-model="model.timeRestore"
         ng-checked="model.timeRestore"
         data-test-subj="storeTimeWithDashboard"
       >
-      Store time with {{opts.displayName}}
-      <kbn-info placement="bottom" info="Change the time filter to the currently selected time each time this dashboard is loaded"></kbn-info>
+
+      <span class="kuiCheckBoxLabel__text">
+        Store time with {{opts.displayName}}
+      </span>
     </label>
+
+    <div class="kuiLocalDropdownFormNote kuiVerticalRhythmSmall">
+      This changes the time filter to the currently selected time each time this dashboard is loaded.
+    </div>
   </div>
 
   <button
     data-test-subj="confirmSaveDashboardButton"
     type="submit"
     ng-disabled="!model.title"
-    class="kuiButton kuiButton--primary"
+    class="kuiButton kuiButton--primary kuiVerticalRhythm"
     aria-label="Save dashboard"
   >
     Save

diff --git a/src/core_plugins/kibana/public/discover/partials/load_search.html b/src/core_plugins/kibana/public/discover/partials/load_search.html
@@ -1,4 +1,7 @@
 <form role="form" ng-submit="fetch()">
-  <div class="kuiLocalDropdownTitle">Open Search</div>
+  <h2 class="kuiLocalDropdownTitle">
+    Open Search
+  </h2>
+
   <saved-object-finder type="searches"></saved-object-finder>
 </form>
diff --git a/src/core_plugins/kibana/public/discover/partials/save_search.html b/src/core_plugins/kibana/public/discover/partials/save_search.html
@@ -2,21 +2,29 @@
   role="form"
   ng-submit="opts.saveDataSource()"
 >
-  <div class="kuiLocalDropdownTitle">Save Search</div>
+  <h2 class="kuiLocalDropdownTitle">
+    Save Search
+  </h2>
+
   <input
     class="kuiLocalDropdownInput"
     id="SaveSearch"
     ng-model="opts.savedSearch.title"
     input-focus="select"
     placeholder="Name this search..."
+    aria-label="Name"
   >
 
-  <saved-object-save-as-check-box saved-object="opts.savedSearch"></saved-object-save-as-check-box>
+  <saved-object-save-as-check-box
+    class="kuiVerticalRhythmSmall"
+    saved-object="opts.savedSearch"
+  ></saved-object-save-as-check-box>
+
   <button
     ng-disabled="!opts.savedSearch.title"
     data-test-subj="discoverSaveSearchButton"
     type="submit"
-    class="kuiButton kuiButton--primary"
+    class="kuiButton kuiButton--primary kuiVerticalRhythmSmall"
   >
     Save
   </button>

diff --git a/src/core_plugins/kibana/public/visualize/editor/panels/save.html b/src/core_plugins/kibana/public/visualize/editor/panels/save.html
@@ -2,23 +2,30 @@
   role="form"
   ng-submit="opts.doSave()"
 >
-  <div class="kuiLocalDropdownTitle">Save Visualization</div>
+  <h2 class="kuiLocalDropdownTitle">
+    Save Visualization
+  </h2>
+
   <input
     class="kuiLocalDropdownInput"
     input-focus="select"
     type="text"
     data-test-subj="visTitleInput"
     name="visTitle"
     ng-model="opts.savedVis.title"
+    aria-label="Name"
     required
   >
 
-  <saved-object-save-as-check-box saved-object="opts.savedVis"></saved-object-save-as-check-box>
+  <saved-object-save-as-check-box
+    class="kuiVerticalRhythmSmall"
+    saved-object="opts.savedVis"
+  ></saved-object-save-as-check-box>
 
   <button
     data-test-subj="saveVisualizationButton"
     type="submit"
-    class="kuiButton kuiButton--primary"
+    class="kuiButton kuiButton--primary kuiVerticalRhythmSmall"
   >
     {{ opts.isAddToDashMode() ? 'Save and Add to Dashboard' : 'Save'}}
   </button>

diff --git a/src/core_plugins/timelion/public/directives/timelion_help/timelion_help.html b/src/core_plugins/timelion/public/directives/timelion_help/timelion_help.html
@@ -366,9 +366,9 @@ <h2>Transforming your data: the real fun begins!</h2>
   </div>
 </div>
 <div ng-show="page === 0">
-  <div class="kuiLocalDropdownTitle">
+  <h2 class="kuiLocalDropdownTitle">
     Help
-  </div>
+  </h2>
 
   <tabset>
     <tab heading="Function reference">

diff --git a/src/core_plugins/timelion/public/partials/load_sheet.html b/src/core_plugins/timelion/public/partials/load_sheet.html
@@ -1,4 +1,10 @@
 <form role="form" ng-submit="fetch()">
-  <div class="kuiLocalDropdownTitle">Open Sheet</div>
-  <saved-object-finder type="timelion-sheet" use-local-management="true"></saved-object-finder>
+  <h2 class="kuiLocalDropdownTitle">
+    Open Sheet
+  </h2>
+
+  <saved-object-finder
+    type="timelion-sheet"
+    use-local-management="true"
+  ></saved-object-finder>
 </form>