From 740eccb6d0c635a7fde457e32db2c2875b0dcdfb Mon Sep 17 00:00:00 2001
From: Nolan Lawson <nolan@nolanlawson.com>
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(
         <span
           key={`skin-tone-${skinTone}`}
@@ -24,6 +33,15 @@ export default class SkinsDot extends Skins {
         >
           <span
             onClick={this.handleClick}
+            onKeyDown={this.handleKeyDown}
+            role="button"
+            tabindex={visible ? '0' : ''}
+            aria-hidden={!visible}
+            aria-pressed={opened ? !!selected : ''}
+            aria-haspopup={!!selected}
+            aria-expanded={selected ? opened : ''}
+            aria-label={i18n.skintones[skinTone]}
+            title={i18n.skintones[skinTone]}
             data-skin={skinTone}
             className={`emoji-mart-skin emoji-mart-skin-tone-${skinTone}`}
           />
@@ -32,9 +50,12 @@ export default class SkinsDot extends Skins {
     }
 
     return (
-      <div className={`emoji-mart-skin-swatches${opened ? ' opened' : ''}`}>
+      <section
+        className={`emoji-mart-skin-swatches${opened ? ' opened' : ''}`}
+        aria-label={i18n.skintext}
+      >
         {skinToneNodes}
-      </div>
+      </section>
     )
   }
 }