chore: Update react example

Author: ptang-nr

tools/test-builds/vite-react-17-wrapper/src/App.tsx

@@ -6,14 +6,12 @@ import PopoverBody from "./components/dropdown/PopoverBody";
 import SampleTrigger from "./components/dropdown/SampleTrigger";
 import SpanExample from "./components/SpanExample";
 import ButtonExample from "./components/ButtonExample";
+import LinkExample from "./components/LinkExample";
 
 export default function App() {
   return (
     <>
       <h1>Vite React</h1>
-      <ButtonExample />
-      <SpanExample />
-      <hr/>
       <Popover>
         <PopoverTrigger>
           <SampleTrigger id="sample-trigger" title="Sample Trigger"/>
@@ -25,6 +23,10 @@ export default function App() {
           </div>
         </PopoverBody>
       </Popover>
+      <hr/>
+      <ButtonExample />
+      <LinkExample />
+      <SpanExample />
     </>
   );
 }

tools/test-builds/vite-react-17-wrapper/src/components/ButtonExample.tsx

@@ -4,18 +4,59 @@ const ButtonExample = () => {
   const [clickCount, updateClickCount] = React.useState(0);
 
   return (
-    <div className={"example-container"}>
-      <h2>Buttons</h2>
-      <div>
-        <p><strong>Click count: { clickCount } </strong></p>
-        <p>Button with a click event handler, added via `onclick` ={'>'}
-          <button id="button-with-onclick" onClick={() => { updateClickCount(clickCount + 1)}}> Button </button>
+    <>
+      <div className={"example-container"}>
+        <h2>Buttons</h2>
+        <div>
+          <p><strong>Click count: { clickCount } </strong></p>
+          <p>Button with a click event handler, added via `onclick` ={'> '}
+            <button id="button-with-onclick" onClick={() => { updateClickCount(clickCount + 1)}}> Button </button>
+          </p>
+          <p>Button with no handlers ={'> '}
+            <button id="do-nothing-button">Do nothing</button>
+          </p>
+        </div>
+        <div>
+          <p>Button with listener + span child ={'> '}
+            <button id="button-with-listener-and-span-child">
+              <span id="span-inside-button-with-listener" onClick={() => { updateClickCount(clickCount + 1)}}> Button </span>
+            </button>
+          </p>
+
+          <p>Dead button +  span child ={'> '}
+            <button id="dead-button-with-span-child">
+              <span id="span-inside-dead-button">Dead button</span>
+            </button>
+          </p>
+        </div>
+      </div>
+      <div className={"example-container"}>
+        <h2>Buttons and forms</h2>
+        <p>Button with a form ancestor
+          <form id="form-with-button-child">
+            <input type="checkbox" id="bar1" name="foo" value="bar1" checked/>
+            <label htmlFor="bar1">bar</label>
+            <button id="button-with-form-ancestor">Button w/ form ancestor</button>
+          </form>
         </p>
-        <p>Button with no handlers ={'>'}
-          <button id="do-nothing-button">Do nothing</button>
+
+        <p>Button with a related form
+          <form id="form-with-related-button">
+            <input type="checkbox" id="bar2" name="foo" value="bar2" checked/>
+            <label htmlFor="bar2">bar</label>
+          </form>
+          <button id="button-with-related-form" form="form-with-related-button">Button w/ related form</button>
+        </p>
+
+        <p>Button with an invalid form
+          <form id="form-with-no-valid-button">
+            <input type="checkbox" id="bar3" name="foo" value="bar3" checked/>
+            <label htmlFor="bar3">bar</label>
+            <button id="button-with-invalid-form" form="does-not-exist">Button w/ non-existent form</button>
+          </form>
         </p>
       </div>
-    </div>
+    </>
   )
 }
 

tools/test-builds/vite-react-17-wrapper/src/components/LinkExample.tsx

@@ -0,0 +1,40 @@
+import React from "react";
+
+const LinkExample = () => {
+  const [clickCount, updateClickCount] = React.useState(0);
+
+  return (
+    <>
+      <div className={"example-container"}>
+        <h2>Links</h2>
+        <div>
+          <p><strong>Click count: { clickCount } </strong></p>
+          <p>Link with a click event handler ={'> '}
+            <a id="test-link-with-listener" onClick={() => { updateClickCount(clickCount + 1)}}>Link</a>
+          </p>
+
+          <p>Link with href ={'> '}
+            <a id="test-link-with-href" href="https://www.example.com">Go to Example.com</a>
+          </p>
+
+          <p>Dead link ={'> '}
+            <a id="dead-link">Link</a>
+          </p>
+
+          <p>Link with a click event handler + span child ={'> '}
+            <a id="link-with-listener-and-span-child">
+              <span id="span-inside-link-with-listener" onClick={() => { updateClickCount(clickCount + 1)}}>Link</span>
+            </a>
+          </p>
+          <p>Dead link + span child ={'> '}
+            <a id="dead-link-with-span-child">
+              <span id="span-inside-dead-link">Link</span>
+            </a>
+          </p>
+        </div>
+      </div>
+    </>
+  )
+}
+
+export default LinkExample

tools/test-builds/vite-react-17-wrapper/src/components/SpanExample.tsx

@@ -10,10 +10,10 @@ const SpanExample = () => {
         <span id={"dummy-span-1"}></span>
         <span id={"dummy-span-2"}></span>
         <p><strong>Click count: { clickCount } </strong></p>
-        <p>Span with a click event handler, added via `onclick` ={'>'}
+        <p>Span with a click event handler ={'> '}
           <span id="span-with-onclick" onClick={() => { updateClickCount(clickCount + 1)}} className="non-interactive-element">Span </span>
         </p>
-        <p>Span with no handlers ={'>'}
+        <p>Span with no handlers ={'> '}
           <span id="do-nothing-span" className="non-interactive-element">Span</span>
         </p>
       </div>