From e5cabda964203e864e86f4cad24f866323992ae3 Mon Sep 17 00:00:00 2001
From: "dave.snider@gmail.com" <dave.snider@gmail.com>
Date: Fri, 12 Apr 2019 18:04:31 -0700
Subject: [PATCH] Fix canvas workpad focus state (#35015)

* Fix canvas workpad focus state

* reset focus state for viz and top nav
---
 src/legacy/ui/public/kbn_top_nav/kbn_top_nav.html               | 2 +-
 src/legacy/ui/public/styles/_legacy/_base.scss                  | 2 +-
 .../ui/public/visualize/components/visualization_chart.tsx      | 2 +-
 .../public/components/workpad_page/interactive_workpad_page.js  | 2 +-
 .../public/components/workpad_page/static_workpad_page.js       | 2 +-
 5 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/legacy/ui/public/kbn_top_nav/kbn_top_nav.html b/src/legacy/ui/public/kbn_top_nav/kbn_top_nav.html
index 4cebe76a5ccc..63743f0c16a0 100644
--- a/src/legacy/ui/public/kbn_top_nav/kbn_top_nav.html
+++ b/src/legacy/ui/public/kbn_top_nav/kbn_top_nav.html
@@ -11,7 +11,7 @@
 
     <div class="kuiLocalMenu kbnTopNav__mainMenu" ng-if="kbnTopNav.menuItems.length">
       <button
-        class="kuiLocalMenuItem {{menuItem.className}}"
+        class="kuiLocalMenuItem kbn-resetFocusState {{menuItem.className}}"
         ng-repeat="menuItem in kbnTopNav.menuItems"
         aria-label="{{::menuItem.description}}"
         aria-haspopup="{{!menuItem.hasFunction}}"
diff --git a/src/legacy/ui/public/styles/_legacy/_base.scss b/src/legacy/ui/public/styles/_legacy/_base.scss
index a08823f1728a..2cf7e1e30904 100644
--- a/src/legacy/ui/public/styles/_legacy/_base.scss
+++ b/src/legacy/ui/public/styles/_legacy/_base.scss
@@ -114,7 +114,7 @@ input[type="checkbox"],
 // state. This is useful when you've already hand crafted your own
 // focus states in Kibana.
 :focus {
-  &:not([class^="eui"]):not([class^="kbn-resetFocusState"]) {
+  &:not([class^="eui"]):not(.kbn-resetFocusState) {
     @include euiFocusRing;
   }
 }
diff --git a/src/legacy/ui/public/visualize/components/visualization_chart.tsx b/src/legacy/ui/public/visualize/components/visualization_chart.tsx
index 07e9b39337b6..ec6d66eb51e8 100644
--- a/src/legacy/ui/public/visualize/components/visualization_chart.tsx
+++ b/src/legacy/ui/public/visualize/components/visualization_chart.tsx
@@ -90,7 +90,7 @@ class VisualizationChart extends React.Component<VisualizationChartProps> {
 
   public render() {
     return (
-      <div className="visChart__container" tabIndex={0} ref={this.containerDiv}>
+      <div className="visChart__container kbn-resetFocusState" tabIndex={0} ref={this.containerDiv}>
         <p className="euiScreenReaderOnly">
           {this.props.vis.type.title} visualization, not yet accessible
         </p>
diff --git a/x-pack/plugins/canvas/public/components/workpad_page/interactive_workpad_page.js b/x-pack/plugins/canvas/public/components/workpad_page/interactive_workpad_page.js
index a6b2e81fdb80..e01d71e0f5f5 100644
--- a/x-pack/plugins/canvas/public/components/workpad_page/interactive_workpad_page.js
+++ b/x-pack/plugins/canvas/public/components/workpad_page/interactive_workpad_page.js
@@ -75,7 +75,7 @@ export class InteractiveWorkpadPage extends PureComponent {
           }
         }}
         data-test-subj="canvasWorkpadPage"
-        className={`canvasPage ${className} canvasPage--isEditable`}
+        className={`canvasPage kbn-resetFocusState ${className} canvasPage--isEditable`}
         data-shared-items-container
         style={{ ...pageStyle, ...animationStyle, height, width, cursor }}
         onKeyDown={onKeyDown}
diff --git a/x-pack/plugins/canvas/public/components/workpad_page/static_workpad_page.js b/x-pack/plugins/canvas/public/components/workpad_page/static_workpad_page.js
index f617b9e21927..100131197fd7 100644
--- a/x-pack/plugins/canvas/public/components/workpad_page/static_workpad_page.js
+++ b/x-pack/plugins/canvas/public/components/workpad_page/static_workpad_page.js
@@ -19,7 +19,7 @@ export class StaticWorkpadPage extends PureComponent {
         key={pageId}
         id={pageId}
         data-test-subj="canvasWorkpadPage"
-        className={`canvasPage ${className}`}
+        className={`canvasPage kbn-resetFocusState ${className}`}
         data-shared-items-container
         style={{ ...pageStyle, ...animationStyle, height, width }}
       >