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
slidoapp · Jun 18, 2024 · 3f641ed · 3f641ed
1 parent efaeb84
commit 3f641ed
Show file tree

Hide file tree

Showing 7 changed files with 12 additions and 10 deletions.
diff --git a/dist/browser.js b/dist/browser.js
diff --git a/dist/browser.js.map b/dist/browser.js.map
diff --git a/dist/main.js b/dist/main.js
diff --git a/dist/main.js.map b/dist/main.js.map
diff --git a/dist/module.js b/dist/module.js
diff --git a/dist/module.js.map b/dist/module.js.map
diff --git a/packages/emoji-mart/src/components/Picker/Picker.tsx b/packages/emoji-mart/src/components/Picker/Picker.tsx
@@ -988,8 +988,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}, ${I18n.skins[this.state.skin]}`}
           title={I18n.skins.choose}
           onClick={this.openSkins}
           style={{