feat/add keyboard control

css/emoji-mart.css

@@ -136,7 +136,10 @@
   cursor: default;
 }
 
-.emoji-mart-category .emoji-mart-emoji:hover:before {
+.emoji-mart-category .emoji-mart-emoji:focus { outline: 0 }
+
+.emoji-mart-category .emoji-mart-emoji:hover:before, 
+.emoji-mart-category .emoji-mart-emoji:focus:before {
   z-index: 0;
   content: "";
   position: absolute;
@@ -164,15 +167,14 @@
 }
 
 .emoji-mart-category-list {
+  border-spacing: 0;
   margin: 0;
   padding: 0;
 }
 
-.emoji-mart-category-list li {
-  list-style: none;
+.emoji-mart-category-list td {
   margin: 0;
   padding: 0;
-  display: inline-block;
 }
 
 .emoji-mart-emoji {

src/components/anchors.js

@@ -14,6 +14,7 @@ export default class Anchors extends React.PureComponent {
     }
 
     this.handleClick = this.handleClick.bind(this)
+    this.setButtonsRef = this.setButtonsRef.bind(this)
   }
 
   handleClick(e) {
@@ -23,12 +24,20 @@ export default class Anchors extends React.PureComponent {
     onAnchorClick(categories[index], index)
   }
 
+  setButtonsRef(c) {
+    this.buttons = c
+  }
+
   render() {
     var { categories, color, i18n, icons } = this.props,
       { selected } = this.state
 
     return (
-      <nav className="emoji-mart-anchors" aria-label={i18n.categorieslabel}>
+      <nav
+        className="emoji-mart-anchors"
+        aria-label={i18n.categorieslabel}
+        ref={this.setButtonsRef}
+      >
         {categories.map((category, i) => {
           var { id, name, anchor } = category,
             isSelected = name == selected

src/components/category.js

@@ -13,6 +13,7 @@ export default class Category extends React.Component {
     this.data = props.data
     this.setContainerRef = this.setContainerRef.bind(this)
     this.setLabelRef = this.setLabelRef.bind(this)
+    this.setEmojiTableRef = this.setEmojiTableRef.bind(this)
   }
 
   componentDidMount() {
@@ -145,6 +146,10 @@ export default class Category extends React.Component {
     this.container = c
   }
 
+  setEmojiTableRef(c) {
+    this.emojiTableRef = c
+  }
+
   setLabelRef(c) {
     this.label = c
   }
@@ -158,6 +163,7 @@ export default class Category extends React.Component {
         i18n,
         notFound,
         notFoundEmoji,
+        perLine,
       } = this.props,
       emojis = this.getEmojis(),
       labelStyles = {},
@@ -182,6 +188,52 @@ export default class Category extends React.Component {
 
     const label = i18n.categories[id] || name
 
+    const EmojiTable = ({ emojis }) => {
+      var trs = []
+      for (let i = 0; i < emojis.length; i += perLine) {
+        trs.push(
+          <tr role="row" key={`emoji-row-${i}`}>
+            {emojis.slice(i, i + perLine).map((emoji, j) => (
+              <td
+                role="gridcell"
+                tabIndex="-1"
+                key={
+                  (emoji.short_names && emoji.short_names.join('_')) || emoji
+                }
+              >
+                {NimbleEmoji({
+                  emoji: emoji,
+                  data: this.data,
+                  ...emojiProps,
+                  onKeyDown: (e, emoji) => {
+                    emojiProps.onKeyDown(
+                      e,
+                      emoji,
+                      {
+                        category: id,
+                        row: Math.floor(i / perLine),
+                        column: j,
+                      },
+                      this.emojiTableRef,
+                    )
+                  },
+                })}
+              </td>
+            ))}
+          </tr>,
+        )
+      }
+      return (
+        <table
+          ref={this.setEmojiTableRef}
+          className="emoji-mart-category-list"
+          role="grid"
+        >
+          <tbody>{trs}</tbody>
+        </table>
+      )
+    }
+
     return (
       <section
         ref={this.setContainerRef}
@@ -203,18 +255,7 @@ export default class Category extends React.Component {
           </span>
         </div>
 
-        <ul className="emoji-mart-category-list">
-          {emojis &&
-            emojis.map((emoji) => (
-              <li
-                key={
-                  (emoji.short_names && emoji.short_names.join('_')) || emoji
-                }
-              >
-                {NimbleEmoji({ emoji: emoji, data: this.data, ...emojiProps })}
-              </li>
-            ))}
-        </ul>
+        {emojis && <EmojiTable emojis={emojis} />}
 
         {emojis && !emojis.length && (
           <NotFound

src/components/emoji/nimble-emoji.js

@@ -54,6 +54,18 @@ const _handleLeave = (e, props) => {
   onLeave(emoji, e)
 }
 
+const _handleKeyDown = (e, props) => {
+  e.preventDefault()
+
+  if (!props.onKeyDown) {
+    return
+  }
+  var { onKeyDown } = props,
+    emoji = _getSanitizedData(props)
+
+  onKeyDown(e, emoji)
+}
+
 const _isNumeric = (value) => {
   return !isNaN(value - parseFloat(value))
 }
@@ -188,6 +200,7 @@ const NimbleEmoji = (props) => {
     Tag.name = 'button'
     Tag.props = {
       type: 'button',
+      tabIndex: '-1',
     }
   }
 
@@ -199,6 +212,8 @@ const NimbleEmoji = (props) => {
   } else {
     return (
       <Tag.name
+        id={`emoji-mart-${props.emoji}`}
+        onKeyDown={(e) => _handleKeyDown(e, props)}
         onClick={(e) => _handleClick(e, props)}
         onMouseEnter={(e) => _handleOver(e, props)}
         onMouseLeave={(e) => _handleLeave(e, props)}