Stop page_navigation_menu rendering its title as a hardcoded h4

Everyone can contribute. Help move this issue forward while earning points, leveling up and collecting rewards.

Summary

page_navigation_menu.vue renders its title as a hardcoded <h4>. On a page whose surrounding headings don't lead up to it, that skips heading levels, and axe reports heading-order (moderate). The story hides this by skipping the rule for every story in the file, with no comment.

Proposal

  • Render the title as something other than a heading, for example a <p> that labels the <nav> through aria-labelledby. It's styled as small, subtle text, so it reads as a label rather than a section heading.
  • Remove the heading-order skip from page_navigation_menu.stories.js.

The component is used in the CI/CD Catalog resource details (ci_resource_components.vue), so check the heading outline there after the change.

Edited by 🤖 GitLab Bot 🤖