fix(sidebar): high contrast styles, single option link [EE-5666] (#10485)

app/assets/css/vendor-override.css

@@ -364,6 +364,7 @@ input:-webkit-autofill {
 .sidebar.tippy-box[data-placement^='right'] > .tippy-arrow {
   width: 12px;
   height: 12px;
+  margin-left: -1px;
 }
 
 .sidebar.tippy-box[data-placement^='right'] > .tippy-arrow:before {
@@ -375,6 +376,10 @@ input:-webkit-autofill {
   border-right: 8px solid var(--ui-gray-true-9);
 }
 
+[theme='highcontrast'] .sidebar.tippy-box[data-placement^='right'] > .tippy-arrow:before {
+  border-right: 8px solid var(--ui-white);
+}
+
 .sidebar .tippy-content {
   white-space: nowrap;
 }

app/react/sidebar/SidebarItem/SidebarItem.tsx

@@ -1,5 +1,6 @@
 import { Icon as IconTest } from 'lucide-react';
 import clsx from 'clsx';
+import { MouseEventHandler, PropsWithChildren } from 'react';
 
 import { AutomationTestingProps } from '@/types';
 
@@ -37,35 +38,84 @@ export function SidebarItem({
     includePaths,
   });
 
-  const anchor = (
+  const sidebarAnchor = (
     <Wrapper label={label}>
-      <a
+      <ItemAnchor
         href={anchorProps.href}
         onClick={anchorProps.onClick}
-        className={clsx(
+        className={anchorProps.className}
-          anchorProps.className,
+        dataCy={dataCy}
-          'text-inherit no-underline hover:text-inherit hover:no-underline focus:text-inherit focus:no-underline',
+        isOpen={isOpen}
-          'flex h-8 w-full flex-1 items-center space-x-4 rounded-md text-sm',
+        isSubMenu={isSubMenu}
-          'transition-colors duration-200 hover:bg-blue-5/20 be:hover:bg-gray-5/20 th-dark:hover:bg-gray-true-5/20',
-          {
-            // submenu items are always expanded (in a tooltip or in the sidebar)
-            'w-full justify-start px-3': isOpen || isSubMenu,
-            'w-8 justify-center': !isOpen && !isSubMenu,
-          }
-        )}
-        data-cy={dataCy}
       >
         {!!icon && <Icon icon={icon} className={clsx('flex [&>svg]:w-4')} />}
         {(isOpen || isSubMenu) && <span>{label}</span>}
-      </a>
+      </ItemAnchor>
     </Wrapper>
   );
 
-  if (isOpen || isSubMenu) return anchor;
+  if (isOpen || isSubMenu) return sidebarAnchor;
 
   return (
-    <SidebarTooltip content={<span className="text-sm">{label}</span>}>
+    <SidebarTooltip
-      <span className="w-full">{anchor}</span>
+      content={
+        <div className="bg-blue-8 be:bg-gray-8 th-dark:bg-gray-true-8 th-highcontrast:bg-black th-highcontrast:border th-highcontrast:border-solid th-highcontrast:border-white rounded">
+          <Wrapper label={label}>
+            <ItemAnchor
+              href={anchorProps.href}
+              onClick={anchorProps.onClick}
+              className={anchorProps.className}
+              dataCy={dataCy}
+              isOpen={isOpen}
+              isSubMenu={isSubMenu}
+            >
+              <span className="px-3">{label}</span>
+            </ItemAnchor>
+          </Wrapper>
+        </div>
+      }
+    >
+      <span className="w-full">{sidebarAnchor}</span>
     </SidebarTooltip>
   );
 }
+
+type ItemAnchorProps = {
+  href?: string;
+  onClick: MouseEventHandler<unknown>;
+  className: string;
+  isOpen: boolean;
+  isSubMenu: boolean;
+  dataCy?: string;
+};
+
+function ItemAnchor({
+  href,
+  onClick,
+  className,
+  isOpen,
+  isSubMenu,
+  dataCy,
+  children,
+}: PropsWithChildren<ItemAnchorProps>) {
+  return (
+    <a
+      href={href}
+      onClick={onClick}
+      className={clsx(
+        className,
+        'text-inherit no-underline hover:text-inherit hover:no-underline focus:text-inherit focus:no-underline',
+        'flex h-8 w-full flex-1 items-center space-x-4 rounded-md text-sm',
+        'transition-colors duration-200 hover:bg-blue-5/20 be:hover:bg-gray-5/20 th-dark:hover:bg-gray-true-5/20',
+        {
+          // submenu items are always expanded (in a tooltip or in the sidebar)
+          'w-full justify-start px-3': isOpen || isSubMenu,
+          'w-8 justify-center': !isOpen && !isSubMenu,
+        }
+      )}
+      data-cy={dataCy}
+    >
+      {children}
+    </a>
+  );
+}

app/react/sidebar/SidebarItem/SidebarParent.tsx

@@ -71,7 +71,7 @@ export function SidebarParent({
             )}
           >
             <Icon icon={icon} />
-            {isSidebarOpen && <span className="ml-4">{title}</span>}
+            {isSidebarOpen && <span className="pl-4">{title}</span>}
           </Link>
         </button>
         {isSidebarOpen && (
@@ -123,7 +123,7 @@ export function SidebarParent({
           <li className="flex items-center space-x-2 text-sm mb-1">
             <span>{title}</span>
           </li>
-          <div className="bg-blue-8/50 be:bg-gray-8 th-dark:bg-gray-true-8 rounded">
+          <div className="bg-blue-8 be:bg-gray-8 th-dark:bg-gray-true-8 th-highcontrast:bg-black th-highcontrast:border th-highcontrast:border-solid th-highcontrast:border-white rounded">
             {children}
           </div>
         </ul>

app/react/sidebar/SidebarItem/SidebarTooltip.tsx

@@ -8,7 +8,7 @@ type Props = {
 export function SidebarTooltip({ children, content }: Props) {
   return (
     <Tippy
-      className="sidebar !rounded-md bg-blue-9 p-3 !opacity-100 be:bg-gray-9 th-dark:bg-gray-true-9"
+      className="sidebar !rounded-md bg-blue-9 p-3 !opacity-100 be:bg-gray-9 th-dark:bg-gray-true-9 th-highcontrast:bg-black th-highcontrast:border th-highcontrast:border-solid th-highcontrast:border-white"
       content={content}
       delay={[0, 0]}
       duration={[0, 0]}

app/react/sidebar/SidebarItem/Wrapper.tsx

@@ -15,9 +15,8 @@ export function Wrapper({
   return (
     <li
       className={clsx(
-        'flex',
         className,
-        'min-h-8 text-gray-3 [&>a]:text-inherit [&>a]:hover:text-inherit [&>a]:hover:no-underline'
+        'flex min-h-8 text-gray-3 th-highcontrast:text-white [&>a]:text-inherit [&>a]:hover:text-inherit [&>a]:hover:no-underline'
       )}
       aria-label={label}
       // eslint-disable-next-line react/jsx-props-no-spreading