inline_svg 0.8.0 → 0.9.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: 9be73c7539f050fff8b70b78686af612b47bce30
-  data.tar.gz: 03a319e6d961e16550a4fb20f7427586a4374850
+  metadata.gz: 2f130c4a553b022e11c90d79588f9b7047db3cf1
+  data.tar.gz: bedb58bb1f1533cf9df734190fff189ea66d60d5
 SHA512:
-  metadata.gz: d991a3f66c45f6b889f6533d093f3e20021ce97197adf61a174e653f6c26cebaa70013887650df56d9740e812eb460572d2c0656589db18cf4eccc6e5da11420
-  data.tar.gz: 4f99e93a2951dc4b3cb7424442aafa8858312076a3d45d39e60fd67116a2219829db8e3f57378172a8a563bb8774960ef6523a63e652146631528030cdd91cb1
+  metadata.gz: 9f33f0e86a12858fcac918aeb5ebd10fbc1639062db98beece15fa778942383ec07febefe67276d726311fd13c8c82e8905958f0b07fb96cd38da148c2bf596f
+  data.tar.gz: b3706ac43d6532d07a62b9acdd857dbe08c53dfc352ebcf7a93932fab30faef3a8e378c06e4ca8fc74ae366856a4ab009d6de43ad8b40674be51e3c48dd257fa

data/CHANGELOG.md

