On click, remove outline.

src/components/Menu/__snapshots__/Menu.test.js.snap

@@ -5,6 +5,7 @@ exports[`Menu matches snapshot 1`] = `
   onKeyDown={[Function]}>
   <button
     className=""
+    onBlur={[Function]}
     onClick={[Function]}>
     Label
   </button>

src/components/MenuLabel/MenuLabel.css

@@ -10,3 +10,9 @@
     box-shadow: none;
   }
 }
+
+.clickedWithMouse {
+  &:focus {
+    outline: none;
+  }
+}

src/components/MenuLabel/MenuLabel.js

@@ -10,21 +10,38 @@ import css from './MenuLabel.css';
 class MenuLabel extends Component {
   constructor(props) {
     super(props);
+
+    this.state = { clickedWithMouse: false };
     this.onClick = this.onClick.bind(this);
+    this.onBlur = this.onBlur.bind(this);
   }
 
-  onClick() {
+  onClick(e) {
     this.props.onToggleActive();
+
+    // Don't show focus outline if user just clicked the element with mouse
+    // tab + enter creates also a click event, but its location is origin.
+    const nativeEvent = e.nativeEvent;
+    const isRealClick = !(nativeEvent.clientX === 0 && nativeEvent.clientY === 0);
+    if (isRealClick) {
+      this.setState({ clickedWithMouse: true });
+    }
+  }
+
+  onBlur() {
+    this.setState(() => {
+      return { clickedWithMouse: false };
+    });
   }
 
   render() {
     const { children, className, rootClassName } = this.props;
 
     const rootClass = rootClassName || css.root;
-    const classes = classNames(rootClass, className);
+    const classes = classNames(rootClass, className, { [css.clickedWithMouse]: this.state.clickedWithMouse });
 
     return (
-      <button className={classes} onClick={this.onClick}>
+      <button className={classes} onClick={this.onClick} onBlur={this.onBlur}>
         {children}
       </button>
     );
@@ -32,7 +49,7 @@ class MenuLabel extends Component {
 }
 /* eslint-enable jsx-a11y/no-static-element-interactions */
 
-MenuLabel.defaultProps = { className: null, onToggleActive: null, rootClassName: '' };
+MenuLabel.defaultProps = { className: null, isOpen: false, onToggleActive: null, rootClassName: '' };
 
 const { func, node, string } = PropTypes;
 

src/components/TopbarDesktop/TopbarDesktop.css

@@ -43,12 +43,6 @@
   height: 100%;
   margin-right: 24px;
 
-  &:focus {
-    outline-color: var(--matterColorAnti);
-    outline-width: 1px;
-    outline-style: dashed;
-  }
-
   @media (min-width: 1024px) {
     margin-right: 36px;
   }
@@ -85,11 +79,6 @@
   flex-shrink: 0;
   height: 100%;
   margin-right: 24px;
-
-  &:focus {
-    outline: none;
-    text-decoration: underline;
-  }
 }
 
 .createListing {
@@ -102,11 +91,6 @@
 .inboxLink {
   height: 100%;
   margin-right: 24px;
-
-  &:focus {
-    outline: none;
-    text-decoration: underline;
-  }
 }
 
 .inbox {
@@ -140,12 +124,6 @@
   height: 100%;
   margin: 0;
   padding: 0;
-
-  &:focus {
-    outline-color: var(--matterColorAnti);
-    outline-width: 1px;
-    outline-style: dashed;
-  }
 }
 
 .avatar {

src/components/TopbarDesktop/__snapshots__/TopbarDesktop.test.js.snap

@@ -88,6 +88,7 @@ exports[`TopbarDesktop data matches snapshot 1`] = `
     onKeyDown={[Function]}>
     <button
       className=""
+      onBlur={[Function]}
       onClick={[Function]}>
       <div
         className=""