Sidebar items with subpages but not with a hyperlink is not clickable

[nobuto-m]

This page as an example:
https://charmhub.io/manual-tls-certificates

Tutorials and How-to guides in the sidebar are not clickable to expand to see sub menus without knowing that the arrow is the only clickable element.

It's confirmed that it's a wrong usage of a vanilla framework class according to: canonical/vanilla-framework#5021
And the accordion component should used for such a sidebar item without a hyperlink instead:

• https://vanillaframework.io/docs/patterns/accordion
• https://vanillaframework.io/docs/examples/patterns/side-navigation/accordion

So the markup in question is in the following page elements:

partial/_macros.html

charmhub.io/templates/partial/_macros.html

Lines 12 to 17 in 952ae47

	{% else %}
	<strong
	class="p-side-navigation__text {% if expandable and element.children %}is-expandable{% endif %}"
	{% if expandable and element.children %}aria-expanded={% if expanded %}"true"{% else %}"false"{% endif %}{% endif %}
	>{{ element.navlink_text }}</strong>
	{% endif %}

for example for the side items (Tutorials, How-to guides, etc.) in:
https://charmhub.io/manual-tls-certificates
as in the screenshot above.

topics/document.html

charmhub.io/templates/topics/document.html

Lines 17 to 23 in 952ae47

	{% else %}
	<strong
	class="p-side-navigation__text {% if expandable and element.children %}is-expandable{% endif %}"
	{% if expandable and element.children %}aria-expanded={% if expanded %}"true"{% else %}"false"{% endif %}{% endif %}
	{% if element.is_active %}aria-current="page"{% endif %}
	>{{ element.navlink_text }}</strong>
	{% endif %}

for example for the side bar items (Performance, Kubernetes Charms, etc.) in:
https://charmhub.io/topics/canonical-observability-stack/reference