Skip to content

Commit

Permalink
fix(emoji-picker): add no result to aria region
Browse files Browse the repository at this point in the history
- 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
  • Loading branch information
torgeadelin authored and JanPodmajersky committed Aug 5, 2024
1 parent b6466ff commit ca013f4
Showing 1 changed file with 8 additions and 1 deletion.
9 changes: 8 additions & 1 deletion packages/emoji-mart/src/components/Picker/Picker.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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 == null || this.state.searchResults.length === 0

const contents = emoji
? emoji.name
: noSearchResults
? I18n.search_no_results_2
: ''

return (
<div aria-live="polite" class="sr-only">
Expand Down

0 comments on commit ca013f4

Please sign in to comment.