Merge pull request #239 from pivotal-cf/meaningful-links

feat(a11y): More CSS components have clear link text

src/pivotal-ui/components/alerts/alerts.scss

@@ -45,7 +45,7 @@ If you want to include a link in your alert, use the class `alert-link`.
   <h5 class="em-high mtn">Important Link</h5>
   <p>
     It is very important that you
-    <a class="alert-link" href="http://bit.ly/1vkXaYb">click here</a>
+    <a class="alert-link" href="http://bit.ly/1vkXaYb" aria-label="demo link to a funny gif">click here</a>
   </p>
 </div>
 ```

src/pivotal-ui/components/buttons/README.md

@@ -1,5 +1,5 @@
 ```html
 <button class="btn btn-primary">Button</button>
 
-<a class="btn btn-primary" href="https://google.com">Link</a>
+<a class="btn btn-primary" href="https://google.com" aria-label="Google homepage">Link</a>
 ```

src/pivotal-ui/components/buttons/buttons.scss

@@ -23,7 +23,7 @@ use either a `<button>` or an `<a>` element:
 ```html_example_table
 <button class="btn btn-default">Button</button>
 
-<a class="btn btn-default" href="http://trulia.com">Link</a>
+<a class="btn btn-default" aria-label="Trulia homepage" href="http://trulia.com">Link</a>
 ```
 
 If your button is actually a link to another page, please use the

src/pivotal-ui/components/collapse/collapse.scss

@@ -68,7 +68,7 @@ Accordion with plus/minus icon:
   <div class="panel-heading-accordion collapse-trigger collapsed" data-parent="#accordion-2" data-toggle="collapse" href="#myCollapse-3">
     <div class="row">
       <div class="col-md-23">
-        <a>
+        <a aria-label="trigger accordion">
           <div class="when-collapsed-inline">
             <i class="fa fa-plus-square collapse-icon"></i>
           </div>
@@ -95,7 +95,7 @@ Accordion with caret right/down icon:
   <div class="panel-heading-accordion collapse-trigger collapsed" data-parent="#accordion-3" data-toggle="collapse" href="#myCollapse-4">
     <div class="row">
       <div class="col-md-23">
-        <a>
+        <a aria-label="trigger accordion">
           <div class="when-collapsed-inline">
             <i class="fa fa-caret-right collapse-icon"></i>
           </div>
@@ -132,7 +132,7 @@ This adds a divider between the accordion header and accordion body.
   <div class="panel-heading-accordion bg-neutral-11 collapse-trigger collapsed" data-parent="#accordion-3" data-toggle="collapse" href="#myCollapse-5">
     <div class="row">
       <div class="col-md-23">
-        <a>
+        <a aria-label="trigger accordion">
           <div class="when-collapsed-inline">
             <i class="fa fa-caret-right collapse-icon"></i>
           </div>

src/pivotal-ui/components/labels/labels.scss

@@ -58,7 +58,7 @@ Removable labels are used as tags in an editable list. The user will either ente
 
 ```html_example
 <span class="label-removable">Removable
-  <a class="close-btn fa fa-close"></a>
+  <a class="close-btn fa fa-close" aria-label="Remove label"></a>
 </span>
 ```
 */

src/pivotal-ui/components/media/README.md

@@ -1,7 +1,7 @@
 ```html
 <div class="media">
   <a class="media-left" href="#">
-    <img alt="..." class="media-object" src="http://placehold.it/64x64"/>
+    <img alt="placeholder" class="media-object" src="http://placehold.it/64x64"/>
   </a>
   <div class="media-body">
     <h4 class="media-heading">Media heading</h4>
@@ -15,7 +15,7 @@
     Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.
   </div>
   <a class="media-right" href="#">
-    <img alt="..." class="media-object" src="http://placehold.it/64x64"/>
+    <img alt="placeholder" class="media-object" src="http://placehold.it/64x64"/>
   </a>
 </div>
 ```

src/pivotal-ui/components/media/media.scss

@@ -21,7 +21,7 @@ The default media displays a media object (images, video, audio) to the left or
 ```html_example
 <div class="media">
   <a class="media-left" href="#">
-    <img alt="..." class="media-object" src="http://placehold.it/64x64"/>
+    <img alt="demo placeholder for media" class="media-object" src="http://placehold.it/64x64"/>
   </a>
   <div class="media-body">
     <h4 class="media-heading">Media heading</h4>
@@ -35,7 +35,7 @@ The default media displays a media object (images, video, audio) to the left or
     Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.
   </div>
   <a class="media-right" href="#">
-    <img alt="..." class="media-object" src="http://placehold.it/64x64"/>
+    <img alt="demo placeholder for media" class="media-object" src="http://placehold.it/64x64"/>
   </a>
 </div>
 ```
@@ -47,7 +47,7 @@ larger than the container
 <div class="media">
   <a class="media-left" href="#">
     <div class="image-container" style="width: 100px; height: 50px;">
-      <img alt="..." class="media-object" src="http://placehold.it/64x64"/>
+      <img alt="demo placeholder for media" class="media-object" src="http://placehold.it/64x64"/>
     </div>
   </a>
   <div class="media-body">
@@ -64,7 +64,7 @@ You can also nest media objects inside of each other (useful for comment threads
 ```html_example
 <div class="media">
   <a class="media-left" href="#" target="_blank">
