[DevTools] Stop using native title for buttons/icons (facebook#34379)

Author: eps1lon

packages/react-devtools-shared/src/devtools/views/Components/Badge.js

@@ -14,8 +14,17 @@ import styles from './Badge.css';
 type Props = {
   className?: string,
   children: React$Node,
+  ...
 };
 
-export default function Badge({className = '', children}: Props): React.Node {
-  return <div className={`${styles.Badge} ${className}`}>{children}</div>;
+export default function Badge({
+  className = '',
+  children,
+  ...props
+}: Props): React.Node {
+  return (
+    <div {...props} className={`${styles.Badge} ${className}`}>
+      {children}
+    </div>
+  );
 }

packages/react-devtools-shared/src/devtools/views/Components/Element.js

@@ -24,6 +24,7 @@ import type {Element as ElementType} from 'react-devtools-shared/src/frontend/ty
 import styles from './Element.css';
 import Icon from '../Icon';
 import {useChangeOwnerAction} from './OwnersListContext';
+import Tooltip from './reach-ui/tooltip';
 
 type Props = {
   data: ItemData,
@@ -231,15 +232,16 @@ export default function Element({data, index, style}: Props): React.Node {
           />
         )}
         {showStrictModeBadge && (
-          <Icon
-            className={
-              isSelected && treeFocused
-                ? styles.StrictModeContrast
-                : styles.StrictMode
-            }
-            title="This component is not running in StrictMode."
-            type="strict-mode-non-compliant"
-          />
+          <Tooltip label="This component is not running in StrictMode.">
+            <Icon
+              className={
+                isSelected && treeFocused
+                  ? styles.StrictModeContrast
+                  : styles.StrictMode
+              }
+              type="strict-mode-non-compliant"
+            />
+          </Tooltip>
         )}
       </div>
     </div>

packages/react-devtools-shared/src/devtools/views/Components/ForgetBadge.css

@@ -11,11 +11,3 @@
   position: absolute;
   right: 0.25em;
 }
-
-.ForgetToggle {
-  display: flex;
-}
-
-.ForgetToggle > span { /* targets .ToggleContent */
-  padding: 0;
-}

packages/react-devtools-shared/src/devtools/views/Components/ForgetBadge.js

@@ -11,7 +11,7 @@ import * as React from 'react';
 
 import Badge from './Badge';
 import IndexableDisplayName from './IndexableDisplayName';
-import Toggle from '../Toggle';
+import Tooltip from './reach-ui/tooltip';
 
 import styles from './ForgetBadge.css';
 
@@ -40,12 +40,11 @@ export default function ForgetBadge(props: Props): React.Node {
     'Memo'
   );
 
-  const onChange = () => {};
   const title =
     '✨ This component has been auto-memoized by the React Compiler.';
   return (
-    <Toggle onChange={onChange} className={styles.ForgetToggle} title={title}>
+    <Tooltip label={title}>
       <Badge className={`${styles.Root} ${className}`}>{innerView}</Badge>
-    </Toggle>
+    </Tooltip>
   );
 }

packages/react-devtools-shared/src/devtools/views/Components/InspectedElement.js

@@ -29,6 +29,7 @@ import InspectedElementViewSourceButton from './InspectedElementViewSourceButton
 import useEditorURL from '../useEditorURL';
 
 import styles from './InspectedElement.css';
+import Tooltip from './reach-ui/tooltip';
 
 export type Props = {};
 
@@ -192,14 +193,15 @@ export default function InspectedElementWrapper(_: Props): React.Node {
   let strictModeBadge = null;
   if (element.isStrictModeNonCompliant) {
     strictModeBadge = (
-      <a
-        className={styles.StrictModeNonCompliant}
-        href="https://react.dev/reference/react/StrictMode"
-        rel="noopener noreferrer"
-        target="_blank"
-        title="This component is not running in StrictMode. Click to learn more.">
-        <Icon type="strict-mode-non-compliant" />
-      </a>
+      <Tooltip label="This component is not running in StrictMode. Click to learn more.">
+        <a
+          className={styles.StrictModeNonCompliant}
+          href="https://react.dev/reference/react/StrictMode"
+          rel="noopener noreferrer"
+          target="_blank">
+          <Icon type="strict-mode-non-compliant" />
+        </a>
+      </Tooltip>
     );
   }
 

packages/react-devtools-shared/src/devtools/views/Components/NativeTagBadge.css

@@ -1,11 +1,3 @@
-.Toggle {
-  display: flex;
-}
-
-.Toggle > span { /* targets .ToggleContent */
-  padding: 0;
-}
-
 .Badge {
   cursor: help;
 }

packages/react-devtools-shared/src/devtools/views/Components/NativeTagBadge.js

@@ -10,22 +10,21 @@
 import * as React from 'react';
 
 import Badge from './Badge';
-import Toggle from '../Toggle';
+import Tooltip from './reach-ui/tooltip';
 
 import styles from './NativeTagBadge.css';
 
 type Props = {
   nativeTag: number,
 };
 
-const noop = () => {};
 const title =
   'Unique identifier for the corresponding native component. React Native only.';
 
 export default function NativeTagBadge({nativeTag}: Props): React.Node {
   return (
-    <Toggle onChange={noop} className={styles.Toggle} title={title}>
+    <Tooltip label={title}>
       <Badge className={styles.Badge}>Tag {nativeTag}</Badge>
-    </Toggle>
+    </Tooltip>
   );
 }

packages/react-devtools-shared/src/devtools/views/ErrorBoundary/ReportNewIssue.js

@@ -63,8 +63,7 @@ export default function ReportNewIssue({
         className={styles.ReportLink}
         href={bugURL}
         rel="noopener noreferrer"
-        target="_blank"
-        title="Report bug">
+        target="_blank">
         Report this issue
       </a>
       <div className={styles.ReproSteps}>

packages/react-devtools-shared/src/devtools/views/ErrorBoundary/WorkplaceGroup.js

@@ -25,8 +25,7 @@ export default function WorkplaceGroup(): React.Node {
         className={styles.ReportLink}
         href={REACT_DEVTOOLS_WORKPLACE_URL}
         rel="noopener noreferrer"
-        target="_blank"
-        title="Report bug">
+        target="_blank">
         Report this on Workplace
       </a>
       <div className={styles.FacebookOnly}>(Facebook employees only.)</div>

packages/react-devtools-shared/src/devtools/views/Icon.js

@@ -33,12 +33,14 @@ type Props = {
   className?: string,
   title?: string,
   type: IconType,
+  ...
 };
 
 export default function Icon({
   className = '',
   title = '',
   type,
+  ...props
 }: Props): React.Node {
   let pathData = null;
   let viewBox = '0 0 24 24';
@@ -102,6 +104,7 @@ export default function Icon({
 
   return (
     <svg
+      {...props}
       xmlns="http://www.w3.org/2000/svg"
       className={`${styles.Icon} ${className}`}
       width="24"