From 6ae540cafdc7d4b51a76e85975ce4e3a7d31c998 Mon Sep 17 00:00:00 2001
From: Ali Spittel <ali07cat07@gmail.com>
Date: Sun, 7 Oct 2018 10:39:57 -0400
Subject: [PATCH] add alt text to sidebar images (#842)

* add alt text to sidebar images

* add alt text to emoji heart

* add alt text to sponsor logos

* add aria-label to search bar

* update snapshot for Search
---
 .gitignore                                    |  4 ++--
 .../src/components/Search/SearchForm.jsx      |  1 +
 .../__snapshots__/Search.test.jsx.snap        |  1 +
 app/views/articles/_sidebar.html.erb          | 22 +++++++++----------
 4 files changed, 15 insertions(+), 13 deletions(-)

diff --git a/.gitignore b/.gitignore
index 53bd65a6e..8500a4f7c 100644
--- a/.gitignore
+++ b/.gitignore
@@ -19,13 +19,13 @@ vendor/bundle
 coverage
 /tags
 
-#Ignore public uploads
+# Ignore public uploads
 /public/uploads/*
 /public/c/*
 /public/i/*
 /public/assets/*
 
-#Ignore node_modules
+# Ignore node_modules
 node_modules/
 
 # Generated js bundles
diff --git a/app/javascript/src/components/Search/SearchForm.jsx b/app/javascript/src/components/Search/SearchForm.jsx
index 48139d512..f8d0e37f7 100644
--- a/app/javascript/src/components/Search/SearchForm.jsx
+++ b/app/javascript/src/components/Search/SearchForm.jsx
@@ -23,6 +23,7 @@ export const SearchForm = ({
         id={searchBoxId}
         placeholder="search"
         autoComplete="off"
+        aria-label="search"
         onKeyDown={onSearch}
         value={searchTerm}
       />
diff --git a/app/javascript/src/components/Search/__tests__/__snapshots__/Search.test.jsx.snap b/app/javascript/src/components/Search/__tests__/__snapshots__/Search.test.jsx.snap
index 450f1d0a5..a4e6070c9 100644
--- a/app/javascript/src/components/Search/__tests__/__snapshots__/Search.test.jsx.snap
+++ b/app/javascript/src/components/Search/__tests__/__snapshots__/Search.test.jsx.snap
@@ -16,6 +16,7 @@ exports[`<Search /> renders properly 1`] = `
       value="✓"
     />
     <input
+      aria-label="search"
       autoComplete="off"
       class="nav-search-form__input"
       id="nav-search"
diff --git a/app/views/articles/_sidebar.html.erb b/app/views/articles/_sidebar.html.erb
index 5e9d2956d..8beb042d4 100644
--- a/app/views/articles/_sidebar.html.erb
+++ b/app/views/articles/_sidebar.html.erb
@@ -128,13 +128,13 @@
           <header>
             <a href="/sponsors">community sponsors</a>
             <span class="emoji">
-              <img src="<%= asset_path "emoji/emoji-one-heart.png" %>" />
+              <img alt="emoji heart" src="<%= asset_path "emoji/emoji-one-heart.png" %>" />
             </span>
           </header>
           <div class="widget-body">
             <div class="sidebar-sponsor">
               <a class="partner-link" href="https://developer.jwplayer.com/jw-player/demos/?utm_source=dev.to" target="_blank" data-details="jwplayer__image">
-                <img src="<%= cloudinary("https://thepracticaldev.s3.amazonaws.com/i/lc2gkdj9dbmkul4z26g0.png") %>" style="margin-bottom:8px;" />
+                <img src="<%= cloudinary("https://thepracticaldev.s3.amazonaws.com/i/lc2gkdj9dbmkul4z26g0.png") %>" style="margin-bottom:8px;" alt="Cloudinary K" />
 
               </a>
               <div class="sponsor-tagline" style="display:inline;">
@@ -189,13 +189,13 @@
           <header>
             <a href="/sponsors">community sponsors</a>
             <span class="emoji">
-              <img src="<%= asset_path "emoji/emoji-one-heart.png" %>" />
+              <img src="<%= asset_path "emoji/emoji-one-heart.png" %>" alt="emoji heart"/>
             </span>
           </header>
           <div class="widget-body">
             <div class="sidebar-sponsor">
               <a class="partner-link" href="https://try.digitalocean.com/performance/?utm_source=devto&utm_medium=display&utm_campaign=Devto_2018_Brand" target="_blank" data-details="digitalocean__image">
-                <img src="<%= cloudinary("https://thepracticaldev.s3.amazonaws.com/i/85318v8gv77kzr8r2e58.png") %>" style="margin-bottom:8px;" />
+                <img src="<%= cloudinary("https://thepracticaldev.s3.amazonaws.com/i/85318v8gv77kzr8r2e58.png") %>" style="margin-bottom:8px;" alt="Digital Ocean logo" />
               </a>
               <div class="sponsor-tagline" style="display:inline;">
                 The all-in-one cloud platform developers & their teams love.
@@ -206,7 +206,7 @@
             </div>
             <div class="sidebar-sponsor">
               <a class="partner-link" href="https://www.twilio.com/?utm_source=devto&utm_medium=banner&utm_campaign=summer_awareness_campaign" target="_blank" data-details="twilio__image">
-                <img src="<%= cloudinary("https://thepracticaldev.s3.amazonaws.com/i/lgumfafaywo0zz90ciig.png") %>" />
+                <img src="<%= cloudinary("https://thepracticaldev.s3.amazonaws.com/i/lgumfafaywo0zz90ciig.png") %>" alt="Twilio logo" />
               </a>
               <div class="sponsor-tagline">
                 APIs for communicating with anyone on planet Earth.
@@ -217,7 +217,7 @@
             </div>
             <div class="sidebar-sponsor">
               <a class="partner-link" href="https://developer.qlik.com?utm_medium=direct_buy&utm_source=devto&utm_campaign=allylogo" target="_blank" data-details="qlik__image">
-                <img src="<%= cloudinary("https://thepracticaldev.s3.amazonaws.com/i/eyinucxpl8a4ag51punb.png") %>" />
+                <img src="<%= cloudinary("https://thepracticaldev.s3.amazonaws.com/i/eyinucxpl8a4ag51punb.png") %>" alt="Qlik Branch logo"/>
               </a>
               <div class="sponsor-tagline">
                 Helping developers turn data into their ally with Qlik APIs.
@@ -241,11 +241,11 @@
             key links
           </header>
           <div class="widget-body">
-            <a href="https://twitter.com/thepracticaldev" target="_blank" rel="noopener"><img src="<%= asset_path("twitter-logo.svg") %>" class="social-icon" /></a>
-            <a href="https://github.com/thepracticaldev" target="_blank" rel="noopener"><img src="<%= asset_path("github-logo.svg") %>" class="social-icon" /></a>
-            <a href="https://instagram.com/thepracticaldev" target="_blank" rel="noopener"><img src="<%= asset_path("instagram-logo.svg") %>" class="social-icon" /></a>
-            <a href="https://facebook.com/thepracticaldev" target="_blank" rel="noopener"><img src="<%= asset_path("facebook-logo.svg") %>" class="social-icon" /></a>
-            <a href="https://twitch.tv/thepracticaldev" target="_blank" rel="noopener"><img src="<%= asset_path("twitch-logo.svg") %>" class="social-icon" /></a>
+            <a href="https://twitter.com/thepracticaldev" target="_blank" rel="noopener"><img src="<%= asset_path("twitter-logo.svg") %>" alt="Twitter logo" class="social-icon" /></a>
+            <a href="https://github.com/thepracticaldev" target="_blank" rel="noopener"><img src="<%= asset_path("github-logo.svg") %>" alt="GitHub logo" class="social-icon" /></a>
+            <a href="https://instagram.com/thepracticaldev" target="_blank" rel="noopener"><img src="<%= asset_path("instagram-logo.svg") %>" alt="Instagram logo" class="social-icon" /></a>
+            <a href="https://facebook.com/thepracticaldev" target="_blank" rel="noopener"><img src="<%= asset_path("facebook-logo.svg") %>" alt="Facebook logo" class="social-icon" /></a>
+            <a href="https://twitch.tv/thepracticaldev" target="_blank" rel="noopener"><img src="<%= asset_path("twitch-logo.svg") %>" alt="Twitch logo" class="social-icon" /></a>
           </div>
           <div class="side-footer">
             <a href="/about">About</a>