Merge pull request #34 from omgmog/emoji-aria-titles

Added ARIA attributes to emoji and moved emoji markup to a Jekyll include

_includes/emoji-icon.html

@@ -0,0 +1 @@
+<i class="em em-{{ emoji.name }}" aria-role="presentation" aria-label="{{ emoji.description }}"></i>

_includes/emoji.html

@@ -0,0 +1,5 @@
+{% capture alternative_names %}
+{% if emoji.alt_names.size > 1 %}{{ emoji.alt_names | join:',' }}{% else %}{{ emoji.name }}
+{% endif %}
+{% endcapture %}
+{% include emoji-icon.html emoji=emoji %} em-<span class="name" data-alternative-names="{{ alternative_names | strip }}">{{ emoji.name }}</span>

index.html

@@ -23,15 +23,21 @@ <h1>Emoji CSS</h1>
     <p>
       Want to include emoji in your HTML? Just include the (minified) stylesheet below, then add <code>&lt;i&gt;</code> tags to insert emoji. That's it!<br>
       &#x2708; <b>Click the emoji code and it will be copied to your clipboard.</b>
-      <pre><code>&lt;link href="https://afeld.github.io/emoji-css/emoji.css" rel="stylesheet"&gt;
+    </p>
+{% highlight html %}
+<link href="https://afeld.github.io/emoji-css/emoji.css" rel="stylesheet">
+
+{% assign emoji=site.data.emoji[104] %}{% include emoji-icon.html %}
 
-&lt;i class="em em-some-emoji"&gt;&lt;/i&gt;</code></pre>
+{% endhighlight %}
+    <p>
       By default, the emoji will be served as PNGs. To use SVG instead, use the <code>em-svg</code> class instead of <code>em</code>. This will scale better, but has larger file size.
     </p>
     <ul class="emojis">
-      {% for emo in site.data.emoji %}
-        <li class="emoji" data-clipboard-text="&lt;i class=&quot;em em-{{ emo.name }}&quot;&gt;&lt;/i&gt;">
-          <i class="em em-{{ emo.name }}"></i> em-<span class="name" data-alternative-names="{{ emo.description | split: '#' | concat: emo.alt_names | join: ',' }}">{{ emo.name }}</span>
+      {% for emoji in site.data.emoji %}
+        {% capture clipboard_text %}{% include emoji-icon.html %}{% endcapture %}
+        <li class="emoji" data-clipboard-text="{{ clipboard_text | replace:'"','&quot;' | replace:'<','&lt;' | replace:'>','&gt;' }}">
+          {% include emoji.html %}
         </li>
       {% endfor %}
     </ul>