A11y: Enhance card example (#953)

The card needs more enhancements but I need more help to determine the perfect solution for it.

the issue we face is:
- the markup needs to change and when to change the markup the style needs to change to be suitable for it.
example:
`
  <a href="#" class="card-header-icon" aria-label="more options">
      <span class="icon">
        <i class="fa fa-angle-down" aria-hidden="true"></i>
      </span>
  </a>
 <a href="#" class="card-footer-item">Save</a>
 <a href="#" class="card-footer-item">Edit</a>
 <a href="#" class="card-footer-item">Delete</a>
`
should be:
`
  <button class="card-header-icon" aria-label="more options">
      <span class="icon">
        <i class="fa fa-angle-down" aria-hidden="true"></i>
      </span>
  </button>
<button class="card-footer-item">Save</button>
<button  class="card-footer-item">Edit</button>
<button class="card-footer-item">Delete</button>
`
when I do that the style change and when I use the `button` class name the style change also, so you need to try it and edit the style as you need to card show to people.

- I replaced the <small> with <time> but the time does not have the same `font-size` so you maybe need to set `font-size` to time

diff --git a/docs/documentation/components/card.html b/docs/documentation/components/card.html
index 7ae48e52b0c7a25706c845a0d0b2e9d7ab03117f..65845e7f2ba4284d5daf575c2e360c788493d6e1 100644 (file)
--- a/docs/documentation/components/card.html
+++ b/docs/documentation/components/card.html
@@ -23,14 +23,14 @@ variables:
 <div class="card">
   <div class="card-image">
     <figure class="image is-4by3">
-      <img src="{{site.url}}/images/placeholders/1280x960.png" alt="Image">
+      <img src="{{site.url}}/images/placeholders/1280x960.png" alt="descripe image">
     </figure>
   </div>
   <div class="card-content">
     <div class="media">
       <div class="media-left">
         <figure class="image is-48x48">
-          <img src="{{site.url}}/images/placeholders/96x96.png" alt="Image">
+          <img src="{{site.url}}/images/placeholders/96x96.png" alt="descripe image">
         </figure>
       </div>
       <div class="media-content">
@@ -42,9 +42,9 @@ variables:
     <div class="content">
       Lorem ipsum dolor sit amet, consectetur adipiscing elit.
       Phasellus nec iaculis mauris. <a>@bulmaio</a>.
-      <a>#css</a> <a>#responsive</a>
+      <a href="#">#css</a> <a href="#">#responsive</a>
       <br>
-      <small>11:09 PM - 1 Jan 2016</small>
+      <time datetime="2016-1-1">11:09 PM - 1 Jan 2016</time>
     </div>
   </div>
 </div>
@@ -56,24 +56,24 @@ variables:
     <p class="card-header-title">
       Component
     </p>
-    <a class="card-header-icon">
+    <a href="#" class="card-header-icon" aria-label="more options">
       <span class="icon">
-        <i class="fa fa-angle-down"></i>
+        <i class="fa fa-angle-down" aria-hidden="true"></i>
       </span>
     </a>
   </header>
   <div class="card-content">
     <div class="content">
       Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus nec iaculis mauris.
-      <a>@bulmaio</a>. <a>#css</a> <a>#responsive</a>
+      <a href="#">@bulmaio</a>. <a href="#">#css</a> <a href="#">#responsive</a>
       <br>
-      <small>11:09 PM - 1 Jan 2016</small>
+      <time datetime="2016-1-1">11:09 PM - 1 Jan 2016</time>
     </div>
   </div>
   <footer class="card-footer">
-    <a class="card-footer-item">Save</a>
-    <a class="card-footer-item">Edit</a>
-    <a class="card-footer-item">Delete</a>
+    <a href="#" class="card-footer-item">Save</a>
+    <a href="#" class="card-footer-item">Edit</a>
+    <a href="#" class="card-footer-item">Delete</a>
   </footer>
 </div>
 {% endcapture %}