feat: add component name to overlay

example/index.tsx

@@ -4,6 +4,21 @@ import * as React from 'react';
 import * as ReactDOM from 'react-dom';
 import AxeMode from '../src/index';
 
+function Subtitle() {
+  return <h6>Accessibility testing componentized</h6>;
+}
+
+function Image() {
+  return (
+    <img
+      src="https://avatars1.githubusercontent.com/u/23662329?v=4"
+      width="40"
+      height="40"
+      id="hey"
+    />
+  );
+}
+
 const App = () => {
   return (
     <AxeMode>
@@ -16,17 +31,12 @@ const App = () => {
             />
           </svg>
         </a>
-        <img
-          src="https://avatars1.githubusercontent.com/u/23662329?v=4"
-          width="40"
-          height="40"
-          id="hey"
-        />
+        <Image />
       </header>
       <main>
         <div className="login">
           <h1>Axe Mode</h1>
-          <h6>Accessibility testing componentized</h6>
+          <Subtitle />
           <input placeholder="Username" />
           <input placeholder="Password" />
           <button aria-expanded="foo" onClick={() => console.log('yo')}>

src/icons.tsx

@@ -17,7 +17,7 @@ export const IconMinor: React.FC<Omit<
       <title id={titleId}>Minor impact</title>
       <path
         d="M439.8,30.73C330.44,13.58,233.42,80.12,124.31,73.18l.13-1.74a31.5,31.5,0,0,0-62.83-4.65L34.12,438.28A31.49,31.49,0,0,0,63.21,472c.79.06,1.57.09,2.36.09A31.51,31.51,0,0,0,97,442.93l6.85-92.58c109,16.51,205.76-49.64,314.59-42.6a31.22,31.22,0,0,0,33.21-29.06q7.15-107.8,14.3-215.09A31.13,31.13,0,0,0,439.8,30.73Z"
-        fill="#e8a217"
+        fill="#FF9800"
       />
     </svg>
   );
@@ -39,7 +39,7 @@ export const IconModerate: React.FC<Omit<
       <title id={titleId}>Moderate impact</title>
       <path
         d="M250,18C121.87,18,18,121.87,18,250S121.87,482,250,482,482,378.13,482,250,378.13,18,250,18Zm-20.6,89.34h42a14.54,14.54,0,0,1,14.52,15.35l-8.33,148.79A14.54,14.54,0,0,1,263,285.21H237.4a14.53,14.53,0,0,1-14.52-13.76l-8-148.79A14.54,14.54,0,0,1,229.4,107.34Zm49.35,287.19q-10.26,10.13-28.87,10.13-19.08,0-29-10.25T211,366q0-18.39,9.78-28.52t29.1-10.13q19.32,0,29.22,10T289,366Q289,384.4,278.75,394.53Z"
-        fill="#ce0000"
+        fill="#FF5B5B"
       />
     </svg>
   );
@@ -61,7 +61,7 @@ export const IconSevere: React.FC<Omit<
       <title id={titleId}>Severe impact</title>
       <path
         d="M492.39,420,282.09,44.09C268.05,19,232,19,217.91,44.09L7.61,420c-13.71,24.51,4,54.72,32.09,54.72H460.3C488.38,474.73,506.1,444.52,492.39,420Zm-263-291.94h42a14.54,14.54,0,0,1,14.52,15.35l-8.33,148.79A14.54,14.54,0,0,1,263,305.94H237.4a14.54,14.54,0,0,1-14.52-13.76l-8-148.79A14.53,14.53,0,0,1,229.4,128.07Zm49.35,287.19q-10.26,10.13-28.87,10.13-19.08,0-29-10.25t-9.9-28.4q0-18.37,9.78-28.51t29.1-10.13q19.32,0,29.22,10t9.9,28.63Q289,405.13,278.75,415.26Z"
-        fill="#d16d00"
+        fill="#FFB963"
       />
     </svg>
   );

src/index.tsx

@@ -16,6 +16,20 @@ function validateNode(node: ElementContext): Promise<Result[]> {
   });
 }
 
+// Copied from:
+// https://stackoverflow.com/questions/29321742/react-getting-a-component-from-a-dom-element-for-debugging
+// ¯\_(ツ)_/¯
+function getComponentFromNode(node: HTMLElement): string {
+  const [component] = Object.keys(node)
+    .filter(key => key.startsWith('__reactInternalInstance$'))
+    .map((key: string) => {
+      const fiberNode = (node as any)[key];
+      const component = fiberNode && fiberNode._debugOwner;
+      return component.type.displayName || component.type.name;
+    });
+  return component;
+}
+
 function segmentViolationsByNode(violations: Result[]): ViolationsByNode {
   // Find all DOM nodes affected by the violations
   const nodes = violations.flatMap(violation =>
@@ -52,6 +66,7 @@ function Violation({
   violations: Result[];
 }) {
   const [open, setOpen] = React.useState(false);
+  const [component, setComponent] = React.useState<string | null>(null);
   const targetRef = React.useRef<HTMLElement | null>(null);
   const popoverRef = React.useRef<HTMLDivElement | null>(null);
   const overlayRef = React.useRef<HTMLElement | null>(null);
@@ -71,6 +86,9 @@ function Violation({
     targetRef.current = targetNode;
     overlayRef.current = overlayNode;
 
+    const component = getComponentFromNode(targetNode);
+    setComponent(component);
+
     const { observe, unobserve } = observeRect(targetNode, targetRect => {
       setOverlayPosition(overlayNode, targetRect);
     });
@@ -125,7 +143,7 @@ function Violation({
           </svg>
         </button>
       </div>
-      <code>{target}</code>
+      <code>{component || target}</code>
       {violations.map(violation => {
         const [{ any, all }] = violation.nodes.filter(node =>
           node.target.includes(target)

src/styles.css

@@ -30,13 +30,8 @@ axe-mode-overlay {
   z-index: 1337;
   animation: slideDown 0.4s ease-in-out;
 }
-
-.popover h1,
-.popover p {
+.popover h2 {
   margin: 0;
-}
-
-.popover h1 {
   font-size: 20px;
   color: #222328;
 }