Fix focus ring issue in 7.x (#38847)

* Fix focus ring issue in 7.x

* csss file for kui

packages/kbn-ui-framework/dist/kui_light.css

@@ -56,10 +56,6 @@
  * 4. Fix an IE bug which causes the last child to overflow the container.
  * 5. Fixing this bug means we now need to align the children to the right.
  */
-:focus:not([class^="eui"]) {
-  -webkit-animation: 350ms cubic-bezier(0.694, 0.0482, 0.335, 1) 1 normal forwards focusRingAnimate;
-          animation: 350ms cubic-bezier(0.694, 0.0482, 0.335, 1) 1 normal forwards focusRingAnimate; }
-
 /**
  * 1. Required for IE11.
  */

src/legacy/ui/public/kbn_top_nav/kbn_top_nav.html

@@ -1,8 +1,4 @@
-<div
-  class="kbnTopNav"
-  ng-show="kbnTopNav.isVisible()"
-  data-test-subj="top-nav"
->
+<div class="kbnTopNav" ng-show="kbnTopNav.isVisible()" data-test-subj="top-nav">
   <!-- Top row slot, e.g. breadcrumbs, title. -->
   <div data-transclude-slot="topLeftCorner"></div>
 
@@ -11,7 +7,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}}"
@@ -33,10 +29,7 @@
   </div>
 
   <!-- Dropdown content, e.g. time-picker. -->
-  <div
-    class="kuiLocalDropdown"
-    ng-show="kbnTopNav.rendered"
-  >
+  <div class="kuiLocalDropdown" ng-show="kbnTopNav.rendered">
     <button
       class="kuiLocalDropdownCloseButton"
       ng-click="kbnTopNav.close()"
@@ -44,9 +37,7 @@
     >
       <span class="kuiIcon fa-chevron-circle-up"></span>
     </button>
-    <div id="template_wrapper">
-      <!-- Content gets dynamically inserted here. -->
-    </div>
+    <div id="template_wrapper"><!-- Content gets dynamically inserted here. --></div>
   </div>
 
   <div class="kuiLocalNavRow kuiLocalNavRow--secondary">

src/legacy/ui/public/styles/_legacy/_base.scss

@@ -4,13 +4,14 @@
 input.ng-invalid,
 textarea.ng-invalid,
 select.ng-invalid {
-  &.ng-dirty, &.ng-touched {
+  &.ng-dirty,
+  &.ng-touched {
     border-color: $euiColorDanger !important;
   }
 }
 
-input[type="radio"],
-input[type="checkbox"],
+input[type='radio'],
+input[type='checkbox'],
 .radio,
 .radio-inline,
 .checkbox,
@@ -18,7 +19,7 @@ input[type="checkbox"],
   &[disabled],
   fieldset[disabled] & {
     cursor: default;
-    opacity: .8;
+    opacity: 0.8;
   }
 }
 
@@ -27,7 +28,7 @@ input[type="checkbox"],
   align-items: center;
   padding-left: 0 !important;
 
-  input[type="checkbox"] {
+  input[type='checkbox'] {
     float: none;
     margin: 0 $euiSizeXS;
     position: static;
@@ -95,7 +96,6 @@ input[type="checkbox"],
   }
 }
 
-
 // Too overused in many places to be moved elsewhere
 
 .page-row {
@@ -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;
   }
 }

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>