Merge pull request #407 from openforge/fix/img-ada

fix: add missing alt property to imgs

Author: Wholloran

src/components/app-blog-card/app-blog-card.tsx

@@ -10,7 +10,7 @@ export class AppBlogCard {
   @Prop() blogPost: BlogPost;
 
   componentDidLoad() {
-    document.querySelectorAll('meta[property="og:image"]')[0].setAttribute('content', this.blogPost.featured_image); //set opengraph metadata to match Butter CMS featured image
+    document.querySelectorAll('meta[property="og:image"]')[0].setAttribute('content', this.blogPost.featured_image); // set opengraph metadata to match Butter CMS featured image
   }
 
   render() {
@@ -22,7 +22,7 @@ export class AppBlogCard {
             <div class="col-md-12">
               <div class="blog-card-image">
                 <stencil-route-link url={`/blog/${this.blogPost.slug}`}>
-                  <img src={this.blogPost.featured_image} />
+                  <img src={this.blogPost.featured_image} alt={this.blogPost.title} />
                 </stencil-route-link>
               </div>
               <div class="blog-title">
@@ -31,7 +31,7 @@ export class AppBlogCard {
                 </stencil-route-link>
               </div>
               <div class="author">
-                <img class="profile-image d-none d-md-block" src={this.blogPost.author.profile_image} />
+                <img class="profile-image d-none d-md-block" src={this.blogPost.author.profile_image} alt={`${this.blogPost.author.first_name} ${this.blogPost.author.last_name}`} />
                 <div>
                   By &nbsp;
                   {this.blogPost.author.slug === 'jedidiah-weller' ? (

src/components/app-blog-content/app-blog-content.tsx

@@ -79,7 +79,7 @@ export class AppBlogContent {
           <div>
             <div class="header--date">{formatDate(publishDate)}</div>
             <div class="header--author">
-              <img src={this.blogPost.author.profile_image} />
+              <img src={this.blogPost.author.profile_image} alt={`${this.blogPost.author.first_name} ${this.blogPost.author.last_name}`} />
               <div>
                 By &nbsp;
                 {this.blogPost.author.slug === 'jedidiah-weller' ? (
@@ -93,7 +93,7 @@ export class AppBlogContent {
           <div class="contact-icons-top" id="contact-icons-top">
             {contactIconsTop}
           </div>
-          <img class="header--main-image" src={this.blogPost.featured_image} />
+          <img class="header--main-image" src={this.blogPost.featured_image} alt={this.blogPost.title} />
         </div>
         <div class="content">
           <div class="row">
@@ -111,7 +111,7 @@ export class AppBlogContent {
           <div class="row">
             <div class="col-md-2 offset-md-2 blog-content-author-image">
               <h5>About the Author</h5>
-              <img src={this.blogPost.author.profile_image} />
+              <img src={this.blogPost.author.profile_image} alt={`${this.blogPost.author.first_name} ${this.blogPost.author.last_name}`} />
             </div>
             <div class="col-md-6 blog-content-author-text">
               <h5>About the Author</h5>

src/components/app-blog-featured/app-blog-featured.tsx

@@ -28,7 +28,7 @@ export class AppBlogFeatured {
               </div>
               <div class="featured-image">
                 <stencil-route-link url={`/blog/${this.blogPost.slug}`}>
-                  <img src={this.blogPost.featured_image} />
+                  <img src={this.blogPost.featured_image} alt={this.blogPost.title} />
                 </stencil-route-link>
               </div>
               <div class="featured-post-title">
@@ -37,7 +37,7 @@ export class AppBlogFeatured {
                 </stencil-route-link>
               </div>
               <div class="author">
-                <img class="profile-image d-none d-md-block" src={this.blogPost.author.profile_image} />
+                <img class="profile-image d-none d-md-block" src={this.blogPost.author.profile_image} alt={`${this.blogPost.author.first_name} ${this.blogPost.author.last_name}`} />
                 <div>
                   By &nbsp;
                   {this.blogPost.author.slug === 'jedidiah-weller' ? (

src/components/content-graphic/content-graphic.tsx

@@ -8,6 +8,7 @@ export class ContentGraphic {
   @Prop() imgUrl: string;
   @Prop() reverse: boolean = false;
   @Prop() preLoadImg: boolean = false;
+  @Prop() alt: string;
 
   render() {
     return (
@@ -29,12 +30,7 @@ export class ContentGraphic {
             'text-md-right': !this.reverse,
           }}
         >
-          <app-img
-            class="img-fluid d-none d-md-inline"
-            src={this.imgUrl}
-            preLoad={this.preLoadImg}
-            alt=""
-          />
+          <app-img class="img-fluid d-none d-md-inline" src={this.imgUrl} preLoad={this.preLoadImg} alt={this.alt} />
         </div>
         <div
           class={{
@@ -45,12 +41,7 @@ export class ContentGraphic {
           }}
         >
           <slot name="header" />
-          <app-img
-            class="img-fluid d-xs-inline d-md-none"
-            src={this.imgUrl}
-            alt=""
-            preLoad={this.preLoadImg}
-          />
+          <app-img class="img-fluid d-xs-inline d-md-none" src={this.imgUrl} alt={this.alt} preLoad={this.preLoadImg} />
           <slot name="body" />
         </div>
       </div>

src/pages/app-contact/app-contact.tsx

@@ -198,7 +198,7 @@ export class AppContact {
 
             {this.formSubmitted ? (
               <div class="container">
-                <content-graphic img-url="/assets/rocket.png">
+                <content-graphic img-url="/assets/rocket.png" alt="rocket">
                   <h3 slot="header">
                     <app-translate keyword="contact.form.thanx" />
                   </h3>