Show a warning for non accessible charts for screen readers (#13573)

* Show warning for non accessible visualizations, fix 13572 * Mark markdown vis as accessible
elastic · Aug 22, 2017 · 5514f34 · 5514f34
1 parent 9a34992
commit 5514f34
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 3 deletions.
diff --git 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
@@ -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>