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