fix(image): hide alt text if no src (#111)

docs/components/image.md

@@ -5,38 +5,67 @@ title: Image
 
 <page-intro>The `image` and `bg` components provide an easy way to add fixed aspect-ratio graphics to your site. Images can have an optional \``.ray-caption`\` element to add additional context to specific pieces of media they accompany across the system.</page-intro>
 
+# Image elements
+
+For most images on a web page, the `img` tag should be used. This is best for accessibility purposes, as backgrounds are typically not registered as content for screen readers. This will also allow you to leverage srcsets for responsive imagery.
+
 <component
-    name="Image 16x9 with caption"
+    name="16x9"
     component="image"
     variation="image--16by9"
     >
 </component>
 
 <component
-    name="Image 16x9 with caption (RTL)"
+    name="Image 16x9 RTL"
     component="image"
-    variation="rtl-image--16by9"
+    variation="rtl-image--caption"
     >
 </component>
 
 <component
-    name="Image 4x3 with caption"
+    name="Image 3x4"
+    name="3x4"
     component="image"
-    variation="image--4by3"
+    variation="image--3by4"
     >
 </component>
 
+## Background elements
+
 <component
-    name="Image 4x3 with caption (RTL)"
+    name="16x9"
     component="image"
-    variation="rtl-image--4by3"
+    variation="bg--16by9"
     >
 </component>
 
 <component
-    name="Image 3x4"
+    name="4x3"
     component="image"
-    variation="image--3by4"
+    variation="bg--4by3"
+    >
+</component>
+
+<component
+    name="3x4"
+    component="image"
+    variation="bg--3by4"
+    >
+</component>
+
+# Caption
+
+<component
+    component="image"
+    variation="image--caption"
+    >
+</component>
+
+<component
+    name="RTL"
+    component="image"
+    variation="rtl-image--caption"
     >
 </component>
 

docs/html/image/bg--16by9.html

@@ -0,0 +1,12 @@
+<div style="max-width: 300px">
+  <div
+    class="ray-bg ray-bg--16by9"
+    style="background-image: url(https://source.unsplash.com/random/800x450?minimalist);"
+  ></div>
+
+  <!-- optional caption element -->
+  <div class="ray-caption">
+    Vangelis Drake Equation explorations venture Rig Veda encyclopaedia
+    galactica.
+  </div>
+</div>

docs/html/image/bg--3by4.html

@@ -0,0 +1,6 @@
+<div style="max-width: 300px">
+  <div
+    class="ray-bg ray-bg--3by4"
+    style="background-image: url(https://source.unsplash.com/random/800x400?minimalist);"
+  ></div>
+</div>

docs/html/image/bg--4by3.html

@@ -0,0 +1,11 @@
+<div style="max-width: 300px">
+  <div
+    class="ray-bg ray-bg--4by3"
+    style="background-image: url(https://source.unsplash.com/random/800x400?minimalist);"
+  ></div>
+  <!-- optional caption element -->
+  <div class="ray-caption">
+    Consciousness are creatures of the cosmos rings of Uranus another world
+    colonies concept of the number one.
+  </div>
+</div>

docs/html/image/image--16by9.html

@@ -1,12 +1,5 @@
 <div style="max-width: 300px">
-  <div
-    class="ray-bg ray-bg--16by9"
-    style="background-image: url(https://source.unsplash.com/random/400x300?minimalist);"
-  ></div>
-
-  <!-- optional caption element -->
-  <div class="ray-caption">
-    Vangelis Drake Equation explorations venture Rig Veda encyclopaedia
-    galactica.
+  <div class="ray-image ray-image--16by9">
+    <img src="https://source.unsplash.com/random/800x450?minimalist" />
   </div>
 </div>

docs/html/image/image--3by4.html

@@ -1,6 +1,5 @@
 <div style="max-width: 300px">
-  <div
-    class="ray-bg ray-bg--3by4"
-    style="background-image: url(https://source.unsplash.com/random/800x400?minimalist);"
-  ></div>
+  <div class="ray-image ray-image--3by4">
+    <img src="https://source.unsplash.com/random/300x400?minimalist" />
+  </div>
 </div>

docs/html/image/image--4by3.html

@@ -1,11 +1,5 @@
 <div style="max-width: 300px">
-  <div
-    class="ray-bg ray-bg--4by3"
-    style="background-image: url(https://source.unsplash.com/random/800x400?minimalist);"
-  ></div>
-  <!-- optional caption element -->
-  <div class="ray-caption">
-    Consciousness are creatures of the cosmos rings of Uranus another world
-    colonies concept of the number one.
+  <div class="ray-image ray-image--4by3">
+    <img src="https://source.unsplash.com/random/400x533?minimalist" />
   </div>
 </div>

docs/html/image/image--caption.html

@@ -0,0 +1,7 @@
+<div style="max-width: 300px">
+  <div class="ray-image ray-image--16by9">
+    <img src="https://source.unsplash.com/random/800x450?minimalist" />
+  </div>
+
+  <div class="ray-caption">A beautiful graphic</div>
+</div>

docs/html/image/rtl-image--4by3.html → docs/html/image/rtl-image--caption.html

@@ -1,10 +1,9 @@
 <div dir="rtl">
   <div style="max-width: 300px">
-    <div
-      class="ray-bg ray-bg--4by3"
-      style="background-image: url(https://source.unsplash.com/random/800x400?minimalist);"
-    ></div>
-    <!-- optional caption element -->
+    <div class="ray-image ray-image--16by9">
+      <img src="https://source.unsplash.com/random/800x450?minimalist" />
+    </div>
+
     <div class="ray-caption">
       שנתי לחשבון מתמטיקה מתן גם. כימיה אינטרנט אנציקלופדיה אם צעד, את העיר
       הסביבה אחר גם.

packages/core/src/components/image/_image.scss

@@ -25,6 +25,8 @@ $ray-image-ratio-map: (
     right: 0;
     bottom: 0;
     margin: auto;
+    // hide alt text if image does not load
+    text-indent: -9999px;
   }
 }