add aria labels to nimble emoji buttons

missive · Mar 12, 2019 · bc2e737 · bc2e737
1 parent ef4f1a0
commit bc2e737
Showing 1 changed file with 9 additions and 2 deletions.
diff --git a/src/components/emoji/nimble-emoji.js b/src/components/emoji/nimble-emoji.js
@@ -98,6 +98,12 @@ const NimbleEmoji = (props) => {
     style = {},
     children = props.children,
     className = 'emoji-mart-emoji',
+    nativeEmoji = unified && unifiedToNative(unified),
+    // combine the emoji itself and all shortcodes into an accessible label
+    label = [nativeEmoji]
+      .concat(short_names)
+      .filter(Boolean)
+      .join(', '),
     title = null
 
   if (!unified && !custom) {
@@ -115,7 +121,7 @@ const NimbleEmoji = (props) => {
   if (props.native && unified) {
     className += ' emoji-mart-emoji-native'
     style = { fontSize: props.size }
-    children = unifiedToNative(unified)
+    children = nativeEmoji
 
     if (props.forceSize) {
       style.display = 'inline-block'
@@ -173,7 +179,7 @@ const NimbleEmoji = (props) => {
 
   if (props.html) {
     style = _convertStyleToCSS(style)
-    return `<button style='${style}' ${
+    return `<button style='${style}' aria-label='${label}' ${
       title ? `title='${title}'` : ''
     } class='${className}'>${children || ''}</button>`
   } else {
@@ -183,6 +189,7 @@ const NimbleEmoji = (props) => {
         onClick={(e) => _handleClick(e, props)}
         onMouseEnter={(e) => _handleOver(e, props)}
         onMouseLeave={(e) => _handleLeave(e, props)}
+        aria-label={label}
         title={title}
         className={className}
       >