Accessibility: Better aria label for emoji groups

src/partials/emoji-picker.html

@@ -1,7 +1,7 @@
 <div class="twemoji-picker">
     <div class="tab">
         <input type="radio" id="tab-0" name="tabs" checked>
-        <label for="tab-0" title="Smileys &amp; People">
+        <label for="tab-0" title="Smileys &amp; People" aria-label="Smileys &amp; People Emoji">
             <img src="emoji/people.svg" class="em-people" height="24" width="24" role="button" tabindex="0"></span>
         </label>
         <div class="content" role="listbox">
@@ -1139,7 +1139,7 @@
    </div>
     <div class="tab">
         <input type="radio" id="tab-1" name="tabs">
-        <label for="tab-1" title="Animals &amp; Nature">
+        <label for="tab-1" title="Animals &amp; Nature" aria-label="Animals &amp; Nature Emoji">
             <img src="emoji/nature.svg" class="em-nature" height="24" width="24" role="button" tabindex="0"></span>
         </label>
         <div class="content" role="listbox">
@@ -1324,7 +1324,7 @@
    </div>
     <div class="tab">
         <input type="radio" id="tab-2" name="tabs">
-        <label for="tab-2" title="Food &amp; Drink">
+        <label for="tab-2" title="Food &amp; Drink" aria-label="Food &amp; Drink Emoji">
             <img src="emoji/food.svg" class="em-food" height="24" width="24" role="button" tabindex="0"></span>
         </label>
         <div class="content" role="listbox">
@@ -1437,7 +1437,7 @@
    </div>
     <div class="tab">
         <input type="radio" id="tab-3" name="tabs">
-        <label for="tab-3" title="Activity">
+        <label for="tab-3" title="Activity" aria-label="Activity Emoji">
             <img src="emoji/activity.svg" class="em-activity" height="24" width="24" role="button" tabindex="0"></span>
         </label>
         <div class="content" role="listbox">
@@ -1685,7 +1685,7 @@
    </div>
     <div class="tab">
         <input type="radio" id="tab-4" name="tabs">
-        <label for="tab-4" title="Travel &amp; Places">
+        <label for="tab-4" title="Travel &amp; Places" aria-label="Travel &amp; Places Emoji">
             <img src="emoji/travel.svg" class="em-travel" height="24" width="24" role="button" tabindex="0"></span>
         </label>
         <div class="content" role="listbox">
@@ -1815,7 +1815,7 @@
    </div>
     <div class="tab">
         <input type="radio" id="tab-5" name="tabs">
-        <label for="tab-5" title="Objects">
+        <label for="tab-5" title="Objects" aria-label="Objects Emoji">
             <img src="emoji/objects.svg" class="em-objects" height="24" width="24" role="button" tabindex="0"></span>
         </label>
         <div class="content" role="listbox">
@@ -2030,7 +2030,7 @@
    </div>
     <div class="tab">
         <input type="radio" id="tab-6" name="tabs">
-        <label for="tab-6" title="Symbols">
+        <label for="tab-6" title="Symbols" aria-label="Symbols Emoji">
             <img src="emoji/symbols.svg" class="em-symbols" height="24" width="24" role="button" tabindex="0"></span>
         </label>
         <div class="content" role="listbox">
@@ -2313,7 +2313,7 @@
    </div>
     <div class="tab">
         <input type="radio" id="tab-7" name="tabs">
-        <label for="tab-7" title="Flags">
+        <label for="tab-7" title="Flags" aria-label="Flags Emoji">
             <img src="emoji/flags.svg" class="em-flags" height="24" width="24" role="button" tabindex="0"></span>
         </label>
         <div class="content" role="listbox">

tools/twemoji/generate-emoji-picker.py

@@ -37,7 +37,7 @@ print('<div class="twemoji-picker">')
 for i, category in enumerate(category_order):
     print('    <div class="tab">')
     print('        <input type="radio" id="tab-%d" name="tabs"%s>' % (i, ' checked' if i == 0 else ''))
-    print('        <label for="tab-%d" title="%s">' % (i, category['name']))
+    print('        <label for="tab-{0}" title="{1}" aria-label="{1} Emoji">'.format(i, category['name']))
     print('            <img src="emoji/{0}.svg" class="em-{0}" height="24" width="24" role="button" tabindex="0"></span>'.format(category['id']))
     print('        </label>')
     print('        <div class="content" role="listbox">')