Problem/Motivation

A webform served on its own page at /form/{webform} renders with no page title. The browser tab shows the right thing, but the page itself opens straight onto the first form field with no heading and no context.

Verified anonymously on an Educare site:

/form/newsletter-subscribe  ->  200, document.querySelector('h1') === null
/user/login                 ->  200, h1 present

The cause is that the theme never renders a page title for any route. The page component outputs page.content and nothing else, and this theme registers no block layout blocks, because Drupal Canvas owns page rendering. The routes that do show a heading have their own dedicated page templates, for instance templates/page/page--user--login.html.twig, which render the title themselves.

The result is an accessibility and orientation problem on every webform page: no h1, no first heading for a screen reader to land on, and no visible statement of what the form is for.

This is the same defect as Vartheme BS5 Horizon Aid #3622823, since both themes are Bootstrap 5.3 clones of Vartheme BS5 and share this page component structure.

The Newsletter Subscribe form on an Educare site, before #3622822. The tab reads "Newsletter Subscribe | …" but the page opens at the email field:

Webform page starting at the email field with no page heading

Steps to reproduce

  1. Install a site that uses this theme with a webform available from varbase_webform_base.
  2. Visit /form/newsletter-subscribe as an anonymous user.
  3. Observe that the page begins at the email field, with no heading.

Proposed resolution

Render the page title on webform routes, following the pattern this theme already uses for the user routes: a route specific page template plus a small page component, rather than adding a title to the shared page component, which would put a duplicate heading on every Drupal Canvas page.

This needs sequencing with varbase_webform_base #3622822. That issue gives the Newsletter Subscribe form its own markup header containing an h1, so if both land unchanged, /form/newsletter-subscribe would have two h1 elements. Two ways to resolve it, and the choice belongs with the maintainers:

  • The theme renders the title for every webform route and varbase_webform_base drops the h1 from its markup header, keeping the eyebrow and lead line. This is the more correct option, since the page title then comes from the route rather than from form content.
  • The theme renders the title only where the form provides no header of its own.

No merge request is opened yet, deliberately. The change is cross cutting and interacts with the issue above, so the approach should be agreed before code is written. Whatever is decided should be applied to both themes together.

Remaining tasks

  • ✅ File an issue
  • ❌ Addition/Change/Update/Fix
  • ❌ Testing to ensure no regression
  • ➖ Automated unit/functional testing coverage
  • ➖ Developer Documentation support
  • ➖ User Guide Documentation support
  • ❌ UX/UI designer responsibilities
  • ❌ Accessibility and Readability
  • ❌ Reviewed by a human
  • ❌ Code review by maintainers
  • ❌ Full testing and approval
  • ❌ Credit contributors
  • ❌ Review with the product owner
  • ❌ Update Release Notes
  • ❌ Release

User interface changes

  • Webform pages would gain a page title.

API changes

  • N/A

Data model changes

  • N/A

Release notes snippet

  • N/A
CommentFileSizeAuthor
educare-webform-page-no-title.png82.3 KBrajab natshah
Command icon Show commands

Start within a Git clone of the project using the version control instructions.

Or, if you do not have SSH keys set up on git.drupalcode.org:

Comments

rajab natshah created an issue. See original summary.

rajab natshah’s picture

Issue summary: View changes