From 585b4b374fb8fdbd5e845d62bd63f274e7bc8cfd Mon Sep 17 00:00:00 2001
From: Nolan Lawson <nolan@nolanlawson.com>
Date: Tue, 12 Mar 2019 20:37:45 -0700
Subject: [PATCH 1/2] fix: improve a11y of skin tone picker

---
 src/components/skins-dot.js | 14 +++++++++-----
 1 file changed, 9 insertions(+), 5 deletions(-)

diff --git a/src/components/skins-dot.js b/src/components/skins-dot.js
index fb96331..3fcd84e 100644
--- a/src/components/skins-dot.js
+++ b/src/components/skins-dot.js
@@ -30,16 +30,20 @@ export default class SkinsDot extends Skins {
         <span
           key={`skin-tone-${skinTone}`}
           className={`emoji-mart-skin-swatch${selected ? ' selected' : ''}`}
+          aria-label={i18n.skintones[skinTone]}
+          aria-hidden={!visible}
+          {...opened && { role: 'menuitem' }}
         >
           <span
             onClick={this.handleClick}
             onKeyDown={this.handleKeyDown}
             role="button"
+            {...selected && {
+              'aria-haspopup': true,
+              'aria-expanded': !!opened,
+            }}
+            {...opened && { 'aria-pressed': !!selected }}
             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}
@@ -54,7 +58,7 @@ export default class SkinsDot extends Skins {
         className={`emoji-mart-skin-swatches${opened ? ' opened' : ''}`}
         aria-label={i18n.skintext}
       >
-        {skinToneNodes}
+        <div {...opened && { role: 'menubar' }}>{skinToneNodes}</div>
       </section>
     )
   }

From f53d9b8c7183615ca12264d3e945fcc94e470a31 Mon Sep 17 00:00:00 2001
From: Nolan Lawson <nolan@nolanlawson.com>
Date: Wed, 13 Mar 2019 07:55:35 -0700
Subject: [PATCH 2/2] fix preact compat

---
 src/components/skins-dot.js | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/components/skins-dot.js b/src/components/skins-dot.js
index 3fcd84e..23e31d2 100644
--- a/src/components/skins-dot.js
+++ b/src/components/skins-dot.js
@@ -32,17 +32,17 @@ export default class SkinsDot extends Skins {
           className={`emoji-mart-skin-swatch${selected ? ' selected' : ''}`}
           aria-label={i18n.skintones[skinTone]}
           aria-hidden={!visible}
-          {...opened && { role: 'menuitem' }}
+          {...opened ? { role: 'menuitem' } : {}}
         >
           <span
             onClick={this.handleClick}
             onKeyDown={this.handleKeyDown}
             role="button"
-            {...selected && {
+            {...selected ? {
               'aria-haspopup': true,
               'aria-expanded': !!opened,
-            }}
-            {...opened && { 'aria-pressed': !!selected }}
+            } : {}}
+            {...opened ? { 'aria-pressed': !!selected } : {}}
             tabIndex={visible ? '0' : ''}
             aria-label={i18n.skintones[skinTone]}
             title={i18n.skintones[skinTone]}
@@ -58,7 +58,7 @@ export default class SkinsDot extends Skins {
         className={`emoji-mart-skin-swatches${opened ? ' opened' : ''}`}
         aria-label={i18n.skintext}
       >
-        <div {...opened && { role: 'menubar' }}>{skinToneNodes}</div>
+        <div {...opened ? { role: 'menubar' } : {}}>{skinToneNodes}</div>
       </section>
     )
   }