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

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

View File

@ -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>

View File

@ -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>