diff --git a/packages/emoji-mart/src/components/Picker/Picker.js b/packages/emoji-mart/src/components/Picker/Picker.js
index a67e78061..aa2f58b2b 100644
--- a/packages/emoji-mart/src/components/Picker/Picker.js
+++ b/packages/emoji-mart/src/components/Picker/Picker.js
@@ -964,6 +964,17 @@ export default class Picker extends Component {
)
}
+ renderLiveRegion() {
+ const emoji = this.getEmojiByPos(this.state.pos)
+ const contents = emoji ? emoji.name : ''
+
+ return (
+
+ {contents}
+
+ )
+ }
+
renderSkins() {
const skinToneButton = this.refs.skinToneButton.current
const skinToneButtonRect = skinToneButton.getBoundingClientRect()
@@ -1076,6 +1087,7 @@ export default class Picker extends Component {
{this.props.navPosition == 'bottom' && this.renderNav()}
{this.props.previewPosition == 'bottom' && this.renderPreview()}
{this.state.showSkins && this.renderSkins()}
+ {this.renderLiveRegion()}
)
}
diff --git a/packages/emoji-mart/src/components/Picker/PickerStyles.scss b/packages/emoji-mart/src/components/Picker/PickerStyles.scss
index 9f2a0e3c8..df38b4526 100644
--- a/packages/emoji-mart/src/components/Picker/PickerStyles.scss
+++ b/packages/emoji-mart/src/components/Picker/PickerStyles.scss
@@ -122,6 +122,15 @@
text-overflow: ellipsis;
}
+.sr-only {
+ position: absolute;
+ left: -10000px;
+ top: auto;
+ width: 1px;
+ height: 1px;
+ overflow: hidden;
+}
+
a {
cursor: pointer;
color: rgb(var(--em-rgb-accent));