From 5514f343549509d1fa6be5fe2c1ed4cfb806356a Mon Sep 17 00:00:00 2001
From: Tim Roes <github@timroes.de>
Date: Tue, 22 Aug 2017 11:24:51 +0200
Subject: [PATCH] Show a warning for non accessible charts for screen readers
 (#13573)

* Show warning for non accessible visualizations, fix 13572

* Mark markdown vis as accessible
---
 .../markdown_vis/public/markdown_vis.js             |  1 +
 src/ui/public/visualize/visualization.html          | 13 ++++++++++---
 2 files changed, 11 insertions(+), 3 deletions(-)

diff --git a/src/core_plugins/markdown_vis/public/markdown_vis.js b/src/core_plugins/markdown_vis/public/markdown_vis.js
index 02480b7b109c9d..45ee60f9cebb56 100644
--- a/src/core_plugins/markdown_vis/public/markdown_vis.js
+++ b/src/core_plugins/markdown_vis/public/markdown_vis.js
@@ -21,6 +21,7 @@ function MarkdownVisProvider(Private) {
   return VisFactory.createAngularVisualization({
     name: 'markdown',
     title: 'Markdown',
+    isAccessible: true,
     image,
     description: 'Create a document using markdown syntax',
     category: CATEGORY.OTHER,
diff --git a/src/ui/public/visualize/visualization.html b/src/ui/public/visualize/visualization.html
index 83c14406bacdc2..3b358526839382 100644
--- a/src/ui/public/visualize/visualization.html
+++ b/src/ui/public/visualize/visualization.html
@@ -6,12 +6,19 @@ <h4>No results found</h4>
   </div>
   <div class="item bottom"></div>
 </div>
-<div div ng-hide="showNoResultsMessage()" class="vis-container {{getVisContainerClasses()}}">
+<div
+  ng-hide="showNoResultsMessage()"
+  class="vis-container {{getVisContainerClasses()}}"
+  tabindex="0"
+>
+  <span ng-if="!vis.type.isAccessible" class="kuiScreenReaderOnly">
+    {{vis.type.title}} visualization, not yet accessible
+  </span>
   <div
+    aria-hidden="{{!vis.type.isAccessible}}"
     ng-style="loadingStyle"
     ng-class="{ loading: vis.type.requiresSearch && searchSource.activeFetchCount > 0 }"
     class="visualize-chart"></div>
-  <visualize-legend ng-if="vis.params.addLegend"></visualize-legend>
+  <visualize-legend aria-hidden="{{!vis.type.isAccessible}}" ng-if="vis.params.addLegend"></visualize-legend>
 </div>
-<!-- <pre>{{chartData | json}}</pre> -->
 <visualize-spy ng-if="vis.type.requiresSearch && showSpyPanel"></visualize-spy>