Button/Link Focus: Use focus-visible for keyboard focus (#33066)

* outside react approach

* fixed ts issues and updated radio button

* css only solution

* Removed a bit

* Updated radio button design and fixed focus state on ToolbarButton

* Fixes

* Added missing fullWidth

public/app/core/components/AppNotifications/AppNotificationList.tsx

@@ -11,6 +11,7 @@ import {
 } from '../../copy/appNotification';
 import { AppEvents } from '@grafana/data';
 import { connect, ConnectedProps } from 'react-redux';
+import { VerticalGroup } from '@grafana/ui';
 
 export interface OwnProps {}
 
@@ -45,15 +46,17 @@ export class AppNotificationListUnConnected extends PureComponent<Props> {
 
     return (
       <div className="page-alert-list">
-        {appNotifications.map((appNotification, index) => {
-          return (
-            <AppNotificationItem
-              key={`${appNotification.id}-${index}`}
-              appNotification={appNotification}
-              onClearNotification={(id) => this.onClearAppNotification(id)}
-            />
-          );
-        })}
+        <VerticalGroup>
+          {appNotifications.map((appNotification, index) => {
+            return (
+              <AppNotificationItem
+                key={`${appNotification.id}-${index}`}
+                appNotification={appNotification}
+                onClearNotification={(id) => this.onClearAppNotification(id)}
+              />
+            );
+          })}
+        </VerticalGroup>
       </div>
     );
   }

public/app/core/components/QueryOperationRow/QueryOperationRow.tsx

@@ -130,6 +130,10 @@ const getQueryOperationRowStyles = stylesFactory((theme: GrafanaTheme) => {
       align-items: center;
       justify-content: space-between;
       white-space: nowrap;
+
+      &:focus {
+        outline: none;
+      }
     `,
     dragIcon: css`
       cursor: drag;

public/app/core/core.ts

@@ -11,7 +11,6 @@ import './jquery_extended';
 import './partials';
 import './components/jsontree/jsontree';
 import './components/code_editor/code_editor';
-import './utils/outline';
 import './components/colorpicker/spectrum_picker';
 import './services/search_srv';
 import './services/ng_react';

public/app/core/utils/outline.ts

@@ -1,34 +0,0 @@
-// based on http://www.paciellogroup.com/blog/2012/04/how-to-remove-css-outlines-in-an-accessible-manner/
-function outlineFixer() {
-  const d: any = document;
-
-  const styleElement = d.createElement('STYLE');
-  const domEvents = 'addEventListener' in d;
-
-  const addEventListener = (type: string, callback: { (): void; (): void }) => {
-    // Basic cross-browser event handling
-    if (domEvents) {
-      d.addEventListener(type, callback);
-    } else {
-      d.attachEvent('on' + type, callback);
-    }
-  };
-
-  const setCss = (cssText: string) => {
-    // Handle setting of <style> element contents in IE8
-    !!styleElement.styleSheet ? (styleElement.styleSheet.cssText = cssText) : (styleElement.innerHTML = cssText);
-  };
-
-  d.getElementsByTagName('HEAD')[0].appendChild(styleElement);
-
-  // Using mousedown instead of mouseover, so that previously focused elements don't lose focus ring on mouse move
-  addEventListener('mousedown', () => {
-    setCss(':focus{outline:0 !important}::-moz-focus-inner{border:0;}');
-  });
-
-  addEventListener('keydown', () => {
-    setCss('');
-  });
-}
-
-outlineFixer();