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 <[email protected]>

* Update snapshot

Signed-off-by: Michael Telatynski <[email protected]>

---------

Signed-off-by: Michael Telatynski <[email protected]>

Author: t3chguy

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>
             ));

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"
             >
               🐱