more fixes

- Drop the globe icon in the language switcher
- Only show RightArrow on nav menuitem hover
- Fix EU logo colors in light mode

apps/web/app/components/ui/Navigation/DesktopNav.tsx

@@ -51,8 +51,14 @@ function MenuArrow() {
       strokeLinecap="round"
       strokeLinejoin="round"
       aria-hidden="true"
-      /* Mirrors with the page: the arrow points at the reading edge. */
-      className="shrink-0 rtl:-scale-x-100"
+      /* Mirrors with the page: the arrow points at the reading edge. It only
+         appears when the reader hovers or focus-es the link, so a row of
+         always-visible arrows does not announce every entry at once. */
+      className={cx(
+        "shrink-0 rtl:-scale-x-100 opacity-0",
+        "transition-opacity duration-[var(--motion-duration-fast)] ease-[var(--motion-ease-standard)]",
+        "group-hover:opacity-100 group-focus-visible:opacity-100",
+      )}
     >
       <path d="M5 12h13M12.5 6.5L18 12l-5.5 5.5" />
     </svg>
@@ -489,7 +495,7 @@ export function DesktopNav({
                           }
                           onKeyDown={(event) => handleSubLinkKeyDown(event, item.id)}
                           className={cx(
-                            "body-sm-bold flex items-center justify-between gap-md",
+                            "group body-sm-bold flex items-center justify-between gap-md",
                             "rounded-control px-sm py-xs no-underline",
                             "text-[var(--text-primary)]",
                             "hover:bg-[var(--surface-page)] hover:text-[var(--text-accent)]",

apps/web/app/components/ui/Navigation/Navigation.tsx

@@ -45,16 +45,17 @@ export interface NavigationProps {
  * The SHARP-ER site navigation - Figma frame 20:236.
  *
  * Three slots, spread across the bar: the wordmark at the inline start, the
- * mega-menu groups in the middle, and the language globe at the inline end.
+ * mega-menu groups in the middle, and the language control at the inline end.
  * Everything is laid out with logical properties, so the Arabic bar mirrors
- * (logo right, globe left) from `<html dir="rtl">` alone - there is no separate
- * Arabic component, which is what variants 334:526 and 334:764 show.
+ * (logo right, language control left) from `<html dir="rtl">` alone - there is
+ * no separate Arabic component, which is what variants 334:526 and 334:764
+ * show.
  *
  * Below the xl breakpoint the bar collapses to wordmark + hamburger (20:220)
  * and the whole tree moves into a full-screen drawer.
  *
  * EU VISIBILITY: the updated design has no funding badge in the bar - the
- * Actions slot holds the language globe and the theme toggle. The mandatory
+ * Actions slot holds the language control and the theme toggle. The mandatory
  * "Funded by the European Union" lockup is carried by <Footer />, which
  * renders on every page, and by the mobile drawer; it is not dropped from the
  * site.
@@ -122,16 +123,16 @@ export function Navigation({
         />
 
         <div className="flex items-center gap-md">
-          {/* The globe is desktop-only: the mobile bar (20:220) is wordmark +
-              hamburger, and the drawer carries the switcher instead. Visibility
-              lives on this wrapper rather than on the child, because two
-              display utilities on one element are resolved by the order
+          {/* The language control is desktop-only: the mobile bar (20:220) is
+              wordmark + hamburger, and the drawer carries the switcher instead.
+              Visibility lives on this wrapper rather than on the child, because
+              two display utilities on one element are resolved by the order
               Tailwind emits them, not by class-attribute order. */}
           {showLanguageSwitcher && (
             /* Figma 555:3848 sets a 20px rule between the links and the
-               actions, then 24px to the globe. It is decorative, so it is
-               hidden from assistive technology and drawn with a border token
-               rather than a rule element. */
+               actions, then 24px to the language cluster. It is decorative, so
+               it is hidden from assistive technology and drawn with a border
+               token rather than a rule element. */
             <div className="hidden items-center gap-lg xl:flex">
               <span
                 aria-hidden="true"

apps/web/app/components/ui/Navigation/types.ts

@@ -41,7 +41,7 @@ export interface NavigationStrings {
   closeMenu: string;
   /** Accessible name of the logo link. */
   homeLinkLabel: string;
-  /** Accessible name of the language globe, which carries no text of its own. */
+  /** Accessible name of the in-bar language control, which carries no text of its own. */
   languageMenuLabel: string;
   /** The mandatory EU funding statement. */
   euStatement: string;