From c39c09970fa816977a535be4caf12d9dd29f91e4 Mon Sep 17 00:00:00 2001
From: Catalin <ctorge@cisco.com>
Date: Mon, 5 Aug 2024 13:27:38 +0100
Subject: [PATCH 1/3] fix(emoji-picker): add no result to aria region
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- adds no result message to aria live region

BUG:  Emoji - Search - No emoji found is not announced: SPARK-522103
Expected Result: No emoji found in the search results should be announced to the screen reader users,
e.g. No Emoji Found
Actual Result: When the user types in the search, the No emoji found displayed in the search results is not announced to the screen reader users.

HTML: `<div class=emoji-mart-no-results><span aria-label=, sleuth_or_spy title=sleuth_or_spy class=emoji-mart-emoji emoji-mart-emoji-native>….</div>`
Solution: Use aria-live to announce the information about No Emoji Found in the search result
---
 packages/emoji-mart/src/components/Picker/Picker.tsx | 9 ++++++++-
 1 file changed, 8 insertions(+), 1 deletion(-)

diff --git a/packages/emoji-mart/src/components/Picker/Picker.tsx b/packages/emoji-mart/src/components/Picker/Picker.tsx
index e747e1a0..49ab66ca 100644
--- a/packages/emoji-mart/src/components/Picker/Picker.tsx
+++ b/packages/emoji-mart/src/components/Picker/Picker.tsx
@@ -1069,7 +1069,14 @@ export default class Picker extends Component {
 
   renderLiveRegion() {
     const emoji = this.getEmojiByPos(this.state.pos)
-    const contents = emoji ? emoji.name : ''
+    const noSearchResults =
+      this.state.searchResults && !this.state.searchResults.length
+
+    let contents = emoji
+      ? emoji.name
+      : noSearchResults
+      ? I18n.search_no_results_2
+      : ''
 
     return (
       <div aria-live="polite" class="sr-only">

From dd497f1793d8fd75f4ba551a5c8a6f0673f6b68f Mon Sep 17 00:00:00 2001
From: Catalin <ctorge@cisco.com>
Date: Mon, 5 Aug 2024 16:22:28 +0100
Subject: [PATCH 2/3] fix(emoji-mart): change let to const

---
 packages/emoji-mart/src/components/Picker/Picker.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/emoji-mart/src/components/Picker/Picker.tsx b/packages/emoji-mart/src/components/Picker/Picker.tsx
index 49ab66ca..380d23dc 100644
--- a/packages/emoji-mart/src/components/Picker/Picker.tsx
+++ b/packages/emoji-mart/src/components/Picker/Picker.tsx
@@ -1072,7 +1072,7 @@ export default class Picker extends Component {
     const noSearchResults =
       this.state.searchResults && !this.state.searchResults.length
 
-    let contents = emoji
+    const contents = emoji
       ? emoji.name
       : noSearchResults
       ? I18n.search_no_results_2

From f3f2cf3ad98864dd28fccf705ef58f44223fc8c1 Mon Sep 17 00:00:00 2001
From: Catalin Torge <torgeadelin@gmail.com>
Date: Mon, 5 Aug 2024 16:27:34 +0100
Subject: [PATCH 3/3] feat(emoji-mart): apply suggested commit change for
 searchResult condition
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: Daniel Macák <34311965+daelmaak@users.noreply.github.com>
---
 packages/emoji-mart/src/components/Picker/Picker.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/emoji-mart/src/components/Picker/Picker.tsx b/packages/emoji-mart/src/components/Picker/Picker.tsx
index 380d23dc..0550a8b9 100644
--- a/packages/emoji-mart/src/components/Picker/Picker.tsx
+++ b/packages/emoji-mart/src/components/Picker/Picker.tsx
@@ -1070,7 +1070,7 @@ export default class Picker extends Component {
   renderLiveRegion() {
     const emoji = this.getEmojiByPos(this.state.pos)
     const noSearchResults =
-      this.state.searchResults && !this.state.searchResults.length
+      this.state.searchResults == null || this.state.searchResults.length === 0
 
     const contents = emoji
       ? emoji.name