Add an option to disable use of <button>

i.e. Latest version of Chrome (~v80) can’t render Pirate Flag (🏴‍☠️) on a <button>

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 |

docs/index.js

@@ -45,6 +45,7 @@ class Example extends React.Component {
       emoji: 'point_up',
       title: 'Pick your emoji…',
       custom: CUSTOM_EMOJIS,
+      useButton: false,
     }
   }
 

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',

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,

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: [],

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),

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}
     />
   ))