️(frontend) make doc search result labels uniquely identifiable

Include each doc's relative update date in `SimpleDocItem` aria-label.
This commit is contained in:
Cyril
2026-04-14 15:46:48 +02:00
parent 9a5d81f983
commit e59d8a4631
2 changed files with 16 additions and 8 deletions

View File

@@ -14,14 +14,15 @@ and this project adheres to
### Changed ### Changed
- ♿️(frontend) structure correctly 5xx error alerts #2128 - ♿️(frontend) structure correctly 5xx error alerts #2128
- ♿️(frontend) make doc search result labels uniquely identifiable #2212
## [v4.8.6] - 2026-04-08 ## [v4.8.6] - 2026-04-08
### Added ### Added
- 🚸(frontend) allow opening "@page" links with - 🚸(frontend) allow opening "@page" links with
ctrl/command/middle-mouse click #2170 ctrl/command/middle-mouse click #2170
- ✅ E2E - Any instance friendly #2142 - ✅ E2E - Any instance friendly #2142
### Changed ### Changed

View File

@@ -38,7 +38,15 @@ export const SimpleDocItem = ({
const { isDesktop } = useResponsiveStore(); const { isDesktop } = useResponsiveStore();
const { untitledDocument } = useTrans(); const { untitledDocument } = useTrans();
const { isChild } = useDocUtils(doc); const { isChild } = useDocUtils(doc);
const { relativeDate } = useDate(); const { relativeDate, formatDate } = useDate();
const docTitle = doc.title || untitledDocument;
const docRelativeUpdate = relativeDate(doc.updated_at);
const itemAriaLabel = `${t('Open document {{title}}', { title: docTitle })}. ${t(
'Last update: {{update}}',
{
update: formatDate(doc.updated_at),
},
)}`;
return ( return (
<Box <Box
@@ -47,8 +55,7 @@ export const SimpleDocItem = ({
$overflow="auto" $overflow="auto"
$width="100%" $width="100%"
className="--docs--simple-doc-item" className="--docs--simple-doc-item"
role="presentation" aria-label={itemAriaLabel}
aria-label={`${t('Open document {{title}}', { title: doc.title || untitledDocument })}`}
> >
<Box <Box
$direction="row" $direction="row"
@@ -90,7 +97,7 @@ export const SimpleDocItem = ({
$css={ItemTextCss} $css={ItemTextCss}
data-testid="doc-title" data-testid="doc-title"
> >
{doc.title || untitledDocument} {docTitle}
</Text> </Text>
{(!isDesktop || showAccesses) && ( {(!isDesktop || showAccesses) && (
<Box <Box
@@ -101,7 +108,7 @@ export const SimpleDocItem = ({
aria-hidden="true" aria-hidden="true"
> >
<Text $size="xs" $variation="tertiary"> <Text $size="xs" $variation="tertiary">
{relativeDate(doc.updated_at)} {docRelativeUpdate}
</Text> </Text>
</Box> </Box>
)} )}