fix(Cards): a11y fixes (#261)

- Add `title` attribute to card titles so that users can hover over card titles to see full title
- Add `<title>` nodes to OverflowMenu SVG for a11y
- Change `h3` and `h4` elements to `p` elements and use new typography classes for font-size

Author: hellobrian

src/components/card/card--with-status.html

@@ -3,6 +3,7 @@
     <!-- OverflowMenu -->
     <div data-overflow-menu class="bx--overflow-menu" tabindex="0" aria-label="List of options">
       <svg class="bx--overflow-menu__icon" width="4" height="20" viewBox="0 0 4 20" fill-rule="evenodd">
+        <title>list of options</title>
         <circle cx="2" cy="2" r="2"></circle>
         <circle cx="2" cy="10" r="2"></circle>
         <circle cx="2" cy="18" r="2"></circle>
@@ -30,7 +31,7 @@
         <img src="/globals/assets/images/placeholder-icon-32x32.svg" alt="" class="bx--about__icon--img" />
       </figure>
       <header class="bx--about__title">
-        <h3 id="card-title-1" class="bx--about__title--name">Card Name</h3>
+        <p id="card-title-1" class="bx--about__title--name bx--type-gamma">Card Name</p>
         <a href="" class="bx--link bx--about__title--link">Secondary Information</a>
       </header>
     </div>

src/components/card/card.html

@@ -3,6 +3,7 @@
     <!-- OverflowMenu -->
     <div data-overflow-menu class="bx--overflow-menu" tabindex="0" aria-label="List of options">
       <svg class="bx--overflow-menu__icon" width="4" height="20" viewBox="0 0 4 20" fill-rule="evenodd">
+        <title>list of options</title>
         <circle cx="2" cy="2" r="2"></circle>
         <circle cx="2" cy="10" r="2"></circle>
         <circle cx="2" cy="18" r="2"></circle>
@@ -30,8 +31,8 @@
         <img src="/globals/assets/images/placeholder-icon-32x32.svg" alt="" class="bx--about__icon--img" />
       </figure>
       <header class="bx--about__title">
-        <h3 id="card-title-2" class="bx--about__title--name">Card Name</h3>
-        <h4 class="bx--about__title--additional-info">Secondary Information</h4>
+        <p id="card-title-2" class="bx--about__title--name bx--type-gamma" title="Card Name">Card Name</p>
+        <p class="bx--about__title--additional-info bx--type-delta">Secondary Information</p>
       </header>
   </div>
   </section>