Merge pull request #106 from serebrov/104-accessibility-improvements

[#104] Accessibility improvements and keyboard controls
serebrov · Apr 17, 2021 · 0a79244 · 0a79244
2 parents 65355bc + 07581e9
commit 0a79244
Show file tree

Hide file tree

Showing 17 changed files with 38,948 additions and 20,829 deletions.
diff --git a/css/emoji-mart.css b/css/emoji-mart.css
@@ -5,7 +5,7 @@
 }
 
 .emoji-mart {
-  font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", sans-serif;
+  font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', sans-serif;
   font-size: 16px;
   /* display: inline-block; */
   display: flex;
@@ -22,6 +22,9 @@
   position: relative;
   display: inline-block;
   font-size: 0;
+  border: none;
+  background: none;
+  box-shadow: none;
 }
 
 .emoji-mart-emoji span {
@@ -35,7 +38,9 @@
 }
 
 .emoji-type-native {
-  font-family: "Segoe UI Emoji", "Segoe UI Symbol", "Segoe UI", "Apple Color Emoji", "Twemoji Mozilla", "Noto Color Emoji", "EmojiOne Color", "Android Emoji";
+  font-family: 'Segoe UI Emoji', 'Segoe UI Symbol', 'Segoe UI',
+    'Apple Color Emoji', 'Twemoji Mozilla', 'Noto Color Emoji', 'EmojiOne Color',
+    'Android Emoji';
   word-break: keep-all;
 }
 
@@ -98,7 +103,10 @@
   text-align: center;
   padding: 12px 4px;
   overflow: hidden;
-  transition: color .1s ease-out;
+  transition: color 0.1s ease-out;
+  border: none;
+  background: none;
+  box-shadow: none;
 }
 .emoji-mart-anchor:hover,
 .emoji-mart-anchor-selected {
@@ -111,8 +119,10 @@
 
 .emoji-mart-anchor-bar {
   position: absolute;
-  bottom: -3px; left: 0;
-  width: 100%; height: 3px;
+  bottom: -3px;
+  left: 0;
+  width: 100%;
+  height: 3px;
   background-color: #464646;
 }
 
@@ -145,7 +155,7 @@
   font-size: 16px;
   display: block;
   width: 100%;
-  padding: .2em .6em;
+  padding: 0.2em 0.6em;
   border-radius: 25px;
   border: 1px solid #d9d9d9;
   outline: 0;
@@ -166,18 +176,21 @@
   cursor: default;
 }
 
