Skip to content

Commit

Permalink
[a11y] Better image alt text support (#1940)
Browse files Browse the repository at this point in the history
Instead of only using the alt_tag attribute of the essence picture 
this now supports passing the alt attribute via the html_options 
and adds a fallback to a humanized picture name.

This ensures we always have an alt text for accessibility reasons.
  • Loading branch information
tvdeyen authored Sep 22, 2020
1 parent 420d7f4 commit 0dd3571
Show file tree
Hide file tree
Showing 2 changed files with 62 additions and 7 deletions.
6 changes: 5 additions & 1 deletion app/models/alchemy/essence_picture_view.rb
Original file line number Diff line number Diff line change
Expand Up @@ -55,7 +55,7 @@ def caption
def img_tag
@_img_tag ||= image_tag(
essence.picture_url(options.except(*DEFAULT_OPTIONS.keys)), {
alt: essence.alt_tag.presence,
alt: alt_text,
title: essence.title.presence,
class: caption ? nil : essence.css_class.presence,
srcset: srcset.join(", ").presence,
Expand All @@ -79,5 +79,9 @@ def srcset
width.present? ? "#{url} #{width}w" : "#{url} #{height}h"
end
end

def alt_text
essence.alt_tag.presence || html_options.delete(:alt) || essence.picture.name&.humanize
end
end
end
63 changes: 57 additions & 6 deletions spec/models/alchemy/essence_picture_view_spec.rb
Original file line number Diff line number Diff line change
Expand Up @@ -70,7 +70,7 @@

context "but disabled in the options" do
let(:options) do
{show_caption: false}
{ show_caption: false }
end

it "should not enclose the image in a <figure> element" do
Expand All @@ -85,7 +85,7 @@

context "but disabled in the content settings" do
before do
allow(content).to receive(:settings).and_return({show_caption: false})
allow(content).to receive(:settings).and_return({ show_caption: false })
end

it "should not enclose the image in a <figure> element" do
Expand All @@ -98,7 +98,7 @@
end

context "but enabled in the options hash" do
let(:options) { {show_caption: true} }
let(:options) { { show_caption: true } }

it "should enclose the image in a <figure> element" do
expect(view).to have_selector("figure img")
Expand Down Expand Up @@ -179,15 +179,15 @@
end

it "does not overwrite DEFAULT_OPTIONS" do
Alchemy::EssencePictureView.new(content, {my_custom_option: true})
Alchemy::EssencePictureView.new(content, { my_custom_option: true })
expect(picture_view.options).to_not have_key(:my_custom_option)
end
end

context "with srcset content setting" do
before do
allow(content).to receive(:settings) do
{srcset: srcset}
{ srcset: srcset }
end
end

Expand Down Expand Up @@ -244,7 +244,7 @@
context "with sizes content setting" do
before do
allow(content).to receive(:settings) do
{sizes: sizes}
{ sizes: sizes }
end
end

Expand Down Expand Up @@ -278,4 +278,55 @@
expect(view).not_to have_selector("img[sizes]")
end
end

describe "alt text" do
subject(:view) do
Alchemy::EssencePictureView.new(content, {}, html_options).render
end

let(:html_options) { {} }

context "essence having alt text stored" do
let(:essence_picture) do
stub_model Alchemy::EssencePicture,
picture: picture,
alt_tag: "A cute cat"
end

it "uses this as image alt text" do
expect(view).to have_selector('img[alt="A cute cat"]')
end
end

context "essence not having alt text stored" do
context "but passed as html option" do
let(:html_options) { { alt: "Cute kittens" } }

it "uses this as image alt text" do
expect(view).to have_selector('img[alt="Cute kittens"]')
end
end

context "and not passed as html option" do
context "with name on the picture" do
let(:picture) do
stub_model Alchemy::Picture,
image_file_format: "png",
image_file: image,
name: "cute_kitty-cat"
end

it "uses a humanized picture name as alt text" do
expect(view).to have_selector('img[alt="Cute kitty-cat"]')
end
end

context "and no name on the picture" do
it "has no alt text" do
expect(view).to_not have_selector("img[alt]")
end
end
end
end
end
end

0 comments on commit 0dd3571

Please sign in to comment.