add alt text to sidebar images (forem#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
aalises · Oct 7, 2018 · 6ae540c · 6ae540c
1 parent 0237d5a
commit 6ae540c
Show file tree

Hide file tree

Showing 4 changed files with 15 additions and 13 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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>