feat: improve a11y of emoji list

see emoji-mart #284
scttcper · Mar 15, 2019 · 57fa8d0 · 57fa8d0
1 parent 6ead7cb
commit 57fa8d0
Show file tree

Hide file tree

Showing 4 changed files with 17 additions and 4 deletions.
diff --git a/src/lib/emoji/emoji.component.ts b/src/lib/emoji/emoji.component.ts
@@ -42,19 +42,20 @@ 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">
     <span [ngStyle]="style">
       <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
@@ -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
@@ -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
@@ -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 {