Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[a11y] Better image alt text support #1940

Merged
merged 2 commits into from
Sep 22, 2020
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
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