Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[#104] Accessibility improvements and keyboard controls #106

Merged
merged 33 commits into from
Apr 17, 2021
Merged

[#104] Accessibility improvements and keyboard controls #106

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
33 commits
Select commit Hold shift + click to select a range
9c89eaf
Add accessibility properties to emoji picker.
serebrov Mar 14, 2021
6213ef2
Implement arrow left/right to select emojis.
serebrov Mar 14, 2021
8a006e6
Add Enter handler
serebrov Mar 20, 2021
54fed88
Add up and down arrow handlers
serebrov Mar 20, 2021
f69ddb0
Handle edge cases
serebrov Mar 20, 2021
1f8cdf2
Merge branch 'master' into 104-accessibility-improvements
serebrov Mar 28, 2021
e1d5760
Scroll to active emoji
serebrov Mar 28, 2021
fe33e0c
Keyboard navigation when search is active.
serebrov Mar 28, 2021
f5d1ce7
Update aria description for input
serebrov Mar 28, 2021
4bcacad
Prevent cursor movements
serebrov Mar 28, 2021
15fc50b
Fix picker tests
serebrov Apr 5, 2021
92cfdd6
Update emoji test snapshots
serebrov Apr 5, 2021
ffa58c9
Update virtual scroll picker tests
serebrov Apr 5, 2021
ae6c43c
Fix frequently used emojis test.
serebrov Apr 5, 2021
99d8f07
Fix search test
serebrov Apr 5, 2021
8e554b4
Add comment, remove commented out code
serebrov Apr 5, 2021
7abe9e6
Add tests for down and up arrows
serebrov Apr 5, 2021
a1414c0
Add test for Enter (select emoji)
serebrov Apr 5, 2021
670094f
Add test for left and right arrows
serebrov Apr 5, 2021
1c42e2f
Use $ref instead of the document.querySelector.
serebrov Apr 5, 2021
231c1ae
Use `perLine` property for row length instead of the hard-coded
serebrov Apr 5, 2021
d2f568e
Fix native emoji scaling.
serebrov Apr 5, 2021
b547e67
Fix up/down position when moving between categories.
serebrov Apr 5, 2021
b8d26a5
Fix keyboard tests.
serebrov Apr 5, 2021
cb35915
Remove unnecessary check
serebrov Apr 5, 2021
b0ebcc8
Update font size checks for native emojis.
serebrov Apr 5, 2021
c632c41
Formatting
serebrov Apr 5, 2021
f89c098
Better scroll handling
serebrov Apr 11, 2021
3ea8d26
Extract component logic
serebrov Apr 11, 2021
0ec7238
Update tests
serebrov Apr 11, 2021
b977e4a
Add comments for arrow control functions
serebrov Apr 11, 2021
83950d1
Fix view property initialization.
serebrov Apr 17, 2021
07581e9
Formatting
serebrov Apr 17, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
143 changes: 97 additions & 46 deletions css/emoji-mart.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -22,6 +22,9 @@
position: relative;
display: inline-block;
font-size: 0;
border: none;
background: none;
box-shadow: none;
}

.emoji-mart-emoji span {
Expand All @@ -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;
}

Expand All @@ -46,16 +51,16 @@
background-size: 5700%;
}
.emoji-type-image.emoji-set-apple {
background-image: url("https://unpkg.com/[email protected]/img/apple/sheets-256/64.png");
background-image: url('https://unpkg.com/[email protected]/img/apple/sheets-256/64.png');
}
.emoji-type-image.emoji-set-facebook {
background-image: url("https://unpkg.com/[email protected]/img/facebook/sheets-256/64.png");
background-image: url('https://unpkg.com/[email protected]/img/facebook/sheets-256/64.png');
}
.emoji-type-image.emoji-set-google {
background-image: url("https://unpkg.com/[email protected]/img/google/sheets-256/64.png");
background-image: url('https://unpkg.com/[email protected]/img/google/sheets-256/64.png');
}
.emoji-type-image.emoji-set-twitter {
background-image: url("https://unpkg.com/[email protected]/img/twitter/sheets-256/64.png");
background-image: url('https://unpkg.com/[email protected]/img/twitter/sheets-256/64.png');
}

.emoji-mart-bar {
Expand Down Expand Up @@ -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 {
Expand All @@ -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;
}

Expand Down Expand Up @@ -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;
Expand All @@ -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;
}

Expand All @@ -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 {
Expand All @@ -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;
Expand All @@ -241,7 +255,8 @@
}

.emoji-mart-preview-data {
left: 68px; right: 12px;
left: 68px;
right: 12px;
word-break: break-all;
}

Expand 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 {
Expand All @@ -279,7 +294,7 @@
}

.emoji-mart-title-label {
color: #999A9C;
color: #999a9c;
font-size: 21px;
font-weight: 300;
}
Expand All @@ -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 {
Expand Down Expand Up @@ -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%;
}
Expand Down Expand Up @@ -417,3 +464,7 @@
pointer-events: none;
z-index: -1;
}
.hidden {
display: none;
visibility: hidden;
}
6 changes: 4 additions & 2 deletions src/components/Emoji.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,9 @@
<template>
<span
<component
:is="tag"
Copy link
Owner Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

TODO: update docs, now we can specify tag for Emoji component. The span is useful to just show (non-clickable) emoji and button is useful for clickable emojis like those we have in the picker.

Note: this does not affect the picker as I do not use the Emoji component there (a performance fix, the regular tag is used there instead).

v-if="view.canRender"
:title="view.title"
:aria-label="view.ariaLabel"
:data-title="title"
class="emoji-mart-emoji"
@mouseenter="onMouseEnter"
Expand All @@ -11,7 +13,7 @@
<span :class="view.cssClass" :style="view.cssStyle">{{
view.content
}}</span>
</span>
</component>
</template>

<script>
Expand Down
Loading