From 57fa8d0436aae21c2b34bfe5830fbdd23ea8f4e0 Mon Sep 17 00:00:00 2001
From: Scott Cooper <scttcper@gmail.com>
Date: Fri, 15 Mar 2019 09:43:16 -0700
Subject: [PATCH] feat: improve a11y of emoji list see emoji-mart #284

---
 src/lib/emoji/emoji.component.ts     | 11 +++++++++--
 src/lib/picker/picker.component.html |  4 ++--
 src/lib/picker/picker.component.ts   |  1 +
 src/lib/picker/picker.css            |  5 +++++
 4 files changed, 17 insertions(+), 4 deletions(-)

diff --git a/src/lib/emoji/emoji.component.ts b/src/lib/emoji/emoji.component.ts
index 3fafc281..1facb936 100644
--- a/src/lib/emoji/emoji.component.ts
+++ b/src/lib/emoji/emoji.component.ts
@@ -42,11 +42,12 @@ export interface EmojiEvent {
 @Component({
   selector: 'ngx-emoji',
   template: `
-  <span *ngIf="isVisible"
+  <button *ngIf="isVisible"
     (click)="handleClick($event)"
     (mouseenter)="handleOver($event)"
     (mouseleave)="handleLeave($event)"
     [title]="title"
+    [attr.aria-label]="label"
     class="emoji-mart-emoji"
     [class.emoji-mart-emoji-native]="isNative"
     [class.emoji-mart-emoji-custom]="custom">
@@ -54,7 +55,7 @@ export interface EmojiEvent {
       <ng-template [ngIf]="isNative">{{ unified }}</ng-template>
       <ng-content></ng-content>
     </span>
-  </span>
+  </button>
   `,
   changeDetection: ChangeDetectionStrategy.OnPush,
   preserveWhitespaces: false,
@@ -79,6 +80,7 @@ export class EmojiComponent implements OnChanges, Emoji {
   @Output() emojiClick: Emoji['emojiClick'] = new EventEmitter();
   style: any;
   title = '';
+  label = '';
   unified?: string | null;
   custom = false;
   isVisible = true;
@@ -110,6 +112,11 @@ export class EmojiComponent implements OnChanges, Emoji {
       return (this.isVisible = false);
     }
 
+    this.label = [data.native]
+      .concat(data.shortNames)
+      .filter(Boolean)
+      .join(', ');
+
     if (this.isNative && data.unified && data.native) {
       // hide older emoji before the split into gendered emoji
       this.style = { fontSize: `${this.size}px` };
diff --git a/src/lib/picker/picker.component.html b/src/lib/picker/picker.component.html
index c93b7f52..dfd6353a 100644
--- a/src/lib/picker/picker.component.html
+++ b/src/lib/picker/picker.component.html
@@ -23,7 +23,7 @@
     [icons]="searchIcons"
     [emojisToShowFilter]="emojisToShowFilter"
   ></emoji-search>
-  <div #scrollRef class="emoji-mart-scroll" (scroll)="handleScroll()">
+  <section #scrollRef class="emoji-mart-scroll" (scroll)="handleScroll()" [attr.aria-label]="i18n.emojilist">
     <emoji-category
       *ngFor="let category of activeCategories; let idx = index; trackBy: categoryTrack"
       #categoryRef
@@ -50,7 +50,7 @@
       (emojiLeave)="handleEmojiLeave()"
       (emojiClick)="handleEmojiClick($event)"
     ></emoji-category>
-  </div>
+  </section>
   <div class="emoji-mart-bar" *ngIf="showPreview">
     <emoji-preview
       #previewRef
diff --git a/src/lib/picker/picker.component.ts b/src/lib/picker/picker.component.ts
index c6ad7855..bc73a483 100644
--- a/src/lib/picker/picker.component.ts
+++ b/src/lib/picker/picker.component.ts
@@ -30,6 +30,7 @@ import { measureScrollbar } from './utils';
 
 const I18N: any = {
   search: 'Search',
+  emojilist: 'List of emoji',
   notfound: 'No Emoji Found',
   categories: {
     search: 'Search Results',
diff --git a/src/lib/picker/picker.css b/src/lib/picker/picker.css
index 18e353a7..8e9dd7e1 100644
--- a/src/lib/picker/picker.css
+++ b/src/lib/picker/picker.css
@@ -144,6 +144,11 @@
   position: relative;
   display: inline-block;
   font-size: 0;
+  margin: 0;
+  padding: 0;
+  border: none;
+  background: none;
+  box-shadow: none;
 }
 
 .emoji-mart-emoji-native {