From 8608268bc7752b6c52b9ecfafd8520883e877a4b Mon Sep 17 00:00:00 2001
From: Michael Telatynski <7t3chguy@gmail.com>
Date: Mon, 10 Nov 2025 16:46:30 +0000
Subject: [PATCH] Apply aria-hidden to emoji in SAS verification (#31204)

* Apply aria-hidden to emoji in SAS verification

So that for screen readers the canonical emoji description is preferred & we avoid the user being read each emoji twice.

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Update snapshot

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

---------

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
---
 src/components/views/verification/VerificationShowSas.tsx     | 4 +++-
 .../__snapshots__/VerificationRequestDialog-test.tsx.snap     | 2 ++
 2 files changed, 5 insertions(+), 1 deletion(-)

diff --git a/src/components/views/verification/VerificationShowSas.tsx b/src/components/views/verification/VerificationShowSas.tsx
index 10f8d89c45..0f6272a885 100644
--- a/src/components/views/verification/VerificationShowSas.tsx
+++ b/src/components/views/verification/VerificationShowSas.tsx
@@ -107,7 +107,9 @@ export default class VerificationShowSas extends React.Component<IProps, IState>
         if (this.props.sas.emoji) {
             const emojiBlocks = this.props.sas.emoji.map((emoji, i) => (
                 <div className="mx_VerificationShowSas_emojiSas_block" key={i}>
-                    <div className="mx_VerificationShowSas_emojiSas_emoji">{emoji[0]}</div>
+                    <div className="mx_VerificationShowSas_emojiSas_emoji" aria-hidden={true}>
+                        {emoji[0]}
+                    </div>
                     <div className="mx_VerificationShowSas_emojiSas_label">{tEmoji(emoji, locale)}</div>
                 </div>
             ));
diff --git a/test/unit-tests/components/views/dialogs/__snapshots__/VerificationRequestDialog-test.tsx.snap b/test/unit-tests/components/views/dialogs/__snapshots__/VerificationRequestDialog-test.tsx.snap
index 2dc48de40e..813bc5572a 100644
--- a/test/unit-tests/components/views/dialogs/__snapshots__/VerificationRequestDialog-test.tsx.snap
+++ b/test/unit-tests/components/views/dialogs/__snapshots__/VerificationRequestDialog-test.tsx.snap
@@ -369,6 +369,7 @@ exports[`VerificationRequestDialog When other device accepted emoji, displays em
             class="mx_VerificationShowSas_emojiSas_block"
           >
             <div
+              aria-hidden="true"
               class="mx_VerificationShowSas_emojiSas_emoji"
             >
               🐶
@@ -383,6 +384,7 @@ exports[`VerificationRequestDialog When other device accepted emoji, displays em
             class="mx_VerificationShowSas_emojiSas_block"
           >
             <div
+              aria-hidden="true"
               class="mx_VerificationShowSas_emojiSas_emoji"
             >
               🐱