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

[Glitch] Accessibility: Fix broken aria label & description in CollectionListItem

Browse Source 
Port cc03e381efb0a264692d2a40193db56ad01cde58 to glitch-soc

Signed-off-by: Claire <claire.github-309c@sitedethib.com>
This commit is contained in:
diondiondion 2026-05-26 12:22:38 +02:00 committed by Claire
parent 392f8e43f9
commit 88d01efff3
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/flavours/glitch/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/flavours/glitch/features/collections/components/collection_lockup.tsx
View File

@ -51,6 +51,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> = ({
@ -59,6 +61,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;
@ -77,6 +81,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}
@ -84,6 +89,7 @@ export const CollectionLockup: React.FC<CollectionLockupProps> = ({
withTimestamp={withTimestamp} withTimestamp={withTimestamp}
/> />
} }
subtitleId={subtitleId}
> >
{name} {name}
</ListItemLink> </ListItemLink>