From 740eccb6d0c635a7fde457e32db2c2875b0dcdfb Mon Sep 17 00:00:00 2001 From: Nolan Lawson Date: Sat, 9 Mar 2019 14:19:24 -0800 Subject: [PATCH] fix: makes skin tone picker more accessible fixes #220 --- README.md | 8 ++++++++ src/components/picker/nimble-picker.js | 8 ++++++++ src/components/skins-dot.js | 25 +++++++++++++++++++++++-- 3 files changed, 39 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index b853d17..b0128f3 100644 --- a/README.md +++ b/README.md @@ -75,6 +75,14 @@ categories: { custom: 'Custom', }, categorieslabel: 'Emoji categories', // Accessible title for the list of categories +skintones: { + 1: 'Default Skin Tone', + 2: 'Light Skin Tone', + 3: 'Medium-Light Skin Tone', + 4: 'Medium Skin Tone', + 5: 'Medium-Dark Skin Tone', + 6: 'Dark Skin Tone', +}, ``` #### Sheet sizes diff --git a/src/components/picker/nimble-picker.js b/src/components/picker/nimble-picker.js index 9edfb3e..cda85a1 100644 --- a/src/components/picker/nimble-picker.js +++ b/src/components/picker/nimble-picker.js @@ -35,6 +35,14 @@ const I18N = { custom: 'Custom', }, categorieslabel: 'Emoji categories', // Accessible title for the list of categories + skintones: { + 1: 'Default Skin Tone', + 2: 'Light Skin Tone', + 3: 'Medium-Light Skin Tone', + 4: 'Medium Skin Tone', + 5: 'Medium-Dark Skin Tone', + 6: 'Dark Skin Tone', + }, } export default class NimblePicker extends React.PureComponent { diff --git a/src/components/skins-dot.js b/src/components/skins-dot.js index 74dbc4a..fd2f964 100644 --- a/src/components/skins-dot.js +++ b/src/components/skins-dot.js @@ -8,6 +8,14 @@ export default class SkinsDot extends Skins { super(props) this.handleClick = this.handleClick.bind(this) + this.handleKeyDown = this.handleKeyDown.bind(this) + } + + handleKeyDown(event) { + // if either enter or space is pressed, then execute + if (event.keyCode === 13 || event.keyCode === 32) { + this.handleClick(event) + } } render() { @@ -17,6 +25,7 @@ export default class SkinsDot extends Skins { for (let skinTone = 1; skinTone <= 6; skinTone++) { const selected = skinTone === skin + const visible = opened || selected skinToneNodes.push( @@ -32,9 +50,12 @@ export default class SkinsDot extends Skins { } return ( -
+
{skinToneNodes} -
+ ) } }