Improve Management section accessibility (#14243)

* Mark tabs in management as such * Add regions to the management section * Add warning as description to the filter input * Make aria-label match placeholder * Rename filter to search in advanced settings
elastic · Oct 6, 2017 · 37b02f9 · 37b02f9
1 parent 78b4727
commit 37b02f9
Show file tree

Hide file tree

Showing 5 changed files with 12 additions and 6 deletions.
diff --git a/src/core_plugins/kibana/public/management/app.html b/src/core_plugins/kibana/public/management/app.html
@@ -13,11 +13,12 @@
       ></bread-crumbs>
 
       <!-- Tabs. -->
-      <div data-transclude-slot="bottomRow" class="kuiLocalTabs">
+      <div data-transclude-slot="bottomRow" class="kuiLocalTabs" role="tablist">
         <h2 class="kuiLocalTab" ng-if="!sectionName" id="tabHeader" tabindex="0">
           {{::section.display}}
         </h2>
         <a
+          role="tab"
           ng-if="sectionName"
           ng-repeat="item in section.visibleItems"
           class="kuiLocalTab"
@@ -28,6 +29,8 @@ <h2 class="kuiLocalTab" ng-if="!sectionName" id="tabHeader" tabindex="0">
           tooltip-placement="bottom"
           tooltip-popup-delay="400"
           tooltip-append-to-body="1"
+          aria-selected="{{!!item.active}}"
+          aria-disabled="{{!!item.disabled}}"
         >
           {{::item.display}}
         </a>

diff --git a/...gins/kibana/public/management/sections/indices/edit_index_pattern/edit_index_pattern.html b/...gins/kibana/public/management/sections/indices/edit_index_pattern/edit_index_pattern.html
@@ -4,6 +4,8 @@
       ng-controller="managementIndicesEdit"
       data-test-subj="editIndexPattern"
       class="kuiViewContent"
+      role="region"
+      aria-label="Index pattern details"
     >
       <!-- Header -->
       <kbn-management-index-header

diff --git a/src/core_plugins/kibana/public/management/sections/indices/index.html b/src/core_plugins/kibana/public/management/sections/indices/index.html
@@ -1,4 +1,4 @@
-<div class="col-md-2 sidebar-container">
+<div class="col-md-2 sidebar-container" role="region" aria-label="Index patterns">
   <div class="sidebar-list">
     <div class="sidebar-list-header">
       <h5>

diff --git a/src/core_plugins/kibana/public/management/sections/objects/_objects.html b/src/core_plugins/kibana/public/management/sections/objects/_objects.html
@@ -78,7 +78,7 @@ <h1 class="kuiTitle">
               class="kuiToolBarSearchBox__input"
               type="text"
               placeholder="Search..."
-              aria-label="Filter"
+              aria-label="Search"
               ng-model="managementObjectsController.advancedFilter"
             >
           </div>

diff --git a/src/core_plugins/kibana/public/management/sections/settings/index.html b/src/core_plugins/kibana/public/management/sections/settings/index.html
@@ -4,7 +4,7 @@
     <div class="kuiInfoPanel kuiInfoPanel--warning kuiVerticalRhythm">
       <div class="kuiInfoPanelHeader">
         <span class="kuiInfoPanelHeader__icon kuiIcon kuiIcon--warning fa-bolt"></span>
-        <span class="kuiInfoPanelHeader__title">
+        <span class="kuiInfoPanelHeader__title" id="kbnManagementAdvancedWarning">
           Caution: You can break stuff here
         </span>
       </div>
@@ -30,10 +30,11 @@
         <div class="kuiSearchInput__icon kuiIcon fa-search"></div>
         <input
           class="kuiSearchInput__input"
-          aria-label="Filter"
+          aria-label="Search"
           ng-model="advancedFilter"
           type="text"
-          placeholder="Filter..."
+          placeholder="Search..."
+          aria-describedby="kbnManagementAdvancedWarning"
         >
       </div>
     </form>