This is copied over from @rkoller's Gin issue #3541719: Adjust the top bar to the landmark used with the navigation module, and verified by me, Mike, Jurgen, and Bernardo

Problem/Motivation

#3452724: Navigation side bar and top bar should have appropriate aria labels solidifies the landmarks used with the navigation module. With the MR applied to core and using Claro you have two landmarks, Administrative sidebar navigation for the navigation sidebar and Administrative top bar complementary for the top bar.
the node edit form in claro with the voiceover rotor visible showing the landmarks section
While in Gin you only have the landmark for the navigation sidebar, the one for the top bar is missing:
the node edit form in gin with the voiceover rotor visible showing the landmarks section

Steps to reproduce

Proposed resolution

i would align with a few details in claro:

  • change the wrapping element from a div to an aside to make it more semantic
  • add a visually hidden h3 and use that h3 as the label for the aside

the naming of both landmarks for the navigation sidebar and top bar might change at a later point, see #3539715: Review navigation landmark naming

Remaining tasks

User interface changes

API changes

Data model changes

CommentFileSizeAuthor
#5 Screenshot 2026-04-08 at 10.03.00 PM.png188.37 KBbernardm28
#5 Screenshot 2026-04-08 at 10.01.58 PM.png25.46 KBbernardm28
#3 Screenshot 2026-04-07 at 12.07.18 PM.png265.12 KBbernardm28

Issue fork drupal-3583486

Command icon 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:

About issue forks

Comments

mherchel created an issue. See original summary.

mgifford’s picture

mgifford
he/him
Primary language English
commented
Related issues: +#3541719: Adjust the top bar to the landmark used with the navigation module

Great to see this moved over.

bernardm28’s picture

bernardm28 commented
StatusFileSize
new Screenshot 2026-04-07 at 12.07.18 PM.png265.12 KB

imagine without a gin file

Looks like just removing top-bar--gin.html.twig would create some chaos with dark mode.

bernardm28 opened merge request !15389

bernardm28’s picture

bernardm28 commented
StatusFileSize
new Screenshot 2026-04-08 at 10.01.58 PM.png25.46 KB
new Screenshot 2026-04-08 at 10.03.00 PM.png188.37 KB

The image above wasn't the best example because I was confusing the primary aside.
However, here is a better one.

Without the gin toolbar override. In other words, what happens if we delete that file.
low contrast

Removing the gin toolbar creates color contrast issues with the submenus

With gin override.

with gin override

That said, if all we need for the MVP of this issue is to move a step forward. The PR above is similar to the one on the gin project and provides us with a more consistent experience.

bernardm28’s picture

bernardm28 commented
Status: Active » Needs review
bernardm28’s picture

bernardm28 commented

I should add the main color issue lies on the css class gin--navigation-top-bar missing if we remove the twig override.
Other than that DDEV VRT fails because removing the file also gets rid of the gin_breadcrumbs so idk if we are ok losing those.

If we merge the PR above then we don't have to take care of those issues yet and then most of the playrights test pass and the only that failed seem to be a false positive.