Merge branch 'main' into ci/compressed-size

rschristian · web-flow · commit d12d306afacf · 2024-05-09T15:22:03.000-05:00
diff --git a/debug/src/debug.js b/debug/src/debug.js
@@ -353,7 +353,13 @@ export function initDebug() {
 			});
 		}
 
-		if (typeof type === 'string' && (isTableElement(type) || type === 'p')) {
+		if (
+			typeof type === 'string' &&
+			(isTableElement(type) ||
+				type === 'p' ||
+				type === 'a' ||
+				type === 'button')
+		) {
 			// Avoid false positives when Preact only partially rendered the
 			// HTML tree. Whilst we attempt to include the outer DOM in our
 			// validation, this wouldn't work on the server for
@@ -387,11 +393,10 @@ export function initDebug() {
 					type === 'tr' &&
 					domParentName !== 'thead' &&
 					domParentName !== 'tfoot' &&
-					domParentName !== 'tbody' &&
-					domParentName !== 'table'
+					domParentName !== 'tbody'
 				) {
 					console.error(
-						'Improper nesting of table. Your <tr> should have a <thead/tbody/tfoot/table> parent.' +
+						'Improper nesting of table. Your <tr> should have a <thead/tbody/tfoot> parent.' +
 							serializeVNode(vnode) +
 							`\n\n${getOwnerStack(vnode)}`
 					);
@@ -421,6 +426,16 @@ export function initDebug() {
 							`\n\n${getOwnerStack(vnode)}`
 					);
 				}
+			} else if (type === 'a' || type === 'button') {
+				if (getDomChildren(vnode).indexOf(type) !== -1) {
+					console.error(
+						`Improper nesting of interactive content. Your <${type}>` +
+							` should not have other ${type === 'a' ? 'anchor' : 'button'}` +
+							' tags as child-elements.' +
+							serializeVNode(vnode) +
+							`\n\n${getOwnerStack(vnode)}`
+					);
+				}
 			}
 		}
 
diff --git a/debug/test/browser/debug.test.js b/debug/test/browser/debug.test.js
@@ -543,12 +543,14 @@ describe('debug', () => {
 		it('Accepts minimal well formed table', () => {
 			const Table = () => (
 				<table>
-					<tr>
-						<th>Head</th>
-					</tr>
-					<tr>
-						<td>Body</td>
-					</tr>
+					<tbody>
+						<tr>
+							<th>Head</th>
+						</tr>
+						<tr>
+							<td>Body</td>
+						</tr>
+					</tbody>
 				</table>
 			);
 			render(<Table />, scratch);
@@ -586,23 +588,27 @@ describe('debug', () => {
 		it('accepts valid nested tables', () => {
 			const Table = () => (
 				<table>
-					<tr>
-						<th>foo</th>
-					</tr>
-					<tr>
-						<td id="nested">
-							<table>
-								<tr>
-									<td>cell1</td>
-									<td>cell2</td>
-									<td>cell3</td>
-								</tr>
-							</table>
-						</td>
-					</tr>
-					<tr>
-						<td>bar</td>
-					</tr>
+					<tbody>
+						<tr>
+							<th>foo</th>
+						</tr>
+						<tr>
+							<td id="nested">
+								<table>
+									<tbody>
+										<tr>
+											<td>cell1</td>
+											<td>cell2</td>
+											<td>cell3</td>
+										</tr>
+									</tbody>
+								</table>
+							</td>
+						</tr>
+						<tr>
+							<td>bar</td>
+						</tr>
+					</tbody>
 				</table>
 			);
 
@@ -661,6 +667,94 @@ describe('debug', () => {
 		});
 	});
 
+	describe('button nesting', () => {
+		it('should not warn on a regular button', () => {
+			const Button = () => <button>Hello world</button>;
+
+			render(<Button />, scratch);
+			expect(console.error).to.not.be.called;
+		});
+
+		it('should warn for nesting illegal dom-nodes under a button', () => {
+			const Button = () => (
+				<button>
+					<button>Hello world</button>
+				</button>
+			);
+
+			render(<Button />, scratch);
+			expect(console.error).to.be.calledOnce;
+		});
+
+		it('should warn for nesting illegal dom-nodes under a button as func', () => {
+			const ButtonChild = ({ children }) => <button>{children}</button>;
+			const Button = () => (
+				<button>
+					<ButtonChild>Hello world</ButtonChild>
+				</button>
+			);
+
+			render(<Button />, scratch);
+			expect(console.error).to.be.calledOnce;
+		});
+
+		it('should not warn for nesting non-interactive content under a button', () => {
+			const Button = () => (
+				<button>
+					<span>Hello </span>
+					<a>World</a>
+				</button>
+			);
+
+			render(<Button />, scratch);
+			expect(console.error).to.not.be.called;
+		});
+	});
+
+	describe('anchor nesting', () => {
+		it('should not warn a regular anchor', () => {
+			const Anchor = () => <a>Hello world</a>;
+
+			render(<Anchor />, scratch);
+			expect(console.error).to.not.be.called;
+		});
+
+		it('should warn for nesting illegal dom-nodes under an anchor', () => {
+			const Anchor = () => (
+				<a>
+					<a>Hello world</a>
+				</a>
+			);
+
+			render(<Anchor />, scratch);
+			expect(console.error).to.be.calledOnce;
+		});
+
+		it('should warn for nesting illegal dom-nodes under an anchor as func', () => {
+			const AnchorChild = ({ children }) => <a>{children}</a>;
+			const Anchor = () => (
+				<a>
+					<AnchorChild>Hello world</AnchorChild>
+				</a>
+			);
+
+			render(<Anchor />, scratch);
+			expect(console.error).to.be.calledOnce;
+		});
+
+		it('should not warn for nesting non-interactive content under an anchor', () => {
+			const Anchor = () => (
+				<a>
+					<span>Hello </span>
+					<button>World</button>
+				</a>
+			);
+
+			render(<Anchor />, scratch);
+			expect(console.error).to.not.be.called;
+		});
+	});
+
 	describe('PropTypes', () => {
 		beforeEach(() => {
 			resetPropWarnings();