-    <img alt="..." class="media-object" src="http://placehold.it/64x64">
+    <img alt="demo placeholder for media" class="media-object" src="http://placehold.it/64x64">
   </a>
   <div class="media-body">
     <h4 class="media-heading">Media heading</h4>
@@ -73,7 +73,7 @@ You can also nest media objects inside of each other (useful for comment threads
     <!-- Nested media object -->
     <div class="media">
       <a class="media-left" href="#" target="_blank">
-        <img alt="..." class="media-object" src="http://placehold.it/64x64">
+        <img alt="demo placeholder for media" class="media-object" src="http://placehold.it/64x64">
       </a>
       <div class="media-body">
         <h4 class="media-heading">Nested media heading</h4>
@@ -82,7 +82,7 @@ You can also nest media objects inside of each other (useful for comment threads
         <!-- Nested media object -->
         <div class="media">
           <a class="media-left" href="#" target="_blank">
-            <img alt="..." class="media-object" src="http://placehold.it/64x64">
+            <img alt="demo placeholder for media" class="media-object" src="http://placehold.it/64x64">
           </a>
           <div class="media-body">
             <h4 class="media-heading">Nested media heading</h4>
@@ -95,7 +95,7 @@ You can also nest media objects inside of each other (useful for comment threads
     <!-- Nested media object -->
     <div class="media">
       <a class="media-left" href="#" target="_blank">
-        <img alt="..." class="media-object" src="http://placehold.it/64x64">
+        <img alt="demo placeholder for media" class="media-object" src="http://placehold.it/64x64">
       </a>
       <div class="media-body">
         <h4 class="media-heading">Nested media heading</h4>
@@ -120,7 +120,7 @@ The images or other media can be aligned top, middle, or bottom. The default is
 ```html_example
 <div class="media">
   <a class="media-left" href="#" target="_blank">
-    <img alt="..." class="media-object" src="http://placehold.it/40x40">
+    <img alt="demo placeholder for media" class="media-object" src="http://placehold.it/40x40">
   </a>
   <div class="media-body">
     <h4 class="media-heading">Top aligned media</h4>
@@ -130,7 +130,7 @@ The images or other media can be aligned top, middle, or bottom. The default is
 
 <div class="media">
   <a class="media-left media-middle" href="#" target="_blank">
-    <img alt="..." class="media-object" src="http://placehold.it/40x40">
+    <img alt="demo placeholder for media" class="media-object" src="http://placehold.it/40x40">
   </a>
   <div class="media-body">
     <h4 class="media-heading">Middle aligned media</h4>
@@ -140,7 +140,7 @@ The images or other media can be aligned top, middle, or bottom. The default is
 
 <div class="media">
   <a class="media-left media-bottom" href="#" target="_blank">
-    <img alt="..." class="media-object" src="http://placehold.it/40x40">
+    <img alt="demo placeholder for media" class="media-object" src="http://placehold.it/40x40">
   </a>
   <div class="media-body">
     <h4 class="media-heading">Bottom aligned media</h4>
@@ -169,7 +169,7 @@ For example, `.media-stackable-xs` is stacked on screen sizes from 0-480px and t
 ```html_example
 <div class="media media-stackable-xs">
   <a class="media-left" href="#" target="_blank">
-    <img alt="..." class="media-object" src="http://placehold.it/100x100">
+    <img alt="demo placeholder for media" class="media-object" src="http://placehold.it/100x100">
   </a>
   <div class="media-body">
     <p>Extra-small stackable</p>
@@ -178,7 +178,7 @@ For example, `.media-stackable-xs` is stacked on screen sizes from 0-480px and t
 
 <div class="media media-stackable-sm">
   <a class="media-left" href="#" target="_blank">
-    <img alt="..." class="media-object" src="http://placehold.it/100x100">
+    <img alt="demo placeholder for media" class="media-object" src="http://placehold.it/100x100">
   </a>
   <div class="media-body">
     <p>Small stackable</p>
@@ -187,7 +187,7 @@ For example, `.media-stackable-xs` is stacked on screen sizes from 0-480px and t
 
 <div class="media media-stackable-md">
   <a class="media-left" href="#" target="_blank">
-    <img alt="..." class="media-object" src="http://placehold.it/100x100">
+    <img alt="demo placeholder for media" class="media-object" src="http://placehold.it/100x100">
   </a>
   <div class="media-body">
     <p>Medium stackable</p>
@@ -196,7 +196,7 @@ For example, `.media-stackable-xs` is stacked on screen sizes from 0-480px and t
 
 <div class="media media-stackable-lg">
   <a class="media-left" href="#" target="_blank">
-    <img alt="..." class="media-object" src="http://placehold.it/100x100">
+    <img alt="demo placeholder for media" class="media-object" src="http://placehold.it/100x100">
   </a>
   <div class="media-body">
     <p>Large stackable</p>