docs(vertical-navigation): update ux docs

[panch1739]

This PR updates the images of the vertical navigation for new design.

---

• I confirm that this MR follows the contribution guidelines.

[gemini-code-assist]

Summary of Changes

Hello @panch1739, I'm Gemini Code Assist¹! I'm currently reviewing this pull request and will post my feedback shortly. In the meantime, here's a summary to help you and other reviewers quickly get up to speed!

This pull request updates the user experience documentation for the vertical navigation component. The changes primarily focus on refining the guidelines for badge implementation to align with a new design, ensuring clarity on their display behavior in various states, particularly within submenus and when the navigation is collapsed.

Highlights

• Vertical Navigation Documentation Update: The documentation for vertical navigation has been updated to reflect new design guidelines, specifically concerning the use of badges.
• Badge Usage in Submenus: New rules have been added clarifying that badges are primarily for child items in submenus. Parent items do not display badges unless the navigation is in a collapsed state.
• Collapsed State Badge Display: Detailed descriptions are now included for how badges appear when the vertical navigation is collapsed: numeric badges are compact, and label-only badges are shown as simple dots. The option to fully hide badges in this state is also mentioned.

Using Gemini Code Assist

The full guide for Gemini Code Assist can be found on our documentation page, here are some quick tips.

Invoking Gemini

You can request assistance from Gemini at any point by creating a comment using either /gemini <command> or @gemini-code-assist <command>. Below is a summary of the supported commands on the current page.

Feature	Command	Description
Code Review	/gemini review	Performs a code review for the current pull request in its current state.
Pull Request Summary	/gemini summary	Provides a summary of the current pull request in its current state.
Comment	@gemini-code-assist	Responds in comments when explicitly tagged, both in pull request comments and review comments.
Help	/gemini help	Displays a list of available commands.

Customization

To customize Gemini Code Assist for GitHub experience, repository maintainers can create a configuration file and/or provide a custom code review style guide (such as PEP-8 for Python) by creating and adding files to a .gemini/ folder in the base of the repository. Detailed instructions can be found here.

Limitations & Feedback

Gemini Code Assist may make mistakes. Please leave feedback on any instances where its feedback is incorrect or counter productive. You can react with 👍 and 👎 on @gemini-code-assist comments. If you're interested in giving your feedback about your experience with Gemini Code Assist for Github and other Google products, sign up here.

You can also get AI-powered code generation, chat, as well as code reviews directly in the IDE at no cost with the Gemini Code Assist IDE Extension.

Footnotes

1. Review the Privacy Notices, Generative AI Prohibited Use Policy, Terms of Service, and learn how to configure Gemini Code Assist in GitHub here. Gemini can make mistakes, so double check it and use code with caution. ↩

[gemini-code-assist]

Code Review

This PR updates the documentation for badges within the vertical navigation component. The added details about behavior in submenus and in the collapsed state are a good improvement. I've added one comment to resolve a contradiction in the new text for better clarity. Also, note that while the PR description mentions updated images, no image files were changed in this PR, which might lead to an inconsistency between the text and the visuals.

[github-actions]

[github-actions]

Documentation.
Examples.
Playwright report.

Coverage Reports:

• element-ng
• element-translate-ng

[hbxes]

All good, just one question about the search in the collapsed version, it looks like not active or disabled.

[spliffone]

@panch1739 Just displaying numeric badges looks in the accessible tree unwanted, I think when we use numeric badges should should of a descriptive visual hidden text to explain the context. See for example here: https://github.com/siemens/element/pull/1226/changes#diff-eb217afa9fb35531450a135c4f0c0e637714ccac39288ae3a1008c9ca6ea587aR15

Just a number at the end of the link seems somehow random. What do you think?

[panch1739]

@spliffone well yes, if the number is announced alone, it would be quite random to just hear the number 5...but badges in this case are contextual indicators. Their value should be announced together with the navigation label, as that already provides the context.

For example, in the screenshot:

• If the number has an explicit meaning, that meaning must be included in the accessible name. E.g., Test coverage, 5 issues
• If the number is a generic count, announcing the label followed by the number is sufficient. E.g., Test coverage, 5

Does this help?

[spliffone]

Thanks for the explanation!

@spike-rabbit From my knowledge, we only support the case number is a generic count (Test coverage 5) and I miss the semantic meaning. Especially in cases where a navbar item has a general name e.g. Configuration we should provide the option for an descriptive text of the number badge. Or we solve it by adding tooltips with the information.