Merge pull request #283 from nolanlawson/nolan/issue-220-take-two

fix: makes skin tone picker more accessible

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

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 {

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,13 +25,23 @@ 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}`}
           className={`emoji-mart-skin-swatch${selected ? ' selected' : ''}`}
         >
           <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>
     )
   }
 }