@@ -5,6 +5,11 @@ This project adheres to [Semantic Versioning](http://semver.org/).
 ## [Unreleased][unreleased]
 - Nothing
 
+## [0.9.0] - 2016-06-30
+### Fixed
+- Hashed IDs for desc and title elements in aria-labeled-by attribute
+  [#38](https://github.com/jamesmartin/inline_svg/issues/38)
+
 ## [0.8.0] - 2016-05-23
 ### Added
 - Default values for custom transformations
@@ -91,7 +96,8 @@ transformations](https://github.com/jamesmartin/inline_svg/blob/master/README.md
 ### Added
 - Basic Railtie and view helper to inline SVG documents to Rails views.
 
-[unreleased]: https://github.com/jamesmartin/inline_svg/compare/v0.8.0...HEAD
+[unreleased]: https://github.com/jamesmartin/inline_svg/compare/v0.9.0...HEAD
+[0.9.0]: https://github.com/jamesmartin/inline_svg/compare/v0.8.0...v0.9.0
 [0.8.0]: https://github.com/jamesmartin/inline_svg/compare/v0.7.0...v0.8.0
 [0.7.0]: https://github.com/jamesmartin/inline_svg/compare/v0.6.4...v0.7.0
 [0.6.4]: https://github.com/jamesmartin/inline_svg/compare/v0.6.3...v0.6.4

data/README.md

@@ -90,6 +90,27 @@ inline_svg("some-document.svg", id: 'some-id', class: 'some-class', data: {some:
 'Some description', nocomment: true, preserve_aspect_ratio: 'xMaxYMax meet', aria: true)
 ```
 
+## Accessibility
+
+Use the `aria: true` option to make `inline_svg` add the following
+accessibility (a11y) attributes to your embedded SVG:
+
+* Adds a `role="img"` attribute to the root SVG element
+* Adds a `aria-labelled-by="title-id desc-id"` attribute to the root SVG
+  element, if the document contains `<title>` or `<desc>` elements
+
+Here's an example:
+
+```haml
+= inline_svg('iconmonstr-glasses-12-icon.svg', class: 'medium-blue', title: 'An SVG', desc: 'This is my SVG. There are many like it. You get the picture', aria: true)
+```
+
+```xml
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" x="0px" y="0px" width="512px" height="512px" viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve" data-default-transform="some-default" class="medium-blue" role="img" aria-labelledby="bx6wix4t9pxpwxnohrhrmms3wexsw2o m439lk7mopdzmouktv2o689pl59wmd2"><title id="bx6wix4t9pxpwxnohrhrmms3wexsw2o">An SVG</title>
+    <path id="glasses-12" d="M358.045,135.833c-19.531,0-40.788,2.213-58.256,8.433c-39.195,14.216-47.93,14.393-87.594,0  c-17.452-6.22-38.742-8.433-58.256-8.433c-33.831,0-71.584,6.639-103.939,15.071v30.704c14.535,4.384,18.34,10.763,20.654,25.624  c6.538,41.953,21.542,83.102,87.007,83.102c52.137,0,69.538-38.785,81.055-74.594c5.851-18.189,28.55-18.658,34.484-0.251  c11.551,35.858,28.868,74.845,81.106,74.845c65.48,0,80.502-41.148,87.023-83.102c2.312-14.861,6.119-21.24,20.67-25.624v-30.704  C429.611,142.472,391.875,135.833,358.045,135.833z M226.16,201.307c-8.885,37.317-23.336,71.859-68.499,71.859  c-56.664,0-68.214-32.665-73.395-85.363c-1.24-12.816,1.576-17.846,3.789-20.512c16.261-19.472,102.178-18.691,130.661-1.584  C226.864,170.603,232.161,176.018,226.16,201.307z M427.7,187.803c-5.163,52.698-16.731,85.363-73.394,85.363  c-45.131,0-59.598-34.542-68.482-71.859c-6.02-25.289-0.721-30.704,7.443-35.6c28.582-17.167,114.449-17.812,130.66,1.584  C426.158,169.957,428.975,174.986,427.7,187.803z M344.65,168.557c26.42-4.023,56.965-0.52,65.078,9.213  c1.777,2.129,4.023,6.152,3.018,16.403c-0.536,5.432-1.156,10.578-1.928,15.457C403.795,184.114,385.822,170.435,344.65,168.557z   M101.165,209.63c-0.771-4.879-1.408-10.025-1.944-15.457c-1.006-10.251,1.257-14.274,3.034-16.403  c8.131-9.732,38.675-13.236,65.096-9.213C126.177,170.435,108.206,184.114,101.165,209.63z M376.166,342.923  C356.418,392.177,272.631,380.106,256,349.26c-16.647,30.847-100.418,42.917-120.167-6.337c9.924,8.685,26.873,11.483,39.798,9.589  c38.105-5.582,35.054-41.592,61.693-41.592c7.292,0,13.897,3.034,18.675,7.963c4.777-4.929,11.366-7.963,18.658-7.963  c26.639,0,23.604,36.01,61.693,41.592C349.277,354.406,366.226,351.607,376.166,342.923z"></path>
+    <desc id="m439lk7mopdzmouktv2o689pl59wmd2">This is my SVG. There are many like it. You get the picture</desc></svg>
+```
+
 ## Custom Transformations
 
 The transformation behavior of `inline_svg` can be customized by creating custom transformation classes.

data/lib/inline_svg/random_id_generator.rb

@@ -0,0 +1,8 @@
+module InlineSvg
+  class RandomIdGenerator
+    def self.generate(base, salt)
+      bytes = Digest::SHA1.digest("#{base}-#{salt}")
+      Digest.hexencode(bytes).to_i(16).to_s(36)
+    end
+  end
+end

data/lib/inline_svg/transform_pipeline/transformations/aria_attributes.rb

@@ -9,9 +9,13 @@ module InlineSvg::TransformPipeline::Transformations
 
       # Build aria-labelledby string
       aria_elements = []
-      doc.search("svg title").each { |_| aria_elements << "title" }
-      doc.search("svg desc").each { |_| aria_elements << "desc" }
-      aria_elements.uniq!
+      doc.search("svg title").each do |element|
+        aria_elements << element['id'] = element_id_for("title", element)
+      end
+
+      doc.search("svg desc").each do |element|
+        aria_elements << element['id'] = element_id_for("desc", element)
+      end
 
       if aria_elements.any?
         svg["aria-labelledby"] = aria_elements.join(" ")
@@ -19,5 +23,13 @@ module InlineSvg::TransformPipeline::Transformations
 
       doc
     end
+
+    def element_id_for(base, element)
+      if element['id'].nil?
+        InlineSvg::RandomIdGenerator.generate(base, value)
+      else
+        InlineSvg::RandomIdGenerator.generate(element['id'], value)
+      end
+    end
   end
 end

data/lib/inline_svg/transform_pipeline.rb

@@ -11,4 +11,5 @@ end
 
 require 'nokogiri'
 require 'loofah'
+require 'inline_svg/random_id_generator'
 require 'inline_svg/transform_pipeline/transformations'

data/lib/inline_svg/version.rb

@@ -1,3 +1,3 @@
 module InlineSvg
-  VERSION = "0.8.0"
+  VERSION = "0.9.0"
 end

data/spec/random_id_generator_spec.rb

@@ -0,0 +1,8 @@
+require_relative '../lib/inline_svg/random_id_generator'
+
+describe InlineSvg::RandomIdGenerator do
+  it "generates a hexencoded ID based on a salt" do
+    expect(InlineSvg::RandomIdGenerator.generate("some-base", "some-salt")).
+      to eq("ksiuuy1jduycacqpoj5smn2kyt9iv02")
+  end
+end

data/spec/transformation_pipeline/transformations/aria_attributes_spec.rb

@@ -0,0 +1,66 @@
+require 'inline_svg/transform_pipeline'
+
+describe InlineSvg::TransformPipeline::Transformations::AriaAttributes do
+  it "adds a role attribute to the SVG document" do
+    document = Nokogiri::XML::Document.parse('<svg>Some document</svg>')
+    transformation = InlineSvg::TransformPipeline::Transformations::AriaAttributes.create_with_value({})
+
+    expect(transformation.transform(document).to_html).to eq(
+      "<svg role=\"img\">Some document</svg>\n"
+    )
+  end
+
+  context "aria-labelledby attribute" do
+    it "adds 'title' when a title element is present" do
+      document = Nokogiri::XML::Document.parse('<svg><title>Some title</title>Some document</svg>')
+      transformation = InlineSvg::TransformPipeline::Transformations::AriaAttributes.create_with_value("some-salt")
+
+      expect(InlineSvg::RandomIdGenerator).to receive(:generate).with("title", "some-salt").
+        and_return("some-id")
+
+      expect(transformation.transform(document).to_html).to eq(
+        "<svg role=\"img\" aria-labelledby=\"some-id\"><title id=\"some-id\">Some title</title>Some document</svg>\n"
+      )
+    end
+
+    it "adds 'desc' when a description element is present" do
+      document = Nokogiri::XML::Document.parse('<svg><desc>Some description</desc>Some document</svg>')
+      transformation = InlineSvg::TransformPipeline::Transformations::AriaAttributes.create_with_value("some-salt")
+
+      expect(InlineSvg::RandomIdGenerator).to receive(:generate).with("desc", "some-salt").
+        and_return("some-id")
+
+      expect(transformation.transform(document).to_html).to eq(
+        "<svg role=\"img\" aria-labelledby=\"some-id\"><desc id=\"some-id\">Some description</desc>Some document</svg>\n"
+      )
+    end
+
+    it "adds both 'desc' and 'title' when title and description elements are present" do
+      document = Nokogiri::XML::Document.parse('<svg><title>Some title</title><desc>Some description</desc>Some document</svg>')
+      transformation = InlineSvg::TransformPipeline::Transformations::AriaAttributes.create_with_value("some-salt")
+
+      expect(InlineSvg::RandomIdGenerator).to receive(:generate).with("title", "some-salt").
+        and_return("some-id")
+      expect(InlineSvg::RandomIdGenerator).to receive(:generate).with("desc", "some-salt").
+        and_return("some-other-id")
+
+      expect(transformation.transform(document).to_html).to eq(
+        "<svg role=\"img\" aria-labelledby=\"some-id some-other-id\"><title id=\"some-id\">Some title</title>\n<desc id=\"some-other-id\">Some description</desc>Some document</svg>\n"
+      )
+    end
+
+    it "uses existing IDs when they exist" do
+      document = Nokogiri::XML::Document.parse('<svg><title id="my-title">Some title</title><desc id="my-desc">Some description</desc>Some document</svg>')
+      transformation = InlineSvg::TransformPipeline::Transformations::AriaAttributes.create_with_value("some-salt")
+
+      expect(InlineSvg::RandomIdGenerator).to receive(:generate).with("my-title", "some-salt").
+        and_return("some-id")
+      expect(InlineSvg::RandomIdGenerator).to receive(:generate).with("my-desc", "some-salt").
+        and_return("some-other-id")
+
+      expect(transformation.transform(document).to_html).to eq(
+        "<svg role=\"img\" aria-labelledby=\"some-id some-other-id\"><title id=\"some-id\">Some title</title>\n<desc id=\"some-other-id\">Some description</desc>Some document</svg>\n"
+      )
+    end
+  end
+end

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: inline_svg
 version: !ruby/object:Gem::Version
-  version: 0.8.0
+  version: 0.9.0
 platform: ruby
 authors:
 - James Martin
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2016-05-23 00:00:00.000000000 Z
+date: 2016-06-30 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: bundler
@@ -128,6 +128,7 @@ files:
 - lib/inline_svg/finds_asset_paths.rb
 - lib/inline_svg/io_resource.rb
 - lib/inline_svg/railtie.rb
+- lib/inline_svg/random_id_generator.rb
 - lib/inline_svg/static_asset_finder.rb
 - lib/inline_svg/transform_pipeline.rb
 - lib/inline_svg/transform_pipeline/transformations.rb
@@ -150,7 +151,8 @@ files:
 - spec/helpers/inline_svg_spec.rb
 - spec/inline_svg_spec.rb
 - spec/io_resource_spec.rb
-- spec/transformation_pipeline/aria_attributes_spec.rb
+- spec/random_id_generator_spec.rb
+- spec/transformation_pipeline/transformations/aria_attributes_spec.rb
 - spec/transformation_pipeline/transformations/data_attributes_spec.rb
 - spec/transformation_pipeline/transformations/height_spec.rb
 - spec/transformation_pipeline/transformations/id_attribute_spec.rb
@@ -190,7 +192,8 @@ test_files:
 - spec/helpers/inline_svg_spec.rb
 - spec/inline_svg_spec.rb
 - spec/io_resource_spec.rb
-- spec/transformation_pipeline/aria_attributes_spec.rb
+- spec/random_id_generator_spec.rb
+- spec/transformation_pipeline/transformations/aria_attributes_spec.rb
 - spec/transformation_pipeline/transformations/data_attributes_spec.rb
 - spec/transformation_pipeline/transformations/height_spec.rb
 - spec/transformation_pipeline/transformations/id_attribute_spec.rb

data/spec/transformation_pipeline/aria_attributes_spec.rb

@@ -1,41 +0,0 @@
-require 'inline_svg/transform_pipeline'
-
-describe InlineSvg::TransformPipeline::Transformations::AriaAttributes do
-  it "adds a role attribute to the SVG document" do
-    document = Nokogiri::XML::Document.parse('<svg>Some document</svg>')
-    transformation = InlineSvg::TransformPipeline::Transformations::AriaAttributes.create_with_value({})
-
-    expect(transformation.transform(document).to_html).to eq(
-      "<svg role=\"img\">Some document</svg>\n"
-    )
-  end
-
-  context "aria-labelledby attribute" do
-    it "adds 'title' when a title element is present" do
-      document = Nokogiri::XML::Document.parse('<svg><title>Some title</title>Some document</svg>')
-      transformation = InlineSvg::TransformPipeline::Transformations::AriaAttributes.create_with_value({})
-
-      expect(transformation.transform(document).to_html).to eq(
-        "<svg role=\"img\" aria-labelledby=\"title\"><title>Some title</title>Some document</svg>\n"
-      )
-    end
-
-    it "adds 'desc' when a description element is present" do
-      document = Nokogiri::XML::Document.parse('<svg><desc>Some description</desc>Some document</svg>')
-      transformation = InlineSvg::TransformPipeline::Transformations::AriaAttributes.create_with_value({})
-
-      expect(transformation.transform(document).to_html).to eq(
-        "<svg role=\"img\" aria-labelledby=\"desc\"><desc>Some description</desc>Some document</svg>\n"
-      )
-    end
-
-    it "adds both 'desc' and 'title' when title and description elements are present" do
-      document = Nokogiri::XML::Document.parse('<svg><title>Some title</title><desc>Some description</desc>Some document</svg>')
-      transformation = InlineSvg::TransformPipeline::Transformations::AriaAttributes.create_with_value({})
-
-      expect(transformation.transform(document).to_html).to eq(
-        "<svg role=\"img\" aria-labelledby=\"title desc\"><title>Some title</title>\n<desc>Some description</desc>Some document</svg>\n"
-      )
-    end
-  end
-end