From 3d3f58582d2b45efc5c2a6ea5eb6447c64c796d4 Mon Sep 17 00:00:00 2001 From: Cyril Date: Wed, 15 Jul 2026 12:06:18 +0200 Subject: [PATCH] =?UTF-8?q?=E2=99=BF=EF=B8=8F(frontend)=20hide=20decorativ?= =?UTF-8?q?e=20emojis=20in=20document=20title=20from=20SR?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Mark UI title emojis as aria-hidden while keeping accessible text labels. --- CHANGELOG.md | 1 + .../components/DocLeftPanelCollapseButton.tsx | 10 ++++++++-- .../features/docs/doc-header/components/DocTitle.tsx | 7 ++++++- .../docs/doc-management/components/SimpleDocItem.tsx | 5 ++++- .../docs/doc-tree/components/DocSubPageItem.tsx | 7 +++---- .../left-panel/components/LeftPanelCollapseButton.tsx | 4 ++-- 6 files changed, 24 insertions(+), 10 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index fcf1a9753..71080ef04 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -19,6 +19,7 @@ and this project adheres to - ♿️(frontend) announce search loading state for screen readers #2526 - ♻️(frontend) change favorite to star #2539 - 🚚(frontend) add doc move to doc options #2555 +- ♿(frontend) hide decorative emojis in document titles from SR #2527 ### Fixed diff --git a/src/frontend/apps/impress/src/features/docs/doc-header/components/DocLeftPanelCollapseButton.tsx b/src/frontend/apps/impress/src/features/docs/doc-header/components/DocLeftPanelCollapseButton.tsx index 6f8af2285..927fa51b0 100644 --- a/src/frontend/apps/impress/src/features/docs/doc-header/components/DocLeftPanelCollapseButton.tsx +++ b/src/frontend/apps/impress/src/features/docs/doc-header/components/DocLeftPanelCollapseButton.tsx @@ -85,7 +85,6 @@ export const DocLeftPanelCollapseButton = () => { currentDoc?.title ?? '', ); const docTitle = titleWithoutEmoji || untitledDocument; - const buttonTitle = emoji ? `${emoji} ${docTitle}` : docTitle; const shouldShowButtonTitle = !isPanelOpen && !isDocTitleVisible; const ariaLabel = isPanelOpen ? t('Hide the side panel for {{title}}', { title: docTitle }) @@ -94,7 +93,14 @@ export const DocLeftPanelCollapseButton = () => { return ( + {emoji && } + {docTitle} + + ) : undefined + } /> ); }; diff --git a/src/frontend/apps/impress/src/features/docs/doc-header/components/DocTitle.tsx b/src/frontend/apps/impress/src/features/docs/doc-header/components/DocTitle.tsx index 23a06c107..36b1cd063 100644 --- a/src/frontend/apps/impress/src/features/docs/doc-header/components/DocTitle.tsx +++ b/src/frontend/apps/impress/src/features/docs/doc-header/components/DocTitle.tsx @@ -38,11 +38,16 @@ export const DocTitleText = () => { const { isMobile } = useResponsiveStore(); const { currentDoc } = useDocStore(); const { untitledDocument } = useTrans(); + const { emoji, titleWithoutEmoji } = getEmojiAndTitle( + currentDoc?.title ?? '', + ); + const displayTitle = titleWithoutEmoji || untitledDocument; return ( - {currentDoc?.title || untitledDocument} + {emoji && } + {displayTitle} ); diff --git a/src/frontend/apps/impress/src/features/docs/doc-management/components/SimpleDocItem.tsx b/src/frontend/apps/impress/src/features/docs/doc-management/components/SimpleDocItem.tsx index 3c3741b41..417f42eaa 100644 --- a/src/frontend/apps/impress/src/features/docs/doc-management/components/SimpleDocItem.tsx +++ b/src/frontend/apps/impress/src/features/docs/doc-management/components/SimpleDocItem.tsx @@ -10,6 +10,7 @@ import { useResponsiveStore } from '@/stores'; import { useDocUtils, useTrans } from '../hooks'; import { Doc } from '../types'; +import { getEmojiAndTitle } from '../utils'; const ItemTextCss = css` overflow: hidden; @@ -38,7 +39,8 @@ export const SimpleDocItem = ({ const { untitledDocument } = useTrans(); const { isChild } = useDocUtils(doc); const { relativeDate, formatDate } = useDate(); - const docTitle = doc.title || untitledDocument; + const { emoji, titleWithoutEmoji } = getEmojiAndTitle(doc.title || ''); + const docTitle = titleWithoutEmoji || untitledDocument; const docRelativeUpdate = relativeDate(doc.updated_at); const itemAriaLabel = `${t('Open document {{title}}', { title: docTitle })}. ${t( 'Last update: {{update}}', @@ -91,6 +93,7 @@ export const SimpleDocItem = ({ data-testid="doc-title" title={docTitle} > + {emoji && } {docTitle} diff --git a/src/frontend/apps/impress/src/features/docs/doc-tree/components/DocSubPageItem.tsx b/src/frontend/apps/impress/src/features/docs/doc-tree/components/DocSubPageItem.tsx index c7e6c1753..fade9ef07 100644 --- a/src/frontend/apps/impress/src/features/docs/doc-tree/components/DocSubPageItem.tsx +++ b/src/frontend/apps/impress/src/features/docs/doc-tree/components/DocSubPageItem.tsx @@ -144,7 +144,6 @@ const DocSubPageItemContent = (props: TreeViewNodeProps) => { } }; - const docTitle = doc.title || untitledDocument; const isCurrentPage = router.query?.id === doc.id; const isDeleted = !!doc.deleted_at; const actionsRef = useRef(null); @@ -187,8 +186,8 @@ const DocSubPageItemContent = (props: TreeViewNodeProps) => { tabIndex={-1} aria-label={ isDeleted - ? t('{{title}} (deleted)', { title: docTitle }) - : t('Open document {{title}}', { title: docTitle }) + ? t('{{title}} (deleted)', { title: displayTitle }) + : t('Open document {{title}}', { title: displayTitle }) } aria-current={isCurrentPage ? 'page' : undefined} data-testid={`doc-sub-page-item-${doc.id}`} @@ -300,7 +299,7 @@ const DocSubPageItemContent = (props: TreeViewNodeProps) => { $align="center" className="light-doc-item-actions actions" role="toolbar" - aria-label={t('Actions for {{title}}', { title: docTitle })} + aria-label={t('Actions for {{title}}', { title: displayTitle })} > { const { isPanelOpen, togglePanel } = useLeftPanelStore(); const { isSmallMobile } = useResponsiveStore(); @@ -36,7 +37,6 @@ export const LeftPanelCollapseButton = ({ $size="sm" $weight={700} $color="var(--c--globals--colors--gray-1000)" - title={buttonTitle} > {buttonTitle}