task: #3625267 Add the breadcrumb block to the About Varbase and Features banners

Rajab Natshahrequested to merge
issue/varbase_starter-3625267:3625267-add-the-breadcrumb into 1.0.x

The approved Figma design (VB - Approved Stylesheet) places a breadcrumbs/desktop instance inside the banner on every inner page, above the page title. It is there in the About Varbase, Blog, Contact us and Article node frames. The Homepage frame uses the hero component instead and has no breadcrumbs, which is correct for a front page and is left alone.

Issue: https://www.drupal.org/i/3625267

The change

02-blog.yml and 03-contact-us.yml already placed block.system_breadcrumb_block inside media_banner_slot. 04-about-varbase.yml and 05-features.yml did not, so four sibling pages disagreed with each other and two disagreed with the design.

The same block entry is added to both files, as the first child of media_banner_slot before the existing spacer, matching the order in the two working pages and the design's breadcrumbs-above-title placement. Two files, 16 lines added, nothing removed or reordered.

This is design conformance. As a secondary benefit, consistent breadcrumbs also help with WCAG 2.4.8 Location, which is a Level AAA success criterion. It is not an AA failure and this does not claim to fix one.

Testing

Verified on a fresh Varbase Starter 1.0.x install on a drupal/cms base, audited in a real browser.

  • /about-varbase and /features now render breadcrumbs inside the banner above the title.
  • /home still has none.
  • /blog, /contact-us and the article page are unchanged.
  • axe-core 4.10.2 reports zero violations on all six pages with colour rules excluded, and every page has exactly one h1.

Easy Breadcrumb 2.0.10 is enabled with include_home_segment: true, so the block produces output wherever it is placed.

AI-Generated: Yes

Checkpoints:

  • File an issue
  • Addition/Change/Update/Fix
  • Testing to ensure no regression
  • Automated unit testing coverage
  • Automated functional testing coverage
  • UX/UI designer responsibilities
  • Readability
  • Accessibility
  • Performance
  • Security
  • Developer Documentation
  • User Guide Documentation
  • Reviewed by human
  • Code review by maintainers
  • Full testing and approval
  • Credit contributors
  • Review with the product owner
  • Release notes snippet
  • Release
Edited by Rajab Natshah

Merge request reports