-.emoji-mart-category .emoji-mart-emoji:hover:before {
+.emoji-mart-category .emoji-mart-emoji:hover:before,
+.emoji-mart-emoji-selected:before {
   z-index: 0;
-  content: "";
+  content: '';
   position: absolute;
-  top: 0; left: 0;
-  width: 100%; height: 100%;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
   background-color: #f4f4f4;
   border-radius: 100%;
   opacity: 0;
 }
-
-.emoji-mart-category .emoji-mart-emoji:hover:before {
+.emoji-mart-category .emoji-mart-emoji:hover:before,
+.emoji-mart-emoji-selected:before {
   opacity: 1;
 }
 
@@ -192,13 +205,14 @@
   /* position: -webkit-sticky; */
 }
 
-.emoji-mart-category-label span {
+.emoji-mart-category-label h3 {
   display: block;
+  font-size: 16px;
   width: 100%;
   font-weight: 500;
   padding: 5px 6px;
   background-color: #fff;
-  background-color: rgba(255, 255, 255, .95);
+  background-color: rgba(255, 255, 255, 0.95);
 }
 
 .emoji-mart-emoji {
@@ -217,7 +231,7 @@
   display: none;
 }
 .emoji-mart-no-results .emoji-mart-no-results-label {
-  margin-top: .2em;
+  margin-top: 0.2em;
 }
 .emoji-mart-no-results .emoji-mart-emoji:hover:before {
   content: none;
@@ -241,7 +255,8 @@
 }
 
 .emoji-mart-preview-data {
-  left: 68px; right: 12px;
+  left: 68px;
+  right: 12px;
   word-break: break-all;
 }
 
@@ -261,7 +276,7 @@
 .emoji-mart-preview-shortname + .emoji-mart-preview-shortname,
 .emoji-mart-preview-shortname + .emoji-mart-preview-emoticon,
 .emoji-mart-preview-emoticon + .emoji-mart-preview-emoticon {
-  margin-left: .5em;
+  margin-left: 0.5em;
 }
 
 .emoji-mart-preview-emoticon {
@@ -279,7 +294,7 @@
 }
 
 .emoji-mart-title-label {
-  color: #999A9C;
+  color: #999a9c;
   font-size: 21px;
   font-weight: 300;
 }
@@ -298,57 +313,83 @@
 }
 
 .emoji-mart-skin-swatches-opened .emoji-mart-skin-swatch-selected:after {
-  opacity: .75;
+  opacity: 0.75;
 }
 
 .emoji-mart-skin-swatch {
   display: inline-block;
   width: 0;
   vertical-align: middle;
   transition-property: width, padding;
-  transition-duration: .125s;
+  transition-duration: 0.125s;
   transition-timing-function: ease-out;
 }
 
-.emoji-mart-skin-swatch:nth-child(1) { transition-delay: 0s }
-.emoji-mart-skin-swatch:nth-child(2) { transition-delay: .03s }
-.emoji-mart-skin-swatch:nth-child(3) { transition-delay: .06s }
-.emoji-mart-skin-swatch:nth-child(4) { transition-delay: .09s }
-.emoji-mart-skin-swatch:nth-child(5) { transition-delay: .12s }
-.emoji-mart-skin-swatch:nth-child(6) { transition-delay: .15s }
+.emoji-mart-skin-swatch:nth-child(1) {
+  transition-delay: 0s;
+}
+.emoji-mart-skin-swatch:nth-child(2) {
+  transition-delay: 0.03s;
+}
+.emoji-mart-skin-swatch:nth-child(3) {
+  transition-delay: 0.06s;
+}
+.emoji-mart-skin-swatch:nth-child(4) {
+  transition-delay: 0.09s;
+}
+.emoji-mart-skin-swatch:nth-child(5) {
+  transition-delay: 0.12s;
+}
+.emoji-mart-skin-swatch:nth-child(6) {
+  transition-delay: 0.15s;
+}
 
 .emoji-mart-skin-swatch-selected {
   position: relative;
   width: 16px;
   padding: 0 2px;
 }
 .emoji-mart-skin-swatch-selected:after {
-  content: "";
+  content: '';
   position: absolute;
-  top: 50%; left: 50%;
-  width: 4px; height: 4px;
+  top: 50%;
+  left: 50%;
+  width: 4px;
+  height: 4px;
   margin: -2px 0 0 -2px;
   background-color: #fff;
   border-radius: 100%;
   pointer-events: none;
   opacity: 0;
-  transition: opacity .2s ease-out;
+  transition: opacity 0.2s ease-out;
 }
 
 .emoji-mart-skin {
   display: inline-block;
-  width: 100%; padding-top: 100%;
+  width: 100%;
+  padding-top: 100%;
   max-width: 12px;
   border-radius: 100%;
 }
 
-.emoji-mart-skin-tone-1 { background-color: #ffc93a }
-.emoji-mart-skin-tone-2 { background-color: #fadcbc }
-.emoji-mart-skin-tone-3 { background-color: #e0bb95 }
-.emoji-mart-skin-tone-4 { background-color: #bf8f68 }
-.emoji-mart-skin-tone-5 { background-color: #9b643d }
-.emoji-mart-skin-tone-6 { background-color: #594539 }
-
+.emoji-mart-skin-tone-1 {
+  background-color: #ffc93a;
+}
+.emoji-mart-skin-tone-2 {
+  background-color: #fadcbc;
+}
+.emoji-mart-skin-tone-3 {
+  background-color: #e0bb95;
+}
+.emoji-mart-skin-tone-4 {
+  background-color: #bf8f68;
+}
+.emoji-mart-skin-tone-5 {
+  background-color: #9b643d;
+}
+.emoji-mart-skin-tone-6 {
+  background-color: #594539;
+}
 
 /* vue-virtual-scroller/dist/vue-virtual-scroller.css */
 .emoji-mart .vue-recycle-scroller {
@@ -378,17 +419,23 @@
   left: 0;
   will-change: transform;
 }
-.emoji-mart .vue-recycle-scroller.direction-vertical .vue-recycle-scroller__item-wrapper {
+.emoji-mart
+  .vue-recycle-scroller.direction-vertical
+  .vue-recycle-scroller__item-wrapper {
   width: 100%;
 }
-.emoji-mart .vue-recycle-scroller.direction-horizontal .vue-recycle-scroller__item-wrapper {
+.emoji-mart
+  .vue-recycle-scroller.direction-horizontal
+  .vue-recycle-scroller__item-wrapper {
   height: 100%;
 }
-.emoji-mart .vue-recycle-scroller.ready.direction-vertical
+.emoji-mart
+  .vue-recycle-scroller.ready.direction-vertical
   .vue-recycle-scroller__item-view {
   width: 100%;
 }
-.emoji-mart .vue-recycle-scroller.ready.direction-horizontal
+.emoji-mart
+  .vue-recycle-scroller.ready.direction-horizontal
   .vue-recycle-scroller__item-view {
   height: 100%;
 }
@@ -417,3 +464,7 @@
   pointer-events: none;
   z-index: -1;
 }
+.hidden {
+  display: none;
+  visibility: hidden;
+}
diff --git a/spec/__snapshots__/emoji-spec.js.snap b/spec/__snapshots__/emoji-spec.js.snap
@@ -2,6 +2,7 @@
 
 exports[`Emoji native renders correctly native emoji 1`] = `
 <span
+  aria-label="☝️, point_up"
   class="emoji-mart-emoji"
 >
   <span
@@ -14,6 +15,7 @@ exports[`Emoji native renders correctly native emoji 1`] = `
 
 exports[`Emoji renders correctly 1`] = `
 <span
+  aria-label="☝️, point_up"
   class="emoji-mart-emoji"
 >
   <span
@@ -27,6 +29,7 @@ exports[`Emoji renders correctly 1`] = `
 
 exports[`Emoji renders correctly native emoji 1`] = `
 <span
+  aria-label="☝️, point_up"
   class="emoji-mart-emoji"
 >
   <span