maverick/docbrown
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

add alt text to sidebar images (#842)

Browse source 
* 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
This commit is contained in:
Ali Spittel 2018-10-07 10:39:57 -04:00 • committed by Ben Halpern
parent 0237d5a2fb
commit 6ae540cafd
4 changed files with 15 additions and 13 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
.gitignore vendored
View file

@ -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

1
app/javascript/src/components/Search/SearchForm.jsx
View file

@ -23,6 +23,7 @@ export const SearchForm = ({
id={searchBoxId}
placeholder="search"
autoComplete="off"
aria-label="search"
onKeyDown={onSearch}
value={searchTerm}
/>

1
app/javascript/src/components/Search/__tests__/__snapshots__/Search.test.jsx.snap
View file

@ -16,6 +16,7 @@ exports[`<Search /> renders properly 1`] = `
value="✓"
/>
<input
aria-label="search"
autoComplete="off"
class="nav-search-form__input"
id="nav-search"

22
app/views/articles/_sidebar.html.erb
View file

@ -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>