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,13 +38,72 @@ export function SidebarItem({
     includePaths,
   });
 
-  const anchor = (
+  const sidebarAnchor = (
     <Wrapper label={label}>
-      <a
+      <ItemAnchor
+        href={anchorProps.href}
+        onClick={anchorProps.onClick}
+        className={anchorProps.className}
+        dataCy={dataCy}
+        isOpen={isOpen}
+        isSubMenu={isSubMenu}
+      >
+        {!!icon && <Icon icon={icon} className={clsx('flex [&>svg]:w-4')} />}
+        {(isOpen || isSubMenu) && <span>{label}</span>}
+      </ItemAnchor>
+    </Wrapper>
+  );
+
+  if (isOpen || isSubMenu) return sidebarAnchor;
+
+  return (
+    <SidebarTooltip
+      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(
-          anchorProps.className,
+        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',
@@ -55,17 +115,7 @@ export function SidebarItem({
       )}
       data-cy={dataCy}
     >
-        {!!icon && <Icon icon={icon} className={clsx('flex [&>svg]:w-4')} />}
-        {(isOpen || isSubMenu) && <span>{label}</span>}
+      {children}
     </a>
-    </Wrapper>
-  );
-
-  if (isOpen || isSubMenu) return anchor;
-
-  return (
-    <SidebarTooltip content={<span className="text-sm">{label}</span>}>
-      <span className="w-full">{anchor}</span>
-    </SidebarTooltip>
   );
 }

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