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
}) => {
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>

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

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