Accessibility: Fix broken aria label & description in CollectionListItem (#39165)
This commit is contained in:
parent
e1aa4e3a8c
commit
cc03e381ef
@ -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>
|
||||
|
||||
@ -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>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user