From db15c8b6cc17c5a22a266e3fa8d22ea0d89b75dd Mon Sep 17 00:00:00 2001
From: Cyril <c.gromoff@gmail.com>
Date: Tue, 27 Jan 2026 10:14:32 +0100
Subject: [PATCH] =?UTF-8?q?=E2=99=BF=EF=B8=8F(frontend)=20adjust=20visual-?=
 =?UTF-8?q?only=20tooltip=20a11y=20labels?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Ensure tooltips stay visual while exposing correct aria-labels.
---
 CHANGELOG.md                                  |  9 +--
 src/frontend/src/layout/Header.tsx            | 39 ++++++-----
 src/frontend/src/locales/en/global.json       |  2 +-
 src/frontend/src/locales/fr/global.json       |  2 +-
 src/frontend/src/locales/nl/global.json       |  2 +-
 .../src/primitives/VisualOnlyTooltip.tsx      | 69 ++++++++++++++-----
 6 files changed, 83 insertions(+), 40 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 2ad5ac5f..bd853728 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -8,14 +8,15 @@ and this project adheres to
 
 ## [Unreleased]
 
+### Changed
+
+- ♿️(frontend) adjust visual-only tooltip a11y labels #910
+- ♿(frontend) adjust sr announcements for idle disconnect timer #908
+
 ### Fixed
 
 - 🔒️(frontend) fix an XSS vulnerability on the recording page #911
 
-### Changed
-
-- ♿(frontend) adjust sr announcements for idle disconnect timer #908
-
 ## [1.4.0] - 2026-01-25
 
 ### Added
diff --git a/src/frontend/src/layout/Header.tsx b/src/frontend/src/layout/Header.tsx
index b628eb1e..df247b29 100644
--- a/src/frontend/src/layout/Header.tsx
+++ b/src/frontend/src/layout/Header.tsx
@@ -10,6 +10,7 @@ import { FeedbackBanner } from '@/components/FeedbackBanner'
 import { Menu } from '@/primitives/Menu'
 import { MenuList } from '@/primitives/MenuList'
 import { LoginButton } from '@/components/LoginButton'
+import { VisualOnlyTooltip } from '@/primitives/VisualOnlyTooltip'
 
 import { useLoginHint } from '@/hooks/useLoginHint'
 
@@ -90,6 +91,11 @@ export const Header = () => {
   const isTermsOfService = useMatchesRoute('termsOfService')
   const isRoom = useMatchesRoute('room')
   const { user, isLoggedIn, logout } = useUser()
+  const userLabel = user?.full_name || user?.email
+  const loggedInTooltip = t('loggedInUserTooltip')
+  const loggedInAriaLabel = userLabel
+    ? `${loggedInTooltip} ${userLabel}`
+    : loggedInTooltip
 
   return (
     <>
@@ -153,23 +159,24 @@ export const Header = () => {
                 )}
               {!!user && (
                 <Menu>
-                  <Button
-                    size="sm"
-                    variant="secondaryText"
-                    tooltip={t('loggedInUserTooltip')}
-                    tooltipType="delayed"
-                  >
-                    <span
-                      className={css({
-                        overflow: 'hidden',
-                        textOverflow: 'ellipsis',
-                        whiteSpace: 'nowrap',
-                        maxWidth: '350px',
-                        display: { base: 'none', xsm: 'block' },
-                      })}
+                  <Button size="sm" variant="secondaryText">
+                    <VisualOnlyTooltip
+                      tooltip={loggedInTooltip}
+                      ariaLabel={loggedInAriaLabel}
+                      tooltipPosition="bottom"
                     >
-                      {user?.full_name || user?.email}
-                    </span>
+                      <span
+                        className={css({
+                          overflow: 'hidden',
+                          textOverflow: 'ellipsis',
+                          whiteSpace: 'nowrap',
+                          maxWidth: '350px',
+                          display: { base: 'none', xsm: 'block' },
+                        })}
+                      >
+                        {user?.full_name || user?.email}
+                      </span>
+                    </VisualOnlyTooltip>
                   </Button>
                   <MenuList
                     variant={'light'}
diff --git a/src/frontend/src/locales/en/global.json b/src/frontend/src/locales/en/global.json
index 43a15952..c9adbd13 100644
--- a/src/frontend/src/locales/en/global.json
+++ b/src/frontend/src/locales/en/global.json
@@ -13,7 +13,7 @@
     "heading": "You don't have the permission to view this page"
   },
   "loading": "Loading…",
-  "loggedInUserTooltip": "Logged in as…",
+  "loggedInUserTooltip": "Logged in as ",
   "login": {
     "buttonLabel": "Login",
     "proconnectButtonLabel": "Login with ProConnect",
diff --git a/src/frontend/src/locales/fr/global.json b/src/frontend/src/locales/fr/global.json
index e438e580..051e95ee 100644
--- a/src/frontend/src/locales/fr/global.json
+++ b/src/frontend/src/locales/fr/global.json
@@ -13,7 +13,7 @@
     "heading": "Accès interdit"
   },
   "loading": "Chargement…",
-  "loggedInUserTooltip": "Connecté en tant que…",
+  "loggedInUserTooltip": "Connecté en tant que ",
   "login": {
     "buttonLabel": "Se connecter",
     "proconnectButtonLabel": "S'identifier avec ProConnect",
diff --git a/src/frontend/src/locales/nl/global.json b/src/frontend/src/locales/nl/global.json
index 7360975a..292d97a3 100644
--- a/src/frontend/src/locales/nl/global.json
+++ b/src/frontend/src/locales/nl/global.json
@@ -13,7 +13,7 @@
     "heading": "U hebt geen toestemming om deze pagina te bekijken"
   },
   "loading": "Laden ...",
-  "loggedInUserTooltip": "Ingelogd als ...",
+  "loggedInUserTooltip": "Ingelogd als ",
   "login": {
     "buttonLabel": "Log in",
     "proconnectButtonLabel": "Log in met Proconnect",
diff --git a/src/frontend/src/primitives/VisualOnlyTooltip.tsx b/src/frontend/src/primitives/VisualOnlyTooltip.tsx
index 8e99c9d1..1d196f77 100644
--- a/src/frontend/src/primitives/VisualOnlyTooltip.tsx
+++ b/src/frontend/src/primitives/VisualOnlyTooltip.tsx
@@ -1,10 +1,18 @@
-import { type ReactNode, useRef, useState } from 'react'
+import {
+  type ReactElement,
+  cloneElement,
+  isValidElement,
+  useRef,
+  useState,
+} from 'react'
 import { createPortal } from 'react-dom'
 import { css } from '@/styled-system/css'
 
 export type VisualOnlyTooltipProps = {
-  children: ReactNode
+  children: ReactElement
   tooltip: string
+  ariaLabel?: string
+  tooltipPosition?: 'top' | 'bottom'
 }
 
 /**
@@ -20,32 +28,50 @@ export type VisualOnlyTooltipProps = {
 export const VisualOnlyTooltip = ({
   children,
   tooltip,
+  ariaLabel,
+  tooltipPosition = 'top',
 }: VisualOnlyTooltipProps) => {
-  const wrapperRef = useRef<HTMLDivElement>(null)
   const [isVisible, setIsVisible] = useState(false)
+  const wrapperRef = useRef<HTMLDivElement>(null)
+  const [position, setPosition] = useState<{
+    top: number
+    left: number
+  } | null>(null)
 
-  const getPosition = () => {
-    if (!wrapperRef.current) return null
+  const isBottom = tooltipPosition === 'bottom'
+
+  const showTooltip = () => {
+    if (!wrapperRef.current) return
     const rect = wrapperRef.current.getBoundingClientRect()
-    return {
-      top: rect.top - 8,
+    setPosition({
+      top: isBottom ? rect.bottom + 8 : rect.top - 8,
       left: rect.left + rect.width / 2,
-    }
+    })
+    setIsVisible(true)
+  }
+
+  const hideTooltip = () => {
+    setIsVisible(false)
+    setPosition(null)
   }
 
-  const position = getPosition()
   const tooltipData = isVisible && position ? { isVisible, position } : null
+  const wrappedChild = isValidElement(children)
+    ? cloneElement(children, {
+        ...(ariaLabel ? { 'aria-label': ariaLabel } : {}),
+      })
+    : children
 
   return (
     <>
       <div
         ref={wrapperRef}
-        onMouseEnter={() => setIsVisible(true)}
-        onMouseLeave={() => setIsVisible(false)}
-        onFocus={() => setIsVisible(true)}
-        onBlur={() => setIsVisible(false)}
+        onMouseEnter={showTooltip}
+        onMouseLeave={hideTooltip}
+        onFocus={showTooltip}
+        onBlur={hideTooltip}
       >
-        {children}
+        {wrappedChild}
       </div>
       {tooltipData &&
         createPortal(
@@ -66,17 +92,26 @@ export const VisualOnlyTooltip = ({
               '&::after': {
                 content: '""',
                 position: 'absolute',
-                top: '100%',
                 left: '50%',
                 transform: 'translateX(-50%)',
                 border: '4px solid transparent',
-                borderTopColor: 'primaryDark.100',
+                ...(isBottom
+                  ? {
+                      bottom: '100%',
+                      borderBottomColor: 'primaryDark.100',
+                    }
+                  : {
+                      top: '100%',
+                      borderTopColor: 'primaryDark.100',
+                    }),
               },
             })}
             style={{
               top: `${tooltipData.position.top}px`,
               left: `${tooltipData.position.left}px`,
-              transform: 'translate(-50%, -100%)',
+              transform: isBottom
+                ? 'translate(-50%, 0)'
+                : 'translate(-50%, -100%)',
             }}
           >
             {tooltip}