tarrien/Mastodon
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Accessibility: Fix broken aria label & description in CollectionListItem (#39165)

Browse Source
This commit is contained in:
diondiondion 2026-05-26 12:22:38 +02:00 committed by GitHub
parent e1aa4e3a8c
commit cc03e381ef
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 12 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
app/javascript/mastodon/features/collections/components/collection_list_item.tsx
View File

@ -27,14 +27,14 @@ export const CollectionListItem: React.FC<CollectionListItemProps> = ({
...otherProps ...otherProps
}) => { }) => {
const uniqueId = useId(); const uniqueId = useId();
const linkId = `${uniqueId}-link`; const titleId = `${uniqueId}-title`;
const infoId = `${uniqueId}-info`; const subtitleId = `${uniqueId}-info`;
return ( return (
<Article <Article
focusable focusable
aria-labelledby={linkId} aria-labelledby={titleId}
aria-describedby={infoId} aria-describedby={subtitleId}
aria-posinset={positionInList} aria-posinset={positionInList}
aria-setsize={listSize} aria-setsize={listSize}
> >
@ -52,6 +52,8 @@ export const CollectionListItem: React.FC<CollectionListItemProps> = ({
className={classes.menuButton} className={classes.menuButton}
/> />
} }
titleId={titleId}
subtitleId={subtitleId}
{...otherProps} {...otherProps}
/> />
</Article> </Article>

6
app/javascript/mastodon/features/collections/components/collection_lockup.tsx
View File

@ -48,6 +48,8 @@ export interface CollectionLockupProps {
sideContent?: React.ReactNode; sideContent?: React.ReactNode;
className?: string; className?: string;
headingLevel?: 'h2' | 'h3' | 'h4'; headingLevel?: 'h2' | 'h3' | 'h4';
titleId?: string;
subtitleId?: string;
} }
export const CollectionLockup: React.FC<CollectionLockupProps> = ({ export const CollectionLockup: React.FC<CollectionLockupProps> = ({
@ -56,6 +58,8 @@ export const CollectionLockup: React.FC<CollectionLockupProps> = ({
withTimestamp, withTimestamp,
sideContent, sideContent,
headingLevel = 'h3', headingLevel = 'h3',
titleId,
subtitleId,
className, className,
}) => { }) => {
const { id, name } = collection; const { id, name } = collection;
@ -74,6 +78,7 @@ export const CollectionLockup: React.FC<CollectionLockupProps> = ({
<ListItemLink <ListItemLink
as={headingLevel} as={headingLevel}
to={getCollectionPath(id)} to={getCollectionPath(id)}
id={titleId}
subtitle={ subtitle={
<CollectionInfo <CollectionInfo
collection={collection} collection={collection}
@ -81,6 +86,7 @@ export const CollectionLockup: React.FC<CollectionLockupProps> = ({
withTimestamp={withTimestamp} withTimestamp={withTimestamp}
/> />
} }
subtitleId={subtitleId}
> >
{name} {name}
</ListItemLink> </ListItemLink>