Skip to content

IBX-12277: Fixed the app switcher tooltip, hover states and closing behavior - #2022

Open
tischsoic wants to merge 5 commits into
IBX-12207-update-header-stylingfrom
IBX-12277-app-switcher-follow-up
Open

IBX-12277: Fixed the app switcher tooltip, hover states and closing behavior#2022
tischsoic wants to merge 5 commits into
IBX-12207-update-header-stylingfrom
IBX-12277-app-switcher-follow-up

Conversation

@tischsoic

Copy link
Copy Markdown
Contributor
🎫 Issue IBX-12277

Related PRs:

Description:

The three points from the ticket:

  • Tooltip removed from the toggler. The title was static ("Open app switcher") and stayed wrong while the panel was open; aria-label keeps the accessible name.
  • Hover states added — there were none (the only :hover rule repeated text-decoration: none). Both variants are scoped :not(--active) so the current app keeps its own background. The toggler now matches the notification bell: purple on hover and press, no background fill, and a focus ring without a border.
  • The panel no longer closes on clicks elsewhere. The document click handler is gone and the open state is remembered in the ibexa-aui_app-switcher-is-open back-office cookie, read in layout.html.twig — the same mechanism the main menu uses for ibexa-aui_menu-is-expanded. Escape still closes it.

Persisting the state server-side surfaced a latent problem: layouts that empty block header_row (content edit, Page Builder, previews) inherit main_container and therefore still emit the panel. With the cookie set it showed up as a 64px rail with no toggler and no way to close it. One CSS rule keeps it closed wherever .ibexa-main-container is not preceded by the standard header — cheaper than overriding the block in four repos, and it covers future layouts too. The markup stays in the DOM there, exactly as before this ticket.

Not included: the per-app description tooltips in the hover designs — there is no such copy or translation keys for the six apps.

For QA:

  • Header: hover the app switcher button (purple icon, no background), press it (deeper purple), Tab to it (ring, no white outline). No tooltip in any state.
  • Open the panel and hover the apps — light grey, 8px radius; the current app (Cohesivo) keeps its darker grey and must not change on hover.
  • With the panel open, click around the page and navigate elsewhere — it stays open. Escape closes it and returns focus to the button. Both the open and the closed state survive a reload.
  • Content edit, Page Builder and content preview: no app rail on the left.
  • Login page: hover the apps in the dark rail — slightly lighter background; the current app stays white.

Documentation:

tischsoic and others added 5 commits August 20, 2026 12:01
Co-Authored-By: Claude <noreply@anthropic.com>
Co-Authored-By: Claude <noreply@anthropic.com>
Co-Authored-By: Claude <noreply@anthropic.com>
Co-Authored-By: Claude <noreply@anthropic.com>
@tischsoic
tischsoic force-pushed the IBX-12207-update-header-styling branch from 1392445 to ac98a32 Compare August 20, 2026 10:03
@tischsoic
tischsoic force-pushed the IBX-12277-app-switcher-follow-up branch from 3057d65 to ddbf8e7 Compare August 20, 2026 10:03
@sonarqubecloud

Copy link
Copy Markdown

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

6 participants