frontend/src/components/ListCard/ListCard.tsx

@@ -2,6 +2,7 @@ import type { HTMLAttributes, CSSProperties } from 'react';
 
 export interface ListCardProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'> {
     title: string;
+    subtitle?: string;
     onRemove?: () => void;
 }
 
@@ -9,7 +10,8 @@ const baseClasses = [
     'px-(--padding-md) py-(--padding-md)',
     'bg-sky-35 border border-sky-100 rounded-(--border-radius-md)',
     'flex items-center justify-between',
-    'focus:border-primary focus:outline focus:outline-sky-35 focus:outline-[length:var(--border-width-lg)]',
+    'group text-base-ink-strong hover:bg-sky-70 hover:text-base-ink-max focus-visible:text-base-ink-max',
+    'focus-visible:border-primary focus-visible:border-[length:var(--border-width-sm)] focus-visible:outline focus-visible:outline-sky-100 focus-visible:outline-[length:var(--border-width-lg)]',
 ].join(' ');
 
 const iconStyles: CSSProperties = {
@@ -34,17 +36,27 @@ function RemoveIcon({ style }: { style?: CSSProperties }) {
     );
 }
 
-export default function ListCard({ title, onRemove, className = '', ...props }: ListCardProps) {
+export default function ListCard({ title, subtitle = '', onRemove, className = '', ...props }: ListCardProps) {
     const classes = [baseClasses, className].filter(Boolean).join(' ');
 
+    const handleKeyDown = (e: React.KeyboardEvent) => {
+        if (e.key === 'Enter' && onRemove) {
+            onRemove();
+        }
+    };
+
     return (
-        <div className={classes} {...props}>
-            <span className="body-light-sm text-base-ink-strong">{title}</span>
+        <div className={classes} {...props} tabIndex={0} onKeyDown={handleKeyDown}>
+            <div>
+                <div className="body-light-sm">{title}</div>
+                {subtitle && <div className="body-light-sm">{subtitle}</div>}
+            </div>
             {onRemove && (
                 <button
                     type="button"
+                    tabIndex={-1}
                     onClick={onRemove}
-                    className="shrink-0 ml-(--spacing-sm) text-base-ink-placeholder hover:text-primary focus:text-primary focus:outline-none cursor-pointer"
+                    className="shrink-0 ml-(--spacing-sm) text-base-ink-placeholder group-hover:text-base-ink-max group-focus-visible:text-base-ink-max focus-visible:outline-none cursor-pointer"
                 >
                     <RemoveIcon style={iconStyles} />
                 </button>

frontend/src/components/ListItem/ListItem.tsx

@@ -31,11 +31,13 @@ function CheckmarkIcon() {
 
 const baseClasses = 'w-full px-(--padding-md) py-(--padding-md) cursor-pointer flex items-center justify-between';
 
-const defaultStateClasses = 'bg-base-canvas text-base-ink-strong hover:bg-sky-100 hover:text-primary focus:bg-sky-100 focus:text-primary focus:outline-none';
+const defaultStateClasses =
+    'bg-base-canvas text-base-ink-strong hover:bg-sky-100 hover:text-base-ink-max focus-visible:bg-sky-100 focus-visible:text-primary focus-visible:outline-none';
 
-const selectedStateClasses = 'bg-base-canvas text-base-ink-placeholder';
+const selectedStateClasses =
+    'bg-base-canvas text-base-ink-placeholder hover:bg-sky-100 hover:text-base-ink-max focus-visible:bg-sky-100 focus-visible:text-primary focus-visible:outline-none';
 
-const focusedStateClasses = 'bg-sky-100 text-primary';
+const focusedStateClasses = 'bg-sky-100 text-base-ink-max';
 
 export default function ListItem({
     title,
@@ -54,13 +56,7 @@ export default function ListItem({
     const classes = [baseClasses, getStateClasses(), className].filter(Boolean).join(' ');
 
     return (
-        <div
-            className={classes}
-            tabIndex={-1}
-            role="option"
-            aria-selected={selected}
-            {...props}
-        >
+        <div className={classes} tabIndex={-1} role="option" aria-selected={selected} {...props}>
             <div>
                 <div className="body-normal-md">{title}</div>
                 {subtitle && <div className="body-light-sm">{subtitle}</div>}

frontend/src/components/ParticipantPicker/ParticipantPicker.tsx

@@ -63,7 +63,12 @@ export default function ParticipantPicker({
             {selectedOptions.length > 0 && (
                 <div className="flex flex-col gap-(--spacing-sm)">
                     {selectedOptions.map((option) => (
-                        <ListCard key={option.value} title={option.label} onRemove={() => handleRemove(option.value)} />
+                        <ListCard
+                            key={option.value}
+                            title={option.label}
+                            subtitle={option.subtitle}
+                            onRemove={() => handleRemove(option.value)}
+                        />
                     ))}
                 </div>
             )}

frontend/src/components/SearchResultList/SearchResultList.tsx

@@ -35,11 +35,7 @@ export default function SearchResultList({
     const isSelected = (value: string) => selectedValues.includes(value);
 
     return (
-        <div
-            className={containerClasses}
-            style={{ maxHeight }}
-            onMouseDown={(e) => e.preventDefault()}
-        >
+        <div className={containerClasses} style={{ maxHeight }} onMouseDown={(e) => e.preventDefault()}>
             {options.length > 0 ? (
                 options.map((option, index) => (
                     <div
@@ -49,6 +45,9 @@ export default function SearchResultList({
                                 itemRefs.current[index] = el;
                             }
                         }}
+                        className={
+                            index > 0 ? 'border-t border-base-ink-soft [border-top-width:var(--border-width-sm)]' : ''
+                        }
                     >
                         <ListItem
                             title={option.label}