diff --git a/README.md b/README.md
index b853d17..6c11b27 100644
--- a/README.md
+++ b/README.md
@@ -59,6 +59,7 @@ import { Picker } from 'emoji-mart'
```js
search: 'Search',
clear: 'Clear', // Accessible label on "clear" button
+emojilist: 'List of emoji', // Accessible title for list of emoji
notfound: 'No Emoji Found',
skintext: 'Choose your default skin tone',
categories: {
diff --git a/css/emoji-mart.css b/css/emoji-mart.css
index 15bb71b..d2e4a65 100644
--- a/css/emoji-mart.css
+++ b/css/emoji-mart.css
@@ -164,6 +164,11 @@
position: relative;
display: inline-block;
font-size: 0;
+ margin: 0;
+ padding: 0;
+ border: none;
+ background: none;
+ box-shadow: none;
}
.emoji-mart-emoji-native {
diff --git a/src/components/category.js b/src/components/category.js
index 760be3d..62d813a 100644
--- a/src/components/category.js
+++ b/src/components/category.js
@@ -176,9 +176,10 @@ export default class Category extends React.Component {
}
return (
-
-
+
{i18n.categories[id]}
@@ -206,7 +211,7 @@ export default class Category extends React.Component {
emojiProps={emojiProps}
/>
)}
-
+
)
}
}
diff --git a/src/components/emoji/nimble-emoji.js b/src/components/emoji/nimble-emoji.js
index 6e8c326..23ad4cd 100644
--- 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,21 +179,22 @@ const NimbleEmoji = (props) => {
if (props.html) {
style = _convertStyleToCSS(style)
- return `${children || ''}`
+ } class='${className}'>${children || ''}`
} else {
return (
- _handleClick(e, props)}
onMouseEnter={(e) => _handleOver(e, props)}
onMouseLeave={(e) => _handleLeave(e, props)}
+ aria-label={label}
title={title}
className={className}
>
{children}
-
+
)
}
}
diff --git a/src/components/picker/nimble-picker.js b/src/components/picker/nimble-picker.js
index 9edfb3e..57793cf 100644
--- a/src/components/picker/nimble-picker.js
+++ b/src/components/picker/nimble-picker.js
@@ -19,6 +19,7 @@ import { PickerDefaultProps } from '../../utils/shared-default-props'
const I18N = {
search: 'Search',
clear: 'Clear', // Accessible label on "clear" button
+ emojilist: 'List of emoji', // Accessible title for list of emoji
notfound: 'No Emoji Found',
skintext: 'Choose your default skin tone',
categories: {
@@ -520,9 +521,10 @@ export default class NimblePicker extends React.PureComponent {
autoFocus={autoFocus}
/>
-
{this.getCategories().map((category, i) => {
@@ -566,7 +568,7 @@ export default class NimblePicker extends React.PureComponent {
/>
)
})}
-
+
{(showPreview || showSkinTones) && (