From 17cf50f7bafbbd2dbff9cabe0737e457a8aa1e72 Mon Sep 17 00:00:00 2001
From: Etienne Lemay <etienne@heliom.ca>
Date: Mon, 16 Mar 2020 11:44:02 -0400
Subject: [PATCH] =?UTF-8?q?Add=20an=20option=20to=20disable=20use=20of=20<?=
 =?UTF-8?q?button>=20i.e.=20Latest=20version=20of=20Chrome=20(~v80)=20can?=
 =?UTF-8?q?=E2=80=99t=20render=20Pirate=20Flag=20(=F0=9F=8F=B4=E2=80=8D?=
 =?UTF-8?q?=E2=98=A0=EF=B8=8F)=20on=20a=20<button>?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 README.md                              | 1 +
 docs/index.js                          | 1 +
 src/components/emoji/nimble-emoji.js   | 2 +-
 src/components/picker/nimble-picker.js | 2 ++
 src/utils/shared-default-props.js      | 2 ++
 src/utils/shared-props.js              | 2 ++
 stories/index.js                       | 1 +
 7 files changed, 10 insertions(+), 1 deletion(-)

diff --git a/README.md b/README.md
index d1e3f13..736f50a 100644
--- a/README.md
+++ b/README.md
@@ -48,6 +48,7 @@ import { Picker } from 'emoji-mart'
 | **showPreview** | | `true` | Display preview section |
 | **showSkinTones** | | `true` | Display skin tones picker. Disable both this and `showPreview` to remove the footer entirely. |
 | **emojiTooltip** | | `false` | Show emojis short name when hovering (title) |
+| **useButton** | | `true` | When clickable, render emojis with a `<button>`. Some browsers have issues rendering certain emojis on a button, so you might want to disable this. It is better for accessibility to use buttons. |
 | **skin** | | | Forces skin color: `1, 2, 3, 4, 5, 6` |
 | **defaultSkin** | | `1` | Default skin color: `1, 2, 3, 4, 5, 6` |
 | **skinEmoji** | | | The emoji used to pick a skin tone. Uses an emoji-less skin tone picker by default |
diff --git a/docs/index.js b/docs/index.js
index 1ea2ebe..b647af5 100644
--- a/docs/index.js
+++ b/docs/index.js
@@ -45,6 +45,7 @@ class Example extends React.Component {
       emoji: 'point_up',
       title: 'Pick your emoji…',
       custom: CUSTOM_EMOJIS,
+      useButton: false,
     }
   }
 
diff --git a/src/components/emoji/nimble-emoji.js b/src/components/emoji/nimble-emoji.js
index 74d8b47..0d795bb 100644
--- a/src/components/emoji/nimble-emoji.js
+++ b/src/components/emoji/nimble-emoji.js
@@ -184,7 +184,7 @@ const NimbleEmoji = (props) => {
     props: {},
   }
 
-  if (props.onClick) {
+  if (props.onClick && props.useButton) {
     Tag.name = 'button'
     Tag.props = {
       type: 'button',
diff --git a/src/components/picker/nimble-picker.js b/src/components/picker/nimble-picker.js
index 6f63a56..6f5fe89 100644
--- a/src/components/picker/nimble-picker.js
+++ b/src/components/picker/nimble-picker.js
@@ -521,6 +521,7 @@ export default class NimblePicker extends React.PureComponent {
         showPreview,
         showSkinTones,
         emojiTooltip,
+        useButton,
         include,
         exclude,
         recent,
@@ -601,6 +602,7 @@ export default class NimblePicker extends React.PureComponent {
                   forceSize: native,
                   tooltip: emojiTooltip,
                   backgroundImageFn: backgroundImageFn,
+                  useButton: useButton,
                   onOver: this.handleEmojiOver,
                   onLeave: this.handleEmojiLeave,
                   onClick: this.handleEmojiClick,
diff --git a/src/utils/shared-default-props.js b/src/utils/shared-default-props.js
index c4c869e..e9f9961 100644
--- a/src/utils/shared-default-props.js
+++ b/src/utils/shared-default-props.js
@@ -7,6 +7,7 @@ const EmojiDefaultProps = {
   native: false,
   forceSize: false,
   tooltip: false,
+  useButton: true,
   backgroundImageFn: (set, sheetSize) =>
     `https://unpkg.com/emoji-datasource-${set}@${EMOJI_DATASOURCE_VERSION}/img/${set}/sheets-256/${sheetSize}.png`,
 }
@@ -36,6 +37,7 @@ const PickerDefaultProps = {
     matchMedia('(prefers-color-scheme: dark)').matches
   ),
   emojiTooltip: EmojiDefaultProps.tooltip,
+  useButton: EmojiDefaultProps.useButton,
   autoFocus: false,
   enableFrequentEmojiSort: false,
   custom: [],
diff --git a/src/utils/shared-props.js b/src/utils/shared-props.js
index 8f6eb85..f006407 100644
--- a/src/utils/shared-props.js
+++ b/src/utils/shared-props.js
@@ -10,6 +10,7 @@ const EmojiPropTypes = {
   native: PropTypes.bool,
   forceSize: PropTypes.bool,
   tooltip: PropTypes.bool,
+  useButton: PropTypes.bool,
   skin: PropTypes.oneOf([1, 2, 3, 4, 5, 6]),
   sheetSize: PropTypes.oneOf([16, 20, 32, 64]),
   sheetColumns: PropTypes.number,
@@ -39,6 +40,7 @@ const PickerPropTypes = {
   showPreview: PropTypes.bool,
   showSkinTones: PropTypes.bool,
   emojiTooltip: EmojiPropTypes.tooltip,
+  useButton: EmojiPropTypes.useButton,
   include: PropTypes.arrayOf(PropTypes.string),
   exclude: PropTypes.arrayOf(PropTypes.string),
   recent: PropTypes.arrayOf(PropTypes.string),
diff --git a/stories/index.js b/stories/index.js
index 41231a4..32e7e93 100644
--- a/stories/index.js
+++ b/stories/index.js
@@ -63,6 +63,7 @@ storiesOf('Picker', module)
       showPreview={boolean('Show preview', true)}
       showSkinTones={boolean('Show skin tones', true)}
       enableFrequentEmojiSort={boolean('Enable frequent sort', false)}
+      useButton={false}
       custom={CUSTOM_EMOJIS}
     />
   ))