From f2b76c0cd69542e87d191174db8f34111aa49064 Mon Sep 17 00:00:00 2001
From: Andrea Pryglova <apryglov@cisco.com>
Date: Mon, 17 Jun 2024 18:10:26 +0200
Subject: [PATCH] fix: read selected skin tone

Choose default skin tone button was announced without the selected option, which is not a11y friendly. According [rules](https://www.w3.org/WAI/ARIA/apg/patterns/combobox/examples/combobox-select-only/) the already selected option should be read as well even before doing the action click.

Related to - PS-20646, PS-20687
---
 packages/emoji-mart/src/components/Picker/Picker.tsx | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/packages/emoji-mart/src/components/Picker/Picker.tsx b/packages/emoji-mart/src/components/Picker/Picker.tsx
index 70bb1d94..e2ffb567 100644
--- a/packages/emoji-mart/src/components/Picker/Picker.tsx
+++ b/packages/emoji-mart/src/components/Picker/Picker.tsx
@@ -975,6 +975,8 @@ export default class Picker extends Component {
       return null
     }
 
+    const selectedSkinToneName = I18n.skins[this.state.skin]
+
     return (
       <div
         class="flex flex-auto flex-center flex-middle"
@@ -988,8 +990,8 @@ export default class Picker extends Component {
           type="button"
           ref={this.refs.skinToneButton}
           class="skin-tone-button flex flex-auto flex-center flex-middle"
-          aria-selected={this.state.showSkins ? '' : undefined}
-          aria-label={I18n.skins.choose}
+          aria-selected={this.state.showSkins ? 'true' : 'false'}
+          aria-label={`${I18n.skins.choose}, ${selectedSkinToneName}`}
           title={I18n.skins.choose}
           onClick={this.openSkins}
           style={{