Implement final design for collection editor account dropdown menu (#38767)

app/javascript/mastodon/features/account_edit/components/tag_search.tsx

@@ -4,6 +4,7 @@ import { useCallback, useId, useState } from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 
 import { Combobox } from '@/mastodon/components/form_fields';
+import { ComboboxMenuItem } from '@/mastodon/components/form_fields/combobox_field';
 import { useSearchTags } from '@/mastodon/hooks/useSearchTags';
 import type { TagSearchResult } from '@/mastodon/hooks/useSearchTags';
 import { addFeaturedTags } from '@/mastodon/reducers/slices/profile_edit';
@@ -77,4 +78,6 @@ export const AccountEditTagSearch: FC = () => {
   );
 };
 
-const renderItem = (item: TagSearchResult) => item.label ?? `#${item.name}`;
+const renderItem = (item: TagSearchResult) => (
+  <ComboboxMenuItem>{item.label ?? `#${item.name}`}</ComboboxMenuItem>
+);

app/javascript/mastodon/features/collections/editor/accounts.tsx

@@ -6,6 +6,7 @@ import { useHistory } from 'react-router-dom';
 
 import type { Map as ImmutableMap } from 'immutable';
 
+import { useComboboxItemProps } from '@/mastodon/components/form_fields/combobox_field';
 import type { ApiMutedAccountJSON } from 'mastodon/api_types/accounts';
 import type { ApiCollectionJSON } from 'mastodon/api_types/collections';
 import { AccountListItem } from 'mastodon/components/account_list_item';
@@ -67,18 +68,18 @@ const AddedAccountItem: React.FC<{
 const SuggestedAccountItem: React.FC<{ id: string }> = ({ id }) => {
   const account = useAccount(id);
   const handle = useAccountHandle(account, domain);
+  const comboboxItemProps = useComboboxItemProps();
 
   if (!account) return null;
 
   return (
-    <ListItemWrapper
-      className={classes.suggestion}
-      icon={<Avatar account={account} size={40} />}
-    >
-      <ListItemContent subtitle={handle}>
-        <DisplayName account={account} variant='simple' />
-      </ListItemContent>
-    </ListItemWrapper>
+    <li {...comboboxItemProps} className={classes.suggestion}>
+      <ListItemWrapper icon={<Avatar account={account} size={40} />}>
+        <ListItemContent subtitle={handle}>
+          <DisplayName account={account} variant='simple' />
+        </ListItemContent>
+      </ListItemWrapper>
+    </li>
   );
 };
 
@@ -158,11 +159,13 @@ const renderGroupTitle = (groupKey: GroupKey, titleId: string) => {
   }
 
   return (
-    <ListItemWrapper className={classes.suggestionGroup}>
-      <ListItemContent id={titleId} subtitle={description}>
-        {title}
-      </ListItemContent>
-    </ListItemWrapper>
+    <li role='presentation'>
+      <ListItemWrapper className={classes.suggestionGroup}>
+        <ListItemContent id={titleId} subtitle={description}>
+          {title}
+        </ListItemContent>
+      </ListItemWrapper>
+    </li>
   );
 };
 

app/javascript/mastodon/features/collections/editor/details.tsx

@@ -6,6 +6,7 @@ import { useHistory } from 'react-router-dom';
 
 import { isFulfilled } from '@reduxjs/toolkit';
 
+import { ComboboxMenuItem } from '@/mastodon/components/form_fields/combobox_field';
 import { languages } from '@/mastodon/initial_state';
 import {
   hasSpecialCharacters,
@@ -373,7 +374,9 @@ const TopicField: React.FC = () => {
   );
 };
 
-const renderTagItem = (item: TagSearchResult) => item.label ?? `#${item.name}`;
+const renderTagItem = (item: TagSearchResult) => (
+  <ComboboxMenuItem>{item.label ?? `#${item.name}`}</ComboboxMenuItem>
+);
 
 const LanguageField: React.FC = () => {
   const dispatch = useAppDispatch();

app/javascript/mastodon/features/collections/editor/styles.module.scss

@@ -60,17 +60,20 @@
 }
 
 .suggestion {
-  padding: 4px 0;
+  cursor: pointer;
+  user-select: none;
+  border-bottom: 1px solid var(--color-border-primary);
 
-  [aria-disabled='true'] & {
+  &[data-highlighted='true'] {
+    background: var(--color-bg-overlay-highlight);
+  }
+
+  &[aria-disabled='true'] {
     opacity: 0.6;
+    cursor: not-allowed;
   }
 }
 
 .suggestionGroup {
-  padding: 4px 0;
-
-  // Undo default group styles:
-  font-weight: 400;
-  text-transform: none;
+  padding-bottom: 4px;
 }