Problem/Motivation
The approved design (VB - Approved Stylesheet) places a breadcrumbs/desktop instance inside the banner component 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 should stay that way. breadcrumbs and breadcrumb-link are component sets in the VB - Stylesheet_2024 library, so this is a design-system element.
Today only two of the four inner pages place the block. 02-blog.yml and 03-contact-us.yml each carry block.system_breadcrumb_block inside media_banner_slot. 04-about-varbase.yml and 05-features.yml do not, so the pages are inconsistent with each other and two of them are inconsistent with the design.
This is design conformance, not a WCAG failure. There is a secondary accessibility benefit (WCAG 2.4.8 Location, Level AAA, and consistent navigation aiding orientation), but it is not an AA conformance fix.
Steps to reproduce
- Install Varbase Starter 1.0.x on a Drupal CMS base.
- Visit /blog and /contact-us: breadcrumbs render inside the banner above the title.
- Visit /about-varbase and /features: no breadcrumbs.
Easy Breadcrumb 2.0.10 is enabled with include_home_segment: true, so the block does produce output wherever it is placed.
Proposed resolution
Add the same block.system_breadcrumb_block entry to the media_banner_slot of 04-about-varbase.yml and 05-features.yml, as the first child of the slot, before the existing spacer. That matches the order in the two working pages and the design's breadcrumbs-above-title placement.
Verified on a fresh install from the patched recipe: /about-varbase and /features render breadcrumbs inside the banner above the title, /home still has none, and /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.
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
- The About Varbase and Features pages show breadcrumbs inside the banner, above the page title.
API changes
- N/A
Data model changes
- N/A
Release notes snippet
- The About Varbase and Features pages now carry the breadcrumb block in their banner, matching the Blog and Contact us pages and the approved design.
AI-Generated: Yes
Issue fork varbase_starter-3625267
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
Comment #4
rajab natshah