Increase clickable area around collection items, refactor ListItem component (#38776)

app/javascript/mastodon/components/list_item/index.tsx

@@ -1,6 +1,8 @@
 import classNames from 'classnames';
 import { Link } from 'react-router-dom';
 
+import { polymorphicForwardRef } from '@/types/polymorphic';
+
 import classes from './styles.module.scss';
 
 interface WrapperProps extends Omit<
@@ -8,7 +10,7 @@ interface WrapperProps extends Omit<
   'title'
 > {
   icon?: React.ReactNode;
-  iconEnd?: React.ReactNode;
+  sideContent?: React.ReactNode;
 }
 
 /**
@@ -20,7 +22,7 @@ interface WrapperProps extends Omit<
  */
 export const ListItemWrapper: React.FC<WrapperProps> = ({
   icon,
-  iconEnd,
+  sideContent,
   children,
   className,
   ...otherProps
@@ -29,69 +31,68 @@ export const ListItemWrapper: React.FC<WrapperProps> = ({
     <div {...otherProps} className={classNames(classes.wrapper, className)}>
       {icon}
       <div>{children}</div>
-      {iconEnd && <span className={classes.iconEnd}>{iconEnd}</span>}
+      {sideContent && (
+        <span className={classes.sideContent}>{sideContent}</span>
+      )}
     </div>
   );
 };
 
-interface WithSubtitle {
+interface ContentProps {
   subtitle?: React.ReactNode;
+  subtitleId?: string;
 }
 
-interface ContentProps
-  extends React.ComponentPropsWithoutRef<'h3'>, WithSubtitle {}
-
-export const ListItemContent: React.FC<ContentProps> = ({
-  subtitle,
-  children,
-  ...otherProps
-}) => {
-  return (
-    <>
-      <h3 className={classes.title} {...otherProps}>
-        {children}
-      </h3>
-      {subtitle && <div className={classes.subtitle}>{subtitle}</div>}
-    </>
-  );
-};
+export const ListItemContent = polymorphicForwardRef<'h3', ContentProps>(
+  (
+    { as: Component = 'h3', subtitle, subtitleId, children, ...otherProps },
+    ref,
+  ) => {
+    return (
+      <>
+        <Component className={classes.title} ref={ref} {...otherProps}>
+          {children}
+        </Component>
+        {subtitle && (
+          <div className={classes.subtitle} id={subtitleId}>
+            {subtitle}
+          </div>
+        )}
+      </>
+    );
+  },
+);
 
 interface LinkProps
-  extends React.ComponentPropsWithoutRef<typeof Link>, WithSubtitle {}
+  extends React.ComponentPropsWithoutRef<typeof Link>, ContentProps {}
 
-export const ListItemLink: React.FC<LinkProps> = ({
-  subtitle,
-  children,
-  className,
-  ...otherProps
-}) => {
-  return (
-    <ListItemContent subtitle={subtitle}>
-      <Link className={classNames(className, 'focusable')} {...otherProps}>
-        {children}
-      </Link>
-    </ListItemContent>
-  );
-};
+export const ListItemLink = polymorphicForwardRef<'h3', LinkProps>(
+  ({ as, subtitle, children, className, ...otherProps }, ref) => {
+    return (
+      <ListItemContent ref={ref} as={as} subtitle={subtitle}>
+        <Link className={classNames(className, 'focusable')} {...otherProps}>
+          {children}
+        </Link>
+      </ListItemContent>
+    );
+  },
+);
 
 interface ButtonProps
-  extends React.ComponentPropsWithoutRef<'button'>, WithSubtitle {}
+  extends React.ComponentPropsWithoutRef<'button'>, ContentProps {}
 
-export const ListItemButton: React.FC<ButtonProps> = ({
-  subtitle,
-  children,
-  className,
-  ...otherProps
-}) => {
-  return (
-    <ListItemContent subtitle={subtitle}>
-      <button
-        type='button'
-        className={classNames(className, 'focusable')}
-        {...otherProps}
-      >
-        {children}
-      </button>
-    </ListItemContent>
-  );
-};
+export const ListItemButton = polymorphicForwardRef<'h3', ButtonProps>(
+  ({ as, subtitle, children, className, ...otherProps }, ref) => {
+    return (
+      <ListItemContent as={as} ref={ref} subtitle={subtitle}>
+        <button
+          type='button'
+          className={classNames(className, 'focusable')}
+          {...otherProps}
+        >
+          {children}
+        </button>
+      </ListItemContent>
+    );
+  },
+);

app/javascript/mastodon/components/list_item/list_item.stories.tsx

@@ -5,6 +5,8 @@ import KeyboardArrowDownIcon from '@/material-icons/400-24px/keyboard_arrow_down
 import VisibilityIcon from '@/material-icons/400-24px/visibility.svg?react';
 import VisibilityOffIcon from '@/material-icons/400-24px/visibility_off.svg?react';
 
+import { AvatarById } from '../avatar';
+import { Button } from '../button';
 import { Icon } from '../icon';
 
 import {
@@ -36,7 +38,7 @@ export const WithButton: Story = {
   render: () => (
     <ListItemWrapper
       icon={<Icon icon={VisibilityOffIcon} id='visibility' />}
-      iconEnd={<Icon icon={KeyboardArrowDownIcon} id='down' />}
+      sideContent={<Icon icon={KeyboardArrowDownIcon} id='down' />}
     >
       <ListItemButton subtitle='You’ve blocked or muted these users'>
         3 hidden accounts
@@ -49,9 +51,22 @@ export const WithLink: Story = {
   render: () => (
     <ListItemWrapper
       icon={<Icon icon={VisibilityIcon} id='visibility' />}
-      iconEnd={<Icon icon={ChevronRightIcon} id='right' />}
+      sideContent={<Icon icon={ChevronRightIcon} id='right' />}
     >
       <ListItemLink to='/'>View more</ListItemLink>
     </ListItemWrapper>
   ),
 };
+
+export const WithInteractiveSideContent: Story = {
+  render: () => (
+    <ListItemWrapper
+      icon={<AvatarById accountId='1' size={40} />}
+      sideContent={<Button compact>Follow</Button>}
+    >
+      <ListItemLink to='/' subtitle='@test@example.com'>
+        Test account
+      </ListItemLink>
+    </ListItemWrapper>
+  ),
+};

app/javascript/mastodon/components/list_item/styles.module.scss

@@ -1,11 +1,15 @@
 .wrapper {
+  --list-item-padding: 16px;
+  --list-item-padding-block: var(--list-item-padding);
+  --list-item-gap: 12px;
+
   box-sizing: border-box;
   position: relative;
   display: flex;
   align-items: center;
   width: 100%;
-  gap: 12px;
-  padding: 16px;
+  gap: var(--list-item-gap);
+  padding: var(--list-item-padding-block) var(--list-item-padding);
   font-size: 15px;
   color: var(--color-text-primary);
 }
@@ -29,7 +33,7 @@
     &::before {
       content: '';
       position: absolute;
-      inset: 0;
+      inset: var(--clickable-area-spread, 0);
     }
   }
 }
@@ -39,6 +43,32 @@
   color: var(--color-text-secondary);
 }
 
-.iconEnd {
+.sideContent {
+  display: flex;
+  gap: var(--list-item-gap);
+  align-self: stretch;
+  align-items: center;
   margin-inline-start: auto;
+
+  &:has(button, a) {
+    // If the sideContent has interactive children, move it
+    // above the clickable area of the .title content
+    position: relative;
+    z-index: 1;
+
+    // Cover up the .title content's clickable area in the
+    // padding box around the sideContent
+    &::before {
+      content: '';
+      position: absolute;
+      inset-block: calc(-1 * var(--list-item-padding-block));
+      inset-inline: calc(-1 * var(--list-item-padding));
+      z-index: -1;
+    }
+  }
+
+  // Improve vertical alignment of slotted icons
+  & > .icon {
+    vertical-align: middle;
+  }
 }

app/javascript/mastodon/components/truncated_list/index.tsx

@@ -1,4 +1,4 @@
-import { useCallback, useState } from 'react';
+import { useCallback, useId, useState } from 'react';
 
 import { Article } from '@/mastodon/components/scrollable_list/components';
 import KeyboardArrowDownIcon from '@/material-icons/400-24px/keyboard_arrow_down.svg?react';
@@ -42,6 +42,8 @@ export const TruncatedListItems = <TListItem,>({
   toggleButton,
   renderListItem,
 }: TruncatedListProps<TListItem>) => {
+  const toggleButtonId = useId();
+  const toggleButtonDescId = `${toggleButtonId}-desc`;
   const [showTruncatedItems, setShowTruncatedItems] = useState(false);
   const toggleTruncatedItems = useCallback(() => {
     setShowTruncatedItems((prev) => !prev);
@@ -65,14 +67,19 @@ export const TruncatedListItems = <TListItem,>({
         });
       })}
       {hasHiddenAccounts && (
-        <Article aria-posinset={initialListSize} aria-setsize={totalListLength}>
+        <Article
+          aria-posinset={initialListSize}
+          aria-setsize={totalListLength}
+          aria-labelledby={toggleButtonId}
+          aria-describedby={toggleButtonDescId}
+        >
           <ListItemWrapper
             icon={
               toggleButton.icon && (
                 <Icon id='toggle-icon' icon={toggleButton.icon} />
               )
             }
-            iconEnd={
+            sideContent={
               <Icon
                 id='open-status'
                 icon={
@@ -84,6 +91,8 @@ export const TruncatedListItems = <TListItem,>({
             }
           >
             <ListItemButton
+              id={toggleButtonId}
+              subtitleId={toggleButtonDescId}
               aria-expanded={showTruncatedItems}
               onClick={toggleTruncatedItems}
               subtitle={toggleButton.subtitle}

app/javascript/mastodon/features/collections/components/collection_list_item.module.scss

@@ -1,8 +1,7 @@
 .wrapper {
-  display: flex;
-  align-items: start;
-  padding: 12px 16px;
-  gap: 16px;
+  --list-item-padding: 16px;
+  --list-item-padding-block: 12px;
+  --list-item-gap: 16px;
 
   &:not(.wrapperWithoutBorder) {
     border-bottom: 1px solid var(--color-border-primary);
@@ -10,8 +9,10 @@
 }
 
 .menuButton {
+  align-self: start;
   padding: 4px;
-  margin-top: -2px;
+  margin-top: -4px;
+  margin-inline-end: -4px;
 
   svg {
     width: 20px;

app/javascript/mastodon/features/collections/components/collection_list_item.tsx

@@ -9,7 +9,10 @@ import { CollectionMenu } from 'mastodon/features/collections/components/collect
 
 import classes from './collection_list_item.module.scss';
 
-interface CollectionListItemProps extends CollectionLockupProps {
+interface CollectionListItemProps extends Omit<
+  CollectionLockupProps,
+  'sideContent'
+> {
   withoutBorder?: boolean;
   positionInList: number;
   listSize: number;
@@ -20,6 +23,7 @@ export const CollectionListItem: React.FC<CollectionListItemProps> = ({
   withoutBorder,
   positionInList,
   listSize,
+  className,
   ...otherProps
 }) => {
   const uniqueId = useId();
@@ -29,21 +33,26 @@ export const CollectionListItem: React.FC<CollectionListItemProps> = ({
   return (
     <Article
       focusable
-      className={classNames(
-        classes.wrapper,
-        withoutBorder && classes.wrapperWithoutBorder,
-      )}
       aria-labelledby={linkId}
       aria-describedby={infoId}
       aria-posinset={positionInList}
       aria-setsize={listSize}
     >
-      <CollectionLockup collection={collection} {...otherProps} />
-
-      <CollectionMenu
-        context='list'
+      <CollectionLockup
         collection={collection}
-        className={classes.menuButton}
+        className={classNames(
+          classes.wrapper,
+          withoutBorder && classes.wrapperWithoutBorder,
+          className,
+        )}
+        sideContent={
+          <CollectionMenu
+            context='list'
+            collection={collection}
+            className={classes.menuButton}
+          />
+        }
+        {...otherProps}
       />
     </Article>
   );

app/javascript/mastodon/features/collections/components/collection_lockup.module.scss

@@ -1,11 +1,5 @@
-.content {
-  position: relative;
-  flex-grow: 1;
-  display: flex;
-  align-items: center;
-  column-gap: 12px;
-  color: var(--color-text-primary);
-  line-height: 1.3;
+.wrapper {
+  --list-item-padding: 0px;
 }
 
 .avatarGrid {
@@ -36,27 +30,3 @@
   fill: var(--color-text-primary);
   background: var(--color-bg-warning-softest);
 }
-
-.link {
-  display: block;
-  font-size: 15px;
-  font-weight: 500;
-  text-decoration: none;
-  color: var(--color-text-primary);
-
-  &:hover {
-    color: var(--color-text-brand);
-  }
-
-  &::after {
-    // Increase clickable area by extending link across parent
-    content: '';
-    position: absolute;
-    inset: 0;
-  }
-}
-
-.info {
-  font-size: 13px;
-  color: var(--color-text-secondary);
-}

app/javascript/mastodon/features/collections/components/collection_lockup.tsx

@@ -1,10 +1,8 @@
-import { useId } from 'react';
-
 import { FormattedMessage } from 'react-intl';
 
 import classNames from 'classnames';
-import { Link } from 'react-router-dom';
 
+import { ListItemLink, ListItemWrapper } from '@/mastodon/components/list_item';
 import WarningIcon from '@/material-icons/400-24px/warning.svg?react';
 import type { ApiCollectionJSON } from 'mastodon/api_types/collections';
 import { AvatarById } from 'mastodon/components/avatar';
@@ -47,71 +45,78 @@ export interface CollectionLockupProps {
   collection: ApiCollectionJSON;
   withAuthorHandle?: boolean;
   withTimestamp?: boolean;
+  sideContent?: React.ReactNode;
+  className?: string;
 }
 
 export const CollectionLockup: React.FC<CollectionLockupProps> = ({
   collection,
   withAuthorHandle = true,
   withTimestamp,
+  sideContent,
+  className,
 }) => {
   const { id, name } = collection;
-  const uniqueId = useId();
-  const linkId = `${uniqueId}-link`;
-  const infoId = `${uniqueId}-info`;
   const authorAccount = useAccount(collection.account_id);
   const authorHandle = useAccountHandle(authorAccount, domain);
 
-  return (
-    <div className={classes.content}>
-      <AvatarGrid
-        accountIds={collection.items.map((item) => item.account_id)}
-        sensitive={collection.sensitive}
-      />
-      <div>
-        <h2 id={linkId}>
-          <Link to={getCollectionPath(id)} className={classes.link}>
-            {name}
-          </Link>
-        </h2>
-        <ul className={classes.info} id={infoId}>
-          {collection.sensitive && (
-            <li className='sr-only'>
-              <FormattedMessage
-                id='collections.sensitive'
-                defaultMessage='Sensitive'
-              />
-            </li>
-          )}
-          {withAuthorHandle && authorAccount && (
-            <FormattedMessage
-              id='collections.by_account'
-              defaultMessage='by {account_handle}'
-              values={{
-                account_handle: authorHandle,
-              }}
-              tagName='li'
-            />
-          )}
+  const collectionInfo = (
+    <ul>
+      {collection.sensitive && (
+        <li className='sr-only'>
           <FormattedMessage
-            id='collections.account_count'
-            defaultMessage='{count, plural, one {# account} other {# accounts}}'
-            values={{ count: collection.item_count }}
-            tagName='li'
+            id='collections.sensitive'
+            defaultMessage='Sensitive'
           />
-          {withTimestamp && (
-            <FormattedMessage
-              id='collections.last_updated_at'
-              defaultMessage='Last updated: {date}'
-              values={{
-                date: (
-                  <RelativeTimestamp timestamp={collection.updated_at} long />
-                ),
-              }}
-              tagName='li'
-            />
-          )}
-        </ul>
-      </div>
-    </div>
+        </li>
+      )}
+      {withAuthorHandle && authorAccount && (
+        <FormattedMessage
+          id='collections.by_account'
+          defaultMessage='by {account_handle}'
+          values={{
+            account_handle: authorHandle,
+          }}
+          tagName='li'
+        />
+      )}
+      <FormattedMessage
+        id='collections.account_count'
+        defaultMessage='{count, plural, one {# account} other {# accounts}}'
+        values={{ count: collection.item_count }}
+        tagName='li'
+      />
+      {withTimestamp && (
+        <FormattedMessage
+          id='collections.last_updated_at'
+          defaultMessage='Last updated: {date}'
+          values={{
+            date: <RelativeTimestamp timestamp={collection.updated_at} long />,
+          }}
+          tagName='li'
+        />
+      )}
+    </ul>
+  );
+
+  return (
+    <ListItemWrapper
+      className={classNames(classes.wrapper, className)}
+      icon={
+        <AvatarGrid
+          accountIds={collection.items.map((item) => item.account_id)}
+          sensitive={collection.sensitive}
+        />
+      }
+      sideContent={sideContent}
+    >
+      <ListItemLink
+        as='h2'
+        to={getCollectionPath(id)}
+        subtitle={collectionInfo}
+      >
+        {name}
+      </ListItemLink>
+    </ListItemWrapper>
   );
 };

app/javascript/mastodon/features/collections/components/collection_preview_card.module.scss

@@ -1,8 +1,10 @@
 .wrapper {
-  display: flex;
-  align-items: start;
-  padding: 12px;
-  gap: 12px;
+  --list-item-padding: 12px;
+
   border-radius: 12px;
   border: 1px solid var(--color-border-primary);
 }
+
+.removeButton {
+  align-self: start;
+}

app/javascript/mastodon/features/collections/components/collection_preview_card.tsx

@@ -1,5 +1,9 @@
+import { useIntl } from 'react-intl';
+
 import classNames from 'classnames';
 
+import CloseIcon from '@/material-icons/400-24px/close.svg?react';
+import { IconButton } from 'mastodon/components/icon_button';
 import type { CollectionLockupProps } from 'mastodon/features/collections/components/collection_lockup';
 import { CollectionLockup } from 'mastodon/features/collections/components/collection_lockup';
 
@@ -14,9 +18,26 @@ export const CollectionPreviewCard: React.FC<CollectionPreviewCardProps> = ({
   onRemove,
   ...otherProps
 }) => {
+  const intl = useIntl();
+  const removeButton = onRemove && (
+    <IconButton
+      icon='remove'
+      iconComponent={CloseIcon}
+      onClick={onRemove}
+      title={intl.formatMessage({
+        id: 'tag.remove',
+        defaultMessage: 'Remove',
+      })}
+      className={classes.removeButton}
+    />
+  );
+
   return (
-    <div className={classNames(classes.wrapper, 'collection-preview')}>
-      <CollectionLockup collection={collection} {...otherProps} />
-    </div>
+    <CollectionLockup
+      collection={collection}
+      className={classNames(classes.wrapper, 'collection-preview')}
+      sideContent={removeButton}
+      {...otherProps}
+    />
   );
 };