Skip to content

Commit

Permalink
fix: read selected skin tone
Browse files Browse the repository at this point in the history
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
  • Loading branch information
andrejkaPry committed Jun 18, 2024
1 parent efaeb84 commit f2b76c0
Showing 1 changed file with 4 additions and 2 deletions.
6 changes: 4 additions & 2 deletions packages/emoji-mart/src/components/Picker/Picker.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand All @@ -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={{
Expand Down

0 comments on commit f2b76c0

Please sign in to comment.