From eeff5510e689d384f79e921a0629e21ea955423c Mon Sep 17 00:00:00 2001
From: Tim Roes <github@timroes.de>
Date: Fri, 18 Aug 2017 09:58:11 +0200
Subject: [PATCH] Improve accessibility of visualizations (#13507)

* Fix markdown vis settings labels

* Fix contrast ratio of markdown blockquotes, #12491

* Fix fontsize of blockquotes in markdown, #12904

* Add vis type description for screen reader, fix #12887

The way tooltips are currently implemented we unfortunately cannot use
the tooltip for the aria-describedby. This is another issue to solve.

* Make main nav a11y when collapsed

* Camel case the vistype id used in HTML
---
 .../kibana/public/visualize/wizard/step_1.html            | 7 +++++++
 src/core_plugins/kibana/public/visualize/wizard/wizard.js | 4 ++++
 src/core_plugins/markdown_vis/public/github_markdown.less | 1 +
 .../markdown_vis/public/markdown_vis_params.html          | 8 ++++----
 .../global_nav/global_nav_link/global_nav_link.html       | 1 +
 src/ui/public/styles/dark-theme.less                      | 4 ++++
 src/ui/public/styles/dark-variables.less                  | 1 +
 7 files changed, 22 insertions(+), 4 deletions(-)

diff --git a/src/core_plugins/kibana/public/visualize/wizard/step_1.html b/src/core_plugins/kibana/public/visualize/wizard/step_1.html
index 0110fd0289563..431123ba9ac68 100644
--- a/src/core_plugins/kibana/public/visualize/wizard/step_1.html
+++ b/src/core_plugins/kibana/public/visualize/wizard/step_1.html
@@ -48,6 +48,7 @@ <h2 class="kuiSubTitle kuiVerticalRhythm">
           ng-href="{{ getVisTypeUrl(type) }}"
           tooltip="{{ getVisTypeTooltip(type) }}"
           tooltip-placement="{{ getVisTypeTooltipPosition($parent.$index) }}"
+          aria-describedby="visDescription_{{ ::getVisTypeId(type) }}"
         >
           <div class="kuiGalleryButton__image">
             <img
@@ -76,6 +77,12 @@ <h2 class="kuiSubTitle kuiVerticalRhythm">
             class="kuiGalleryButton__icon kuiIcon fa-flask"
             ng-if="type.isExperimental"
           ></div>
+
+          <span
+            class="sr-only"
+            aria-hidden="true"
+            id="visDescription_{{ ::getVisTypeId(type) }}"
+          >{{::getVisTypeTooltip(type)}}</span>
         </a>
       </div>
     </div>
diff --git a/src/core_plugins/kibana/public/visualize/wizard/wizard.js b/src/core_plugins/kibana/public/visualize/wizard/wizard.js
index ace5f77567f9f..54ee4d6b1b02f 100644
--- a/src/core_plugins/kibana/public/visualize/wizard/wizard.js
+++ b/src/core_plugins/kibana/public/visualize/wizard/wizard.js
@@ -120,6 +120,10 @@ module.controller('VisualizeWizardStep1', function ($scope, $route, kbnUrl, time
     $scope.filteredVisTypeCategories = getVisTypeCategories();
   });
 
+  $scope.getVisTypeId = type => {
+    return _.camelCase(type.name);
+  };
+
   $scope.getVisTypeTooltip = type => {
     const prefix = type.isExperimental ? '(Experimental)' : '';
     return `${prefix} ${type.description}`;
diff --git a/src/core_plugins/markdown_vis/public/github_markdown.less b/src/core_plugins/markdown_vis/public/github_markdown.less
index 330fa0477e517..c0ab4075db593 100644
--- a/src/core_plugins/markdown_vis/public/github_markdown.less
+++ b/src/core_plugins/markdown_vis/public/github_markdown.less
@@ -299,6 +299,7 @@
 }
 
 .markdown-body blockquote {
+  font-size: 1em;
   padding: 0 1em;
   color: @globalColorDarkGray;
   border-left: 0.25em solid @globalColorLightGray;
diff --git a/src/core_plugins/markdown_vis/public/markdown_vis_params.html b/src/core_plugins/markdown_vis/public/markdown_vis_params.html
index 19f7814720659..159b03d4845a6 100644
--- a/src/core_plugins/markdown_vis/public/markdown_vis_params.html
+++ b/src/core_plugins/markdown_vis/public/markdown_vis_params.html
@@ -1,15 +1,15 @@
 <div class="markdown-vis-options form-group">
   <div>
-    <label>Markdown</label>
+    <label for="markdownVisInput">Markdown</label>
     <small class="pull-right"><a target="_window" href="https://help.github.com/articles/github-flavored-markdown/">Help <i aria-hidden="true" class="fa fa-link"></i></a></small>
   </div>
   <div class="kuiSideBarFormRow">
-    <label class="kuiSideBarFormRow__label">
+    <label class="kuiSideBarFormRow__label" for="markdownVisFontSize">
       Font Size (<span ng-bind="vis.params.fontSize"></span>pt)
     </label>
     <div class="kuiSideBarFormRow__control">
-      <input type="range" ng-model="vis.params.fontSize" class="form-control" min="8" max="36" />
+      <input id="markdownVisFontSize" type="range" ng-model="vis.params.fontSize" class="form-control" min="8" max="36" />
     </div>
   </div>
-  <textarea ng-model="vis.params.markdown" class="form-control" rows="20"></textarea>
+  <textarea id="markdownVisInput" ng-model="vis.params.markdown" class="form-control" rows="20"></textarea>
 </div>
diff --git a/src/ui/public/chrome/directives/global_nav/global_nav_link/global_nav_link.html b/src/ui/public/chrome/directives/global_nav/global_nav_link/global_nav_link.html
index 7aed173d42958..e23fb0ce15e2a 100644
--- a/src/ui/public/chrome/directives/global_nav/global_nav_link/global_nav_link.html
+++ b/src/ui/public/chrome/directives/global_nav/global_nav_link/global_nav_link.html
@@ -11,6 +11,7 @@
     href="{{ getHref() }}"
     ng-click="onClick({ $event: $event })"
     data-test-subj="appLink"
+    aria-label="{{::label}}"
   >
     <div class="global-nav-link__icon">
       <img
diff --git a/src/ui/public/styles/dark-theme.less b/src/ui/public/styles/dark-theme.less
index 6464a324f5e36..d74688185d1c1 100644
--- a/src/ui/public/styles/dark-theme.less
+++ b/src/ui/public/styles/dark-theme.less
@@ -621,4 +621,8 @@
   .markdown-body table tr {
     border-top: 1px solid @table-border-color;
   }
+
+  .markdown-body blockquote {
+    color: @dimmed-text-color;
+  }
 }
diff --git a/src/ui/public/styles/dark-variables.less b/src/ui/public/styles/dark-variables.less
index 706bac2525736..e8487a954c549 100644
--- a/src/ui/public/styles/dark-variables.less
+++ b/src/ui/public/styles/dark-variables.less
@@ -5,6 +5,7 @@
 
 @body-bg:                                     @gray3;
 @text-color:                                  #cecece;
+@dimmed-text-color:                           #8d8d8d;
 
 @link-color:                                  #b7e2ea;
 @link-hover-color:                            lighten(@link-color, 10%);