Merge pull request #568 from universal-ember/heading/deep-search

Heading: allow automatic heading selection when headings are nested in other elements

Author: NullVoxPopuli

ember-primitives/src/components/heading.gts

@@ -40,6 +40,22 @@ function isRoot(element: Element) {
   return element === document.body || element.id === TEST_BOUNDARY;
 }
 
+function findHeadingIn(node: ParentNode): number | undefined {
+  if (!(node instanceof Element)) return;
+
+  if (SECTION_HEADINGS.has(node.tagName)) {
+    const level = parseInt(node.tagName.replace("h", "").replace("H", ""));
+
+    return level;
+  }
+
+  for (const child of node.children) {
+    const level = findHeadingIn(child);
+
+    if (level) return level;
+  }
+}
+
 /**
  * The Platform native 'closest' function can't punch through shadow-boundaries
  */
@@ -104,11 +120,9 @@ function levelOf(node: Text): number {
   let current: ParentNode | null = ourBoundary.parentNode;
 
   while (current) {
-    for (const child of current.children) {
-      if (!SECTION_HEADINGS.has(child.tagName)) continue;
-
-      const level = parseInt(child.tagName.replace("h", "").replace("H", ""));
+    const level = findHeadingIn(current);
 
+    if (level) {
       return level + 1;
     }
 

test-app/tests/heading/rendering-test.gts

@@ -24,6 +24,154 @@ module('Rendering | Heading', function (hooks) {
     assert.dom('#b').hasTagName('h2');
   });
 
+  module('wrapped headings', function () {
+    test('h1 wrapped in <a>', async function (assert) {
+      await render(
+        <template>
+          <a href="#">
+            <Heading id="a">one</Heading>
+          </a>
+          <section>
+            <Heading id="b">two</Heading>
+          </section>
+        </template>
+      );
+
+      assert.dom('#a').hasTagName('h1');
+      assert.dom('#b').hasTagName('h2');
+    });
+
+    test('h2 wrapped in <a>', async function (assert) {
+      await render(
+        <template>
+          <Heading id="a">one</Heading>
+
+          <section>
+            <a href="#">
+              <Heading id="b">two</Heading>
+            </a>
+          </section>
+        </template>
+      );
+
+      assert.dom('#a').hasTagName('h1');
+      assert.dom('#b').hasTagName('h2');
+    });
+
+    test('h1 wrapped in <header><a>', async function (assert) {
+      await render(
+        <template>
+          <header>
+            <a href="#">
+              <Heading id="a">one</Heading>
+            </a>
+          </header>
+          <section>
+            <Heading id="b">two</Heading>
+          </section>
+        </template>
+      );
+
+      assert.dom('#a').hasTagName('h1');
+      assert.dom('#b').hasTagName('h2');
+    });
+
+    test('h1 wrapped in <header><div><a>', async function (assert) {
+      await render(
+        <template>
+          <header>
+            <div>
+              <a href="#">
+                <Heading id="a">one</Heading>
+              </a>
+            </div>
+          </header>
+          <section>
+            <Heading id="b">two</Heading>
+          </section>
+        </template>
+      );
+
+      assert.dom('#a').hasTagName('h1');
+      assert.dom('#b').hasTagName('h2');
+    });
+
+    test('h1 wrapped in <header><div><a>, h2 wrapped in <a>', async function (assert) {
+      await render(
+        <template>
+          <header>
+            <div>
+              <a href="#">
+                <Heading id="a">one</Heading>
+              </a>
+            </div>
+          </header>
+          <section>
+            <a href="#">
+              <Heading id="b">two</Heading>
+            </a>
+
+            <section>
+              <a href="#">
+                <Heading id="c">three</Heading>
+              </a>
+            </section>
+          </section>
+        </template>
+      );
+
+      assert.dom('#a').hasTagName('h1');
+      assert.dom('#b').hasTagName('h2');
+      assert.dom('#c').hasTagName('h3');
+    });
+
+    test('[extraneous handling] h1 wrapped in <header><div><a>, h2 wrapped in <a>', async function (assert) {
+      await render(
+        <template>
+          <header>
+            <div>
+              <a href="#">
+                <Heading id="a">one</Heading>
+              </a>
+              <section>
+                <a href="#">
+                  <Heading id="d">two</Heading>
+                </a>
+              </section>
+            </div>
+          </header>
+          <section>
+            <a href="#">
+              <Heading id="b">two</Heading>
+            </a>
+
+            <Heading id="f">two</Heading>
+
+            <section>
+              <a href="#">
+                <Heading id="c">three</Heading>
+              </a>
+
+              <section>
+                <a href="#">
+                  <Heading id="e">four</Heading>
+                </a>
+              </section>
+            </section>
+          </section>
+        </template>
+      );
+
+      assert.dom('#a').hasTagName('h1');
+      assert.dom('#b').hasTagName('h2');
+      assert.dom('#c').hasTagName('h3');
+
+      assert.dom('#d').hasTagName('h2');
+      assert.dom('#e').hasTagName('h4');
+      assert.dom('#f').hasTagName('h2');
+    });
+  });
+
   module('in shadow', function () {
     test('in a section', async function (assert) {
       await render(