EWPP-1860: Prepending inpage nav ids with ref-.

js/inpage_navigation.js

@@ -136,6 +136,13 @@
         return false;
       }
 
+      if (!slug[0].match("^[a-zA-Z]*$")) {
+        // In case the slug doesn't start with letters, append a string to
+        // ensure that the resulting slug is always a valid query selector.
+        slug = 'ref-' + slug;
+        originalSlug = slug;
+      }
+
       // If an element with the generated slug as ID already exists, mark the slug as seen.
       if (!this.seenIds.hasOwnProperty(slug) && document.querySelector('#' + slug)) {
         this.seenIds[slug] = 0;

modules/oe_theme_helper/tests/modules/oe_theme_inpage_navigation_test/templates/oe-theme-inpage-navigation-test-content.html.twig

@@ -45,4 +45,6 @@
   {# An element that will generate an ID that can represent a property of the Object prototype. #}
   <h3 class="heading">Length</h3>
 
+  <h3 class="heading">2022, a new year</h3>
+
 </div>

modules/oe_theme_helper/tests/src/FunctionalJavascript/InPageNavigationBlockTest.php

@@ -10,6 +10,8 @@
 
 /**
  * Test Inpage navigation block plugin.
+ *
+ * @group batch3
  */
 class InPageNavigationBlockTest extends WebDriverTestBase {
 

modules/oe_theme_helper/tests/src/FunctionalJavascript/InPageNavigationLibraryTest.php

@@ -66,7 +66,7 @@ public function testLibrary(): void {
     // container.
     // CSS selector uses "descendent-or-self" as prefix, so we need to use
     // XPath to exclude the container from the selection.
-    $this->assertCount(10, $container->findAll('xpath', '//*[@id]'));
+    $this->assertCount(11, $container->findAll('xpath', '//*[@id]'));
 
     $inner = $container->find('xpath', '/div[@data-inpage-navigation-source-area="h3"]');
     // Since an element with ID "details" already exists in the page, the
@@ -91,10 +91,12 @@ public function testLibrary(): void {
     // easier to assert the content.
     $this->assertEquals('Title with <strong>HTML tags</strong>', $container->find('xpath', '/h3[@id="title-with-html-tags"]')->getHtml());
 
-    // Last 3 assertions for the ID generation.
+    // Last 4 assertions for the ID generation.
     $this->assertEquals('strip--unwanted-characters', $container->find('css', '.strip')->getAttribute('id'));
     $this->assertEquals('constructor', $container->find('xpath', '/h3[@class="heading"][text()="Reserved keyword"]')->getAttribute('id'));
     $this->assertEquals('length', $container->find('xpath', '/h3[@class="heading"][text()="Length"]')->getAttribute('id'));
+    // The heading starting with a non-alpha character gets a ref- prepended.
+    $this->assertEquals('ref-2022-a-new-year', $container->find('xpath', '/h3[@class="heading"][text()="2022, a new year"]')->getAttribute('id'));
 
     $navigation = $assert_session->elementExists('css', '#block-inpage-navigation nav[data-ecl-inpage-navigation]');
     $assert = new InPageNavigationAssert();
@@ -137,6 +139,10 @@ public function testLibrary(): void {
           'label' => 'Length',
           'href' => '#length',
         ],
+        [
+          'label' => '2022, a new year',
+          'href' => '#ref-2022-a-new-year',
+        ],
       ],
     ];
     $assert->assertPattern($expected, $navigation->getOuterHtml());