Skip to content

fix(a11y): announce skin tone menu state in emoji picker #19

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
kmaraz merged 1 commit into from
Nov 14, 2025
Merged

fix(a11y): announce skin tone menu state in emoji picker #19

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 4 additions & 0 deletions packages/emoji-mart-data/i18n/ar.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,5 +27,9 @@
"4": "متوسط",
"5": "داكن متوسط",
"6": "داكن"
},
"a11y": {
"skin_tone_menu_collapsed": "مطوي",
"skin_tone_menu_expanded": "موسع"
}
}
4 changes: 4 additions & 0 deletions packages/emoji-mart-data/i18n/be.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,5 +25,9 @@
"4": "Сярэдні",
"5": "Сярэдне-цёмны",
"6": "Цёмны"
},
"a11y": {
"skin_tone_menu_collapsed": "згорнута",
"skin_tone_menu_expanded": "разгорнута"
}
}
4 changes: 3 additions & 1 deletion packages/emoji-mart-data/i18n/cs.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,6 +27,8 @@
"6": "Tmavý"
},
"a11y": {
"available_emojis": "Dostupné emoji"
"available_emojis": "Dostupné emoji",
"skin_tone_menu_collapsed": "sbalené",
"skin_tone_menu_expanded": "rozbalené"
}
}
4 changes: 3 additions & 1 deletion packages/emoji-mart-data/i18n/de.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,6 +27,8 @@
"6": "Dunkel"
},
"a11y": {
"available_emojis": "Verfügbare Emojis"
"available_emojis": "Verfügbare Emojis",
"skin_tone_menu_collapsed": "eingeklappt",
"skin_tone_menu_expanded": "ausgeklappt"
}
}
4 changes: 3 additions & 1 deletion packages/emoji-mart-data/i18n/en.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,6 +30,8 @@
"available_emojis": "Available emojis",
"emojis_found_plural": "emojis found",
"emoji_found_singular": "emoji found",
"search_input_aria_label": "Search emojis"
"search_input_aria_label": "Search emojis",
"skin_tone_menu_collapsed": "collapsed",
"skin_tone_menu_expanded": "expanded"
}
}
4 changes: 4 additions & 0 deletions packages/emoji-mart-data/i18n/es.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,5 +25,9 @@
"4": "Medio",
"5": "Medio-Oscuro",
"6": "Oscuro"
},
"a11y": {
"skin_tone_menu_collapsed": "contraído",
"skin_tone_menu_expanded": "expandido"
}
}
4 changes: 4 additions & 0 deletions packages/emoji-mart-data/i18n/fa.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,5 +27,9 @@
"4": "میانه",
"5": "میانه-تاریک",
"6": "تاریک"
},
"a11y": {
"skin_tone_menu_collapsed": "جمع‌شده",
"skin_tone_menu_expanded": "گسترده"
}
}
4 changes: 4 additions & 0 deletions packages/emoji-mart-data/i18n/fi.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,5 +25,9 @@
"4": "Keskimmäinen",
"5": "Keskitumma",
"6": "Tumma"
},
"a11y": {
"skin_tone_menu_collapsed": "pienennetty",
"skin_tone_menu_expanded": "laajennettu"
}
}
4 changes: 4 additions & 0 deletions packages/emoji-mart-data/i18n/fr.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,5 +25,9 @@
"4": "Moyen",
"5": "Moyen-foncé",
"6": "Foncé"
},
"a11y": {
"skin_tone_menu_collapsed": "réduit",
"skin_tone_menu_expanded": "développé"
}
}
4 changes: 4 additions & 0 deletions packages/emoji-mart-data/i18n/hi.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,5 +25,9 @@
"4": "मध्यम",
"5": "मध्यम-गहरा",
"6": "गहरा"
},
"a11y": {
"skin_tone_menu_collapsed": "संक्षिप्त",
"skin_tone_menu_expanded": "विस्तृत"
}
}
4 changes: 4 additions & 0 deletions packages/emoji-mart-data/i18n/it.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,5 +25,9 @@
"4": "Medio",
"5": "Medio-scuro",
"6": "Scuro"
},
"a11y": {
"skin_tone_menu_collapsed": "compressa",
"skin_tone_menu_expanded": "espansa"
}
}
4 changes: 4 additions & 0 deletions packages/emoji-mart-data/i18n/ja.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,5 +25,9 @@
"4": "肌色",
"5": "やや濃い肌色",
"6": "濃い肌色"
},
"a11y": {
"skin_tone_menu_collapsed": "折りたたみ",
"skin_tone_menu_expanded": "展開"
}
}
4 changes: 4 additions & 0 deletions packages/emoji-mart-data/i18n/ko.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,5 +25,9 @@
"4": "중간 피부색",
"5": "약간 어두운 피부색",
"6": "어두운 피부색"
},
"a11y": {
"skin_tone_menu_collapsed": "접힘",
"skin_tone_menu_expanded": "펼침"
}
}
4 changes: 4 additions & 0 deletions packages/emoji-mart-data/i18n/nl.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,5 +25,9 @@
"4": "Medium",
"5": "Medium-Donker",
"6": "Donker"
},
"a11y": {
"skin_tone_menu_collapsed": "ingeklapt",
"skin_tone_menu_expanded": "uitgeklapt"
}
}
4 changes: 4 additions & 0 deletions packages/emoji-mart-data/i18n/pl.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,5 +25,9 @@
"4": "Średni",
"5": "Średnio-ciemny",
"6": "Ciemny"
},
"a11y": {
"skin_tone_menu_collapsed": "zwinięte",
"skin_tone_menu_expanded": "rozwinięte"
}
}
4 changes: 3 additions & 1 deletion packages/emoji-mart-data/i18n/pt.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,6 +27,8 @@
"6": "Escura"
},
"a11y": {
"available_emojis": "Emojis disponíveis"
"available_emojis": "Emojis disponíveis",
"skin_tone_menu_collapsed": "recolhido",
"skin_tone_menu_expanded": "expandido"
}
}
4 changes: 4 additions & 0 deletions packages/emoji-mart-data/i18n/ru.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,5 +25,9 @@
"4": "Средний",
"5": "Средне-тёмный",
"6": "Тёмный"
},
"a11y": {
"skin_tone_menu_collapsed": "свернуто",
"skin_tone_menu_expanded": "развернуто"
}
}
4 changes: 4 additions & 0 deletions packages/emoji-mart-data/i18n/sa.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,5 +25,9 @@
"4": "मध्यम",
"5": "मध्यम-तिमिर",
"6": "तिमिर"
},
"a11y": {
"skin_tone_menu_collapsed": "संकीर्णितम्",
"skin_tone_menu_expanded": "विस्तारितम्"
}
}
4 changes: 4 additions & 0 deletions packages/emoji-mart-data/i18n/tr.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,5 +25,9 @@
"4": "Orta",
"5": "Orta Koyu",
"6": "Koyu"
},
"a11y": {
"skin_tone_menu_collapsed": "daraltıldı",
"skin_tone_menu_expanded": "genişletildi"
}
}
4 changes: 4 additions & 0 deletions packages/emoji-mart-data/i18n/uk.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,5 +25,9 @@
"4": "Середня",
"5": "Середньо-темна",
"6": "Темна"
},
"a11y": {
"skin_tone_menu_collapsed": "згорнуто",
"skin_tone_menu_expanded": "розгорнуто"
}
}
4 changes: 3 additions & 1 deletion packages/emoji-mart-data/i18n/vi.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,6 +27,8 @@
"6": "Tối"
},
"a11y": {
"available_emojis": "Biểu tượng cảm xúc có sẵn"
"available_emojis": "Biểu tượng cảm xúc có sẵn",
"skin_tone_menu_collapsed": "thu gọn",
"skin_tone_menu_expanded": "mở rộng"
}
}
4 changes: 3 additions & 1 deletion packages/emoji-mart-data/i18n/zh.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,6 +27,8 @@
"6": "黑色"
},
"a11y": {
"available_emojis": "可用表情符号"
"available_emojis": "可用表情符号",
"skin_tone_menu_collapsed": "已折叠",
"skin_tone_menu_expanded": "已展开"
}
}
12 changes: 10 additions & 2 deletions packages/emoji-mart/src/components/Picker/Picker.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1068,7 +1068,15 @@ export default class Picker extends Component {
return null
}

const ariaSkinToneShown = this.state.showSkins ? 'true' : 'false'
const isSkinToneMenuOpen = !!this.state.showSkins
const ariaSkinToneShown = isSkinToneMenuOpen ? 'true' : 'false'
const skinToneA11y = I18n && I18n.a11y
const skinToneStateLabel = isSkinToneMenuOpen
? skinToneA11y?.skin_tone_menu_expanded || 'expanded'
: skinToneA11y?.skin_tone_menu_collapsed || 'collapsed'
const skinToneButtonLabel = `${I18n.skins.choose}, ${
I18n.skins[this.state.skin]
}, ${skinToneStateLabel}`

return (
<div
Expand All @@ -1087,7 +1095,7 @@ export default class Picker extends Component {
aria-expanded={ariaSkinToneShown}
aria-controls="skin-tone-options"
aria-haspopup="true"
aria-label={`${I18n.skins.choose}, ${I18n.skins[this.state.skin]}`}
aria-label={skinToneButtonLabel}
title={I18n.skins.choose}
onClick={this.openSkins}
style={{
Expand Down