Improve accessibility of visualizations (elastic#13507)

* Fix markdown vis settings labels

* Fix contrast ratio of markdown blockquotes, elastic#12491

* Fix fontsize of blockquotes in markdown, elastic#12904

* Add vis type description for screen reader, fix elastic#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

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>

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}`;

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;

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>

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

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;
+  }
 }

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%);