Navigation item IDs and classes are inconsistent in multilingual sites [#3415455]

Problem/Motivation

Item IDs and classes are being generated directly from the item title in some scenarios.
That leads to inconsistent values that makes unpredictable the HTML markup of the navigation bar.

Steps to reproduce

Install a fresh Umami site and enable Navigation module
Go to the home page and confirm that Shortcuts item has a star icon (Class is .toolbar-button--shortcuts)
Go to the Spanish homepage https://mysite.example/es
Confirm that Shortcuts icon is broken (Class is .toolbar-button--atajos)

It happens not only in this menu item, but this is the most visible situation. Other menu items are being altered as well by the language switch.

Proposed resolution

Find a way to have consistent navigation items properties across the different languages in multilingual sites

Remaining tasks

Fix issue
Add tests

User interface changes

None

API changes

None

Data model changes

Issue fork navigation-3415455

Show commands

Start within a Git clone of the project using the version control instructions.

Add & fetch this issue fork’s repository

Or, if you do not have SSH keys set up on git.drupalcode.org:

Add & fetch this issue fork’s repository

3415455-navigation-item-ids changes, plain diff MR !172
Check out this branch for the first time

Check out existing branch, if you already have it locally

About issue forks

Comments

Comment #1

18 January 2024 at 09:02

plopesc created an issue. See original summary.

Comment #2

plopesc

he/him

Spanish

commented 18 January 2024 at 09:04

Title:	Navigation item IDs and classes are inconsistent in multilingual sites	» [PP-1] Navigation item IDs and classes are inconsistent in multilingual sites
Status:	Active	» Postponed
Parent issue:		» #3415311: Decouple from Toolbar module

Postponing on #3415311: Decouple from Toolbar module because presumably will be necessary to make changes on the tree manipulators.

Comment #3

akhil babu

he/him

commented 18 January 2024 at 09:38

Shortcut icon will also break if the title of the 'Shortcut' block is modified. This happens because ShortcutsNavigationBlock uses the title of the block as the class name. When the title changes, the class name also changes, which breaks the style.

  /**
   * {@inheritdoc}
   */
  public function build(): array {
    $shortcuts_items = [
      [
        'title' => $this->configuration['label'],
        'class' => $this->configuration['label'],
      ],
    ];

One solution is to use the 'id' of the block as the class name instead of the title. However, the navigation UI permits adding multiple blocks of the same type to the sidebar. If a user adds a second 'Shortcuts' block, the id of that block would be 'shortcuts_1,' and it will break the icon of the second block.