From cc03e381efb0a264692d2a40193db56ad01cde58 Mon Sep 17 00:00:00 2001
From: diondiondion <mail@diondiondion.com>
Date: Tue, 26 May 2026 12:22:38 +0200
Subject: [PATCH] Accessibility: Fix broken aria label & description in
 `CollectionListItem` (#39165)

---
 .../collections/components/collection_list_item.tsx    | 10 ++++++----
 .../collections/components/collection_lockup.tsx       |  6 ++++++
 2 files changed, 12 insertions(+), 4 deletions(-)

diff --git a/app/javascript/mastodon/features/collections/components/collection_list_item.tsx b/app/javascript/mastodon/features/collections/components/collection_list_item.tsx
index 8169544cb8..c1b32cac27 100644
--- a/app/javascript/mastodon/features/collections/components/collection_list_item.tsx
+++ b/app/javascript/mastodon/features/collections/components/collection_list_item.tsx
@@ -27,14 +27,14 @@ export const CollectionListItem: React.FC<CollectionListItemProps> = ({
   ...otherProps
 }) => {
   const uniqueId = useId();
-  const linkId = `${uniqueId}-link`;
-  const infoId = `${uniqueId}-info`;
+  const titleId = `${uniqueId}-title`;
+  const subtitleId = `${uniqueId}-info`;
 
   return (
     <Article
       focusable
-      aria-labelledby={linkId}
-      aria-describedby={infoId}
+      aria-labelledby={titleId}
+      aria-describedby={subtitleId}
       aria-posinset={positionInList}
       aria-setsize={listSize}
     >
@@ -52,6 +52,8 @@ export const CollectionListItem: React.FC<CollectionListItemProps> = ({
             className={classes.menuButton}
           />
         }
+        titleId={titleId}
+        subtitleId={subtitleId}
         {...otherProps}
       />
     </Article>
diff --git a/app/javascript/mastodon/features/collections/components/collection_lockup.tsx b/app/javascript/mastodon/features/collections/components/collection_lockup.tsx
index e16d49e792..5250ea5504 100644
--- a/app/javascript/mastodon/features/collections/components/collection_lockup.tsx
+++ b/app/javascript/mastodon/features/collections/components/collection_lockup.tsx
@@ -48,6 +48,8 @@ export interface CollectionLockupProps {
   sideContent?: React.ReactNode;
   className?: string;
   headingLevel?: 'h2' | 'h3' | 'h4';
+  titleId?: string;
+  subtitleId?: string;
 }
 
 export const CollectionLockup: React.FC<CollectionLockupProps> = ({
@@ -56,6 +58,8 @@ export const CollectionLockup: React.FC<CollectionLockupProps> = ({
   withTimestamp,
   sideContent,
   headingLevel = 'h3',
+  titleId,
+  subtitleId,
   className,
 }) => {
   const { id, name } = collection;
@@ -74,6 +78,7 @@ export const CollectionLockup: React.FC<CollectionLockupProps> = ({
       <ListItemLink
         as={headingLevel}
         to={getCollectionPath(id)}
+        id={titleId}
         subtitle={
           <CollectionInfo
             collection={collection}
@@ -81,6 +86,7 @@ export const CollectionLockup: React.FC<CollectionLockupProps> = ({
             withTimestamp={withTimestamp}
           />
         }
+        subtitleId={subtitleId}
       >
         {name}
       </ListItemLink>