[#104] Accessibility improvements and keyboard controls #106
Conversation
It now works with VoiceOver, it is possible to loop through the picker elements and "click" them. It does not work with regular keyboard control (no Voice Over, just arrow keys). This is actually expected, and the parent project [change](missive/emoji-mart#284) also states that: > should I now be able to type, then navigate results via arrow keys? Yes, in terms of improving the accessibility of emoji-mart, I didn't make it a full autocomplete pattern where you can press the arrow keys to navigate between results. You have to just use the regions to move around after typing into the search bar. Certainly not a perfect design a11y-wise, but it's at least usable with a keyboard, whereas before it wasn't.
It is incomplete yet and does not work when search is active (when something is in the search field, arrows move cursor inside the field).
| @@ -1,7 +1,9 @@ | |||
| <template> | |||
| <span | |||
| <component | |||
| :is="tag" | |||
There was a problem hiding this comment.
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).
src/components/Picker.vue
Outdated
| if (this.previewEmojiIdx > 0) { | ||
| this.previewEmojiIdx -= 1 | ||
| } else { | ||
| this.previewEmojiCategoryIdx -= 1 | ||
| if (this.previewEmojiCategoryIdx < 0) { | ||
| this.previewEmojiCategoryIdx = 0 | ||
| } else { | ||
| this.previewEmojiIdx = | ||
| this.categories[this.previewEmojiCategoryIdx].emojis.length - 1 | ||
| } | ||
| } |
There was a problem hiding this comment.
Can this logic be simplified? Does not look really good.
The idea is that we track the active category and active emoji inside the category. When we go to the first emoji in the currently active category, we switch to the last emoji in the previous category.
We also need to make sure we stop at the first category.
A similar logic is used below for the right arrow.
Note: I first implemented this by using allEmojis mapping (idx -> emoji id), but we also need to know the active category because:
- Emojis can be in more that one category (the 'Frequently Used' category contains emojis from other categories). So with
allEmojisimplementation the emoji was highlighted in all categories at the same time (we see two highlights) - Active category will be needed for up/down arrows. We can not just do something activeIndex = += 10 to switch to the next row as the last row in the category may havel less then 10 emojis.
Unify search and non-search categories.
We had 10 native emoji per line while perLine parameter is set to 9.
Codecov Report
@@ Coverage Diff @@
## master #106 +/- ##
==========================================
- Coverage 89.56% 89.44% -0.13%
==========================================
Files 15 16 +1
Lines 556 644 +88
Branches 116 133 +17
==========================================
+ Hits 498 576 +78
- Misses 53 62 +9
- Partials 5 6 +1
Continue to review full report at Codecov.
|
Codecov Report
@@ Coverage Diff @@
## master #106 +/- ##
==========================================
- Coverage 89.56% 89.44% -0.13%
==========================================
Files 15 16 +1
Lines 556 644 +88
Branches 116 133 +17
==========================================
+ Hits 498 576 +78
- Misses 53 62 +9
- Partials 5 6 +1
Continue to review full report at Codecov.
|
[#104] Accessibility improvements and keyboard controls