From b8e1d12aea6ebe81317b878c497d305276796949 Mon Sep 17 00:00:00 2001
From: Cyril <c.gromoff@gmail.com>
Date: Fri, 20 Mar 2026 12:14:55 +0100
Subject: [PATCH] =?UTF-8?q?=E2=99=BF=EF=B8=8F(frontend)=20add=20aria-hidde?=
 =?UTF-8?q?n=20to=20decorative=20icons=20in=20dropdown=20menu?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Mark decorative SVG icons with aria-hidden.
---
 CHANGELOG.md                                  |  1 +
 .../components/dropdown-menu/DropdownMenu.tsx |  1 -
 .../docs/doc-header/components/DocToolBox.tsx | 22 +++++++++----------
 .../docs-grid/components/DocsGridActions.tsx  | 12 +++++-----
 4 files changed, 18 insertions(+), 18 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index b22f544c..79070d28 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -15,6 +15,7 @@ and this project adheres to
 - 💄(frontend) improve comments highlights #1961
 - ♿️(frontend) improve BoxButton a11y and native button semantics #2103
 - ♿️(frontend) improve language picker accessibility #2069
+- ♿️(frontend) add aria-hidden to decorative icons in dropdown menu #2093
 
 ### Fixed
 
diff --git a/src/frontend/apps/impress/src/components/dropdown-menu/DropdownMenu.tsx b/src/frontend/apps/impress/src/components/dropdown-menu/DropdownMenu.tsx
index 73adb5cd..25936223 100644
--- a/src/frontend/apps/impress/src/components/dropdown-menu/DropdownMenu.tsx
+++ b/src/frontend/apps/impress/src/components/dropdown-menu/DropdownMenu.tsx
@@ -275,7 +275,6 @@ export const DropdownMenu = ({
                     <Box
                       $theme="neutral"
                       $variation={isDisabled ? 'tertiary' : 'primary'}
-                      aria-hidden="true"
                     >
                       {option.icon}
                     </Box>
diff --git a/src/frontend/apps/impress/src/features/docs/doc-header/components/DocToolBox.tsx b/src/frontend/apps/impress/src/features/docs/doc-header/components/DocToolBox.tsx
index 33f19bb2..baff5461 100644
--- a/src/frontend/apps/impress/src/features/docs/doc-header/components/DocToolBox.tsx
+++ b/src/frontend/apps/impress/src/features/docs/doc-header/components/DocToolBox.tsx
@@ -118,13 +118,13 @@ export const DocToolBox = ({ doc }: DocToolBoxProps) => {
   const options: DropdownMenuOption[] = [
     {
       label: t('Share'),
-      icon: <GroupSVG width={24} height={24} />,
+      icon: <GroupSVG width={24} height={24} aria-hidden="true" />,
       callback: modalShare.open,
       show: isSmallMobile,
     },
     {
       label: t('Export'),
-      icon: <DownloadSVG width={24} height={24} />,
+      icon: <DownloadSVG width={24} height={24} aria-hidden="true" />,
       callback: () => {
         setIsModalExportOpen(true);
       },
@@ -133,9 +133,9 @@ export const DocToolBox = ({ doc }: DocToolBoxProps) => {
     {
       label: doc.is_favorite ? t('Unpin') : t('Pin'),
       icon: doc.is_favorite ? (
-        <KeepOffSVG width={24} height={24} />
+        <KeepOffSVG width={24} height={24} aria-hidden="true" />
       ) : (
-        <KeepSVG width={24} height={24} />
+        <KeepSVG width={24} height={24} aria-hidden="true" />
       ),
       callback: () => {
         if (doc.is_favorite) {
@@ -148,7 +148,7 @@ export const DocToolBox = ({ doc }: DocToolBoxProps) => {
     },
     {
       label: t('Version history'),
-      icon: <HistorySVG width={24} height={24} />,
+      icon: <HistorySVG width={24} height={24} aria-hidden="true" />,
       disabled: !doc.abilities.versions_list,
       callback: () => {
         selectHistoryModal.open();
@@ -158,7 +158,7 @@ export const DocToolBox = ({ doc }: DocToolBoxProps) => {
     },
     {
       label: t('Remove emoji'),
-      icon: <RemoveEmojiSVG width={24} height={24} />,
+      icon: <RemoveEmojiSVG width={24} height={24} aria-hidden="true" />,
       callback: () => {
         updateDocEmoji(doc.id, doc.title ?? '', '');
       },
@@ -167,7 +167,7 @@ export const DocToolBox = ({ doc }: DocToolBoxProps) => {
     },
     {
       label: t('Add emoji'),
-      icon: <AddEmojiSVG width={24} height={24} />,
+      icon: <AddEmojiSVG width={24} height={24} aria-hidden="true" />,
       callback: () => {
         updateDocEmoji(doc.id, doc.title ?? '', '📄');
       },
@@ -176,12 +176,12 @@ export const DocToolBox = ({ doc }: DocToolBoxProps) => {
     },
     {
       label: t('Copy link'),
-      icon: <AddLinkSVG width={24} height={24} />,
+      icon: <AddLinkSVG width={24} height={24} aria-hidden="true" />,
       callback: copyDocLink,
     },
     {
       label: t('Copy as {{format}}', { format: 'Markdown' }),
-      icon: <MarkdownCopySVG width={24} height={24} />,
+      icon: <MarkdownCopySVG width={24} height={24} aria-hidden="true" />,
       callback: () => {
         void copyCurrentEditorToClipboard('markdown');
       },
@@ -189,7 +189,7 @@ export const DocToolBox = ({ doc }: DocToolBoxProps) => {
     },
     {
       label: t('Duplicate'),
-      icon: <ContentCopySVG width={24} height={24} />,
+      icon: <ContentCopySVG width={24} height={24} aria-hidden="true" />,
       disabled: !doc.abilities.duplicate,
       callback: () => {
         duplicateDoc({
@@ -202,7 +202,7 @@ export const DocToolBox = ({ doc }: DocToolBoxProps) => {
     },
     {
       label: isChild ? t('Delete sub-document') : t('Delete document'),
-      icon: <DeleteSVG width={24} height={24} />,
+      icon: <DeleteSVG width={24} height={24} aria-hidden="true" />,
       disabled: !doc.abilities.destroy,
       callback: () => {
         setIsModalRemoveOpen(true);
diff --git a/src/frontend/apps/impress/src/features/docs/docs-grid/components/DocsGridActions.tsx b/src/frontend/apps/impress/src/features/docs/docs-grid/components/DocsGridActions.tsx
index 22086ac6..8066ae8a 100644
--- a/src/frontend/apps/impress/src/features/docs/docs-grid/components/DocsGridActions.tsx
+++ b/src/frontend/apps/impress/src/features/docs/docs-grid/components/DocsGridActions.tsx
@@ -72,9 +72,9 @@ export const DocsGridActions = ({ doc }: DocsGridActionsProps) => {
     {
       label: doc.is_favorite ? t('Unpin') : t('Pin'),
       icon: doc.is_favorite ? (
-        <KeepOffSVG width={24} height={24} />
+        <KeepOffSVG width={24} height={24} aria-hidden="true" />
       ) : (
-        <KeepSVG width={24} height={24} />
+        <KeepSVG width={24} height={24} aria-hidden="true" />
       ),
       callback: () => {
         if (doc.is_favorite) {
@@ -88,7 +88,7 @@ export const DocsGridActions = ({ doc }: DocsGridActionsProps) => {
     },
     {
       label: t('Share'),
-      icon: <GroupSVG width={24} height={24} />,
+      icon: <GroupSVG width={24} height={24} aria-hidden="true" />,
       callback: () => {
         shareModal.open();
       },
@@ -97,7 +97,7 @@ export const DocsGridActions = ({ doc }: DocsGridActionsProps) => {
     },
     {
       label: t('Move into a doc'),
-      icon: <DocMoveInSVG width={24} height={24} />,
+      icon: <DocMoveInSVG width={24} height={24} aria-hidden="true" />,
       callback: () => {
         importModal.open();
       },
@@ -106,7 +106,7 @@ export const DocsGridActions = ({ doc }: DocsGridActionsProps) => {
     },
     {
       label: t('Duplicate'),
-      icon: <ContentCopySVG width={24} height={24} />,
+      icon: <ContentCopySVG width={24} height={24} aria-hidden="true" />,
       disabled: !doc.abilities.duplicate,
       callback: () => {
         duplicateDoc({
@@ -119,7 +119,7 @@ export const DocsGridActions = ({ doc }: DocsGridActionsProps) => {
     },
     {
       label: t('Delete'),
-      icon: <DeleteSVG width={24} height={24} />,
+      icon: <DeleteSVG width={24} height={24} aria-hidden="true" />,
       callback: () => deleteModal.open(),
       disabled: !doc.abilities.destroy,
       testId: `docs-grid-actions-remove-${doc.id}`,