Add alternative texts to images (forem#2771) [ci skip]

README.md

@@ -1,35 +1,31 @@
 <div align="center">
   <br>
-  <img
-    alt="DEV"
-    src="https://thepracticaldev.s3.amazonaws.com/i/ro3538by3b2fupbs63sr.png"
-    width=500px
-  />
+  <img alt="DEV" src="https://thepracticaldev.s3.amazonaws.com/i/ro3538by3b2fupbs63sr.png" width="500px">
   <h1>DEV Community 👩‍💻👨‍💻</h1>
   <strong>The Human Layer of the Stack</strong>
 </div>
-<br/>
+<br>
 <p align="center">
   <a href="https://www.ruby-lang.org/en/">
-    <img src="https://img.shields.io/badge/Ruby-v2.6.3-green.svg" alt="ruby version"/>
+    <img src="https://img.shields.io/badge/Ruby-v2.6.3-green.svg" alt="ruby version">
   </a>
   <a href="http://rubyonrails.org/">
-    <img src="https://img.shields.io/badge/Rails-v5.2.3-brightgreen.svg" alt="rails version"/>
+    <img src="https://img.shields.io/badge/Rails-v5.2.3-brightgreen.svg" alt="rails version">
   </a>
   <a href="https://travis-ci.com/thepracticaldev/dev.to">
-    <img src="https://travis-ci.com/thepracticaldev/dev.to.svg?branch=master" alt="Travis Status for thepracticaldev/dev.to"/>
+    <img src="https://travis-ci.com/thepracticaldev/dev.to.svg?branch=master" alt="Travis Status for thepracticaldev/dev.to">
   </a>
   <a href="https://codeclimate.com/github/thepracticaldev/dev.to/maintainability">
-    <img src="https://api.codeclimate.com/v1/badges/ce45bf63293073364bcb/maintainability" />
+    <img src="https://api.codeclimate.com/v1/badges/ce45bf63293073364bcb/maintainability" alt="Code Climate maintainability">
   </a>
   <a href="https://codeclimate.com/github/thepracticaldev/dev.to/test_coverage">
-    <img src="https://api.codeclimate.com/v1/badges/ce45bf63293073364bcb/test_coverage" />
+    <img src="https://api.codeclimate.com/v1/badges/ce45bf63293073364bcb/test_coverage" alt="Code Climate test coverage">
   </a>
   <a href="https://oss.skylight.io/app/applications/K9H5IV3RqKGu">
-    <img src="https://badges.skylight.io/status/K9H5IV3RqKGu.svg?token=Ofd-9PTSyus3BqEZZZbM1cWKJ94nHWaPiTphGsWJMAY" alt="Skylight badge" />
+    <img src="https://badges.skylight.io/status/K9H5IV3RqKGu.svg?token=Ofd-9PTSyus3BqEZZZbM1cWKJ94nHWaPiTphGsWJMAY" alt="Skylight badge">
   </a>
   <a href="https://www.codetriage.com/thepracticaldev/dev.to">
-    <img src="https://www.codetriage.com/thepracticaldev/dev.to/badges/users.svg" alt="CodeTriage badge" />
+    <img src="https://www.codetriage.com/thepracticaldev/dev.to/badges/users.svg" alt="CodeTriage badge">
   </a>
 </p>
 
@@ -242,14 +238,10 @@ Our version of the CLA was adapted from the Microsoft Contributor License Agreem
 
 Any questions, please refer to our [license FAQ](http://docs.dev.to/license-faq/) doc or email [email protected]
 
-<br/>
+<br>
 
 <p align="center">
-  <img
-    alt="sloan"
-    width=250px
-    src="https://thepracticaldev.s3.amazonaws.com/uploads/user/profile_image/31047/af153cd6-9994-4a68-83f4-8ddf3e13f0bf.jpg"
-  />
-  <br/>
+  <img alt="Sloan, the sloth mascot" width="250px" src="https://thepracticaldev.s3.amazonaws.com/uploads/user/profile_image/31047/af153cd6-9994-4a68-83f4-8ddf3e13f0bf.jpg">
+  <br>
   <strong>Happy Coding</strong> ❤️
 </p>

app/assets/javascripts/initializers/initializeBaseUserData.js

@@ -57,7 +57,9 @@ function initializeUserSidebar(user) {
 
 function initializeUserProfileContent(user) {
   document.getElementById('sidebar-profile-pic').innerHTML =
-    '<img alt="" class="sidebar-profile-pic-img" src="' +
+    '<img alt="' +
+    user.username +
+    '" class="sidebar-profile-pic-img" src="' +
     user.profile_image_90 +
     '" />';
   document.getElementById('sidebar-profile-name').innerHTML = filterXSS(
@@ -73,12 +75,17 @@ function addRelevantButtonsToArticle(user) {
   var articleContainer = document.getElementById('article-show-container');
   if (articleContainer) {
     if (parseInt(articleContainer.dataset.authorId) == user.id) {
-      var manageButtonHTML = '<a href="' +articleContainer.dataset.path+ '/manage" rel="nofollow">MANAGE</a>'
+      var manageButtonHTML =
+        '<a href="' +
+        articleContainer.dataset.path +
+        '/manage" rel="nofollow">MANAGE</a>';
       document.getElementById('action-space').innerHTML =
         '<a href="' +
         articleContainer.dataset.path +
         '/edit" rel="nofollow">EDIT</a>' +
-        (JSON.parse(articleContainer.dataset.published) == true ? manageButtonHTML : "")
+        (JSON.parse(articleContainer.dataset.published) == true
+          ? manageButtonHTML
+          : '');
     } else if (user.trusted) {
       document.getElementById('action-space').innerHTML =
         '<a href="' +

app/assets/javascripts/initializers/initializeLiveArticle.js.erb

@@ -38,12 +38,13 @@ function initializeLiveArticle() {
 }
 
 function liveIndicator(article) {
+  var user = article.user;
   var tagsHTML = article.tag_list.map(function(t){return "<span class='live-tag'>#"+t+"</span>"}).join(" ")
-  return '<a href="#" class="live-exit-button" id="live-exit-button"><%=image_tag("/assets/cancel.svg")%></a>\
+  return '<a href="#" class="live-exit-button" id="live-exit-button"><%= image_tag("/assets/cancel.svg", alt: "cancel live") %></a>\
           <a href="'+article.path+'" class="live-link" id="live-link"><div class="live-article-indicator-inner" id="live-article-indicator-inner">\
             <div class="live-pre-header"><span class="pulsating-circle"></span>Live Now</div>\
             <div class="live-article-title">'+article.title+'</div>\
-            <div class="live-user"><img src="'+article.user.profile_pic+'" />'+article.user.name+'</div>\
+            <div class="live-user"><img src="'+user.profile_pic+'" alt="'+user.name+'" />'+user.name+'</div>\
             <div class="live-tags">'+tagsHTML+'</div>\
           </div></a>'
 }
@@ -73,4 +74,4 @@ function checkForOnPage(article){
       }
     }
   });
-}
+}

app/assets/javascripts/utilities/buildArticleHTML.js.erb

@@ -104,7 +104,7 @@ function buildArticleHTML(article) {
     }
     var videoHTML = '';
     if (article.cloudinary_video_url) {
-      videoHTML = '<a href="'+article.path+'" class="single-article-video-preview" style="background-image:url('+article.cloudinary_video_url+')"><div class="single-article-video-duration"><img src="<%= asset_path("video-camera.svg") %>" />'+article.video_duration_in_minutes+'</div></a>'
+      videoHTML = '<a href="'+article.path+'" class="single-article-video-preview" style="background-image:url('+article.cloudinary_video_url+')"><div class="single-article-video-duration"><img src="<%= asset_path("video-camera.svg") %>" alt="video camera">'+article.video_duration_in_minutes+'</div></a>'
     }
     var timeAgoInWords = '';
     if (article.published_at_int) {

app/assets/javascripts/utilities/buildCommentHTML.js.erb

@@ -38,7 +38,7 @@ function buildCommentHTML(comment) {
           <div class="inner-comment '+customClass+'">\
             <div class="details">\
               <a href="/'+comment.user.username+'">\
-                <img class="profile-pic" src="'+comment.user.profile_pic+'">\
+                <img class="profile-pic" src="'+comment.user.profile_pic+'" alt="'+comment.user.username+'">\
                 <span class="comment-username"><span class="comment-username-inner">'+comment.user.name+'</span></span>\
               </a>\
                 '+twitterIcon+'\

app/helpers/application_helper.rb

@@ -69,7 +69,7 @@ def title_with_timeframe(page_title:, timeframe:, content_for: false)
   end
 
   def icon(name, pixels = "20")
-    image_tag icon_url(name), alt: name, class: "icon-img", height: pixels, width: pixels
+    image_tag(icon_url(name), alt: name, class: "icon-img", height: pixels, width: pixels)
   end
 
   def icon_url(name)
@@ -183,12 +183,11 @@ def list_path
   end
 
   def logo_svg
-    logo = if ApplicationConfig["LOGO_SVG"].present?
-             ApplicationConfig["LOGO_SVG"].html_safe
-           else
-             inline_svg("devplain.svg", class: "logo", size: "20% * 20%")
-           end
-    logo
+    if ApplicationConfig["LOGO_SVG"].present?
+      ApplicationConfig["LOGO_SVG"].html_safe
+    else
+      inline_svg("devplain.svg", class: "logo", size: "20% * 20%", aria: true, title: "App logo")
+    end
   end
 
   def community_qualified_name

app/javascript/article-form/__tests__/__snapshots__/articleForm.test.jsx.snap

@@ -39,6 +39,7 @@ exports[`<ArticleForm /> renders properly 1`] = `
         onClick={[Function]}
       >
         <img
+          alt="upload images"
           src=""
         />
          IMAGES
@@ -48,6 +49,7 @@ exports[`<ArticleForm /> renders properly 1`] = `
         onClick={[Function]}
       >
         <img
+          alt="open overlay menu"
           src=""
         />
       </button>
@@ -65,6 +67,7 @@ exports[`<ArticleForm /> renders properly 1`] = `
       onClick={[Function]}
     >
       <img
+        alt="upload images"
         src=""
       />
        IMAGES
@@ -74,6 +77,7 @@ exports[`<ArticleForm /> renders properly 1`] = `
       onClick={[Function]}
     >
       <img
+        alt="open overlay menu"
         src=""
       />
     </button>

app/javascript/article-form/articleForm.jsx

@@ -321,15 +321,15 @@ export default class ArticleForm extends Component {
               className="articleform__detailsButton articleform__detailsButton--image"
               onClick={this.toggleImageManagement}
             >
-              <img src={ImageUploadIcon} />
+              <img src={ImageUploadIcon} alt="upload images" />
               {' '}
 IMAGES
             </button>
             <button
               className="articleform__detailsButton articleform__detailsButton--moreconfig"
               onClick={this.toggleMoreConfig}
             >
-              <img src={ThreeDotsIcon} />
+              <img src={ThreeDotsIcon} alt="open overlay menu" />
             </button>
           </div>
           <BodyMarkdown
@@ -340,15 +340,15 @@ IMAGES
             className="articleform__detailsButton articleform__detailsButton--image articleform__detailsButton--bottom"
             onClick={this.toggleImageManagement}
           >
-            <img src={ImageUploadIcon} />
+            <img src={ImageUploadIcon} alt="upload images" />
             {' '}
 IMAGES
           </button>
           <button
             className="articleform__detailsButton articleform__detailsButton--moreconfig articleform__detailsButton--bottom"
             onClick={this.toggleMoreConfig}
           >
-            <img src={ThreeDotsIcon} />
+            <img src={ThreeDotsIcon} alt="open overlay menu" />
           </button>
         </div>
       );

app/javascript/chat/__tests__/__snapshots__/article.test.jsx.snap

@@ -86,6 +86,7 @@ exports[`<Article /> should load article 1`] = `
       onClick={[Function]}
     >
       <img
+        alt="like reaction"
         data-category="like"
         src=""
       />
@@ -96,6 +97,7 @@ exports[`<Article /> should load article 1`] = `
       onClick={[Function]}
     >
       <img
+        alt="unicorn reaction"
         data-category="unicorn"
         src=""
       />
@@ -106,6 +108,7 @@ exports[`<Article /> should load article 1`] = `
       onClick={[Function]}
     >
       <img
+        alt="readinglist reaction"
         data-category="readinglist"
         src=""
       />

app/javascript/chat/__tests__/__snapshots__/userDetails.test.jsx.snap

@@ -3,6 +3,7 @@
 exports[`<UserDetails /> for user1 should render and test snapshot 1`] = `
 <div>
   <img
+    alt="bojackhorseman profile image"
     src="https://media.giphy.com/media/3o7WTHb2WjEXbsmWDS/giphy.gif"
     style={
       Object {
@@ -42,6 +43,7 @@ exports[`<UserDetails /> for user1 should render and test snapshot 1`] = `
       target="_blank"
     >
       <img
+        alt="twitter logo"
         src=""
         style={
           Object {
@@ -56,6 +58,7 @@ exports[`<UserDetails /> for user1 should render and test snapshot 1`] = `
       target="_blank"
     >
       <img
+        alt="github logo"
         src=""
         style={
           Object {
@@ -70,6 +73,7 @@ exports[`<UserDetails /> for user1 should render and test snapshot 1`] = `
       target="_blank"
     >
       <img
+        alt="external link icon"
         class="external-link-img"
         src=""
         style={
@@ -218,6 +222,7 @@ exports[`<UserDetails /> for user1 should render and test snapshot 1`] = `
 exports[`<UserDetails /> for user2 should render and test snapshot 1`] = `
 <div>
   <img
+    alt="mrpeanutbutter profile image"
     src="https://media.giphy.com/media/xThuW6sWCGbpZMpX7a/giphy.gif"
     style={
       Object {
@@ -257,6 +262,7 @@ exports[`<UserDetails /> for user2 should render and test snapshot 1`] = `
       target="_blank"
     >
       <img
+        alt="twitter logo"
         src=""
         style={
           Object {
@@ -271,6 +277,7 @@ exports[`<UserDetails /> for user2 should render and test snapshot 1`] = `
       target="_blank"
     >
       <img
+        alt="github logo"
         src=""
         style={
           Object {
@@ -285,6 +292,7 @@ exports[`<UserDetails /> for user2 should render and test snapshot 1`] = `
       target="_blank"
     >
       <img
+        alt="external link icon"
         class="external-link-img"
         src=""
         style={

app/javascript/chat/article.jsx

@@ -95,7 +95,7 @@ export default class Article extends Component {
         onClick={this.handleReactionClick}
         data-category={curType[1]}
       >
-        <img src={curType[2]} data-category={curType[1]} />
+        <img src={curType[2]} data-category={curType[1]} alt={`${curType[1]} reaction`} />
       </button>
     )
   };
@@ -173,7 +173,7 @@ export default class Article extends Component {
                 </span>
                 <span className="published-at">
                   {' '}
-                  | 
+                  |
                   {' '}
                   {article.readable_publish_date}
                 </span>

app/javascript/chat/userDetails.jsx

@@ -25,6 +25,7 @@ export default class UserDetails extends Component {
           <img
             src={twitterImage}
             style={{ width: '30px', margin: '5px 15px 15px 0px' }}
+            alt="twitter logo"
           />
         </a>,
       );
@@ -35,6 +36,7 @@ export default class UserDetails extends Component {
           <img
             src={githubImage}
             style={{ width: '30px', margin: '5px 15px 15px 0px' }}
+            alt="github logo"
           />
         </a>,
       );
@@ -46,6 +48,7 @@ export default class UserDetails extends Component {
             className="external-link-img"
             src={websiteImage}
             style={{ width: '30px', margin: '5px 15px 15px 0px' }}
+            alt="external link icon"
           />
         </a>,
       );
@@ -63,6 +66,7 @@ export default class UserDetails extends Component {
       <div>
         <img
           src={user.profile_image}
+          alt={`${user.username} profile image`}
           style={{
             height: '210px',
             width: '210px',

app/javascript/src/Onboarding.jsx

@@ -459,6 +459,7 @@ class Onboarding extends Component {
                 <img
                   src="https://res.cloudinary.com/practicaldev/image/fetch/s--iiubRINO--/c_imagga_scale,f_auto,fl_progressive,q_auto,w_300/https://practicaldev-herokuapp-com.freetls.fastly.net/assets/sloan.png"
                   className="sloan-img"
+                  alt="Sloan, the sloth mascot"
                 />
               </div>
               <div className="body-message">{this.toggleOnboardingSlide()}</div>