Merge pull request #34 from jamesmartin/aria-transform

Transform for common aria attributes

Author: jamesmartin

CHANGELOG.md

@@ -3,13 +3,14 @@ All notable changes to this project will be documented in this file.
 This project adheres to [Semantic Versioning](http://semver.org/).
 
 ## [Unreleased][unreleased]
-- Nothing.
+- Aria attributes transform (aria-labelledby / role etc.) Addresses issue
+  [#28](https://github.com/jamesmartin/inline_svg/issues/28)
 
 ## [0.6.4] - 2016-04-23
 ### Fixed
 - Don't duplicate the `title` element. Addresses issue
-  [#31](https://github.com/jamesmartin/inline_svg/issues/31).
-- Make the `title` element the first child node of the SVG document.
+  [#31](https://github.com/jamesmartin/inline_svg/issues/31)
+- Make the `title` element the first child node of the SVG document
 
 ## [0.6.3] - 2016-04-19
 ### Added

README.md

@@ -81,12 +81,13 @@ key                     | description
 `desc`                  | add a \<desc\> node inside the top level of the SVG document
 `nocomment`             | remove comment tags (and other unsafe/unknown tags) from svg (uses the [Loofah](https://github.com/flavorjones/loofah) gem)
 `preserve_aspect_ratio` | adds a `preserveAspectRatio` attribute to the SVG
+`aria`                  | adds common accessibility attributes to the SVG (see [PR #34](https://github.com/jamesmartin/inline_svg/pull/34#issue-152062674) for details)
 
 Example:
 
 ```ruby
 inline_svg("some-document.svg", id: 'some-id', class: 'some-class', data: {some: "value"}, size: '30% * 20%', title: 'Some Title', desc:
-'Some description', nocomment: true, preserve_aspect_ratio: 'xMaxYMax meet')
+'Some description', nocomment: true, preserve_aspect_ratio: 'xMaxYMax meet', aria: true)
 ```
 
 ## Custom Transformations

lib/inline_svg/transform_pipeline/transformations.rb

@@ -10,7 +10,8 @@ def self.built_in_transformations
       width: Width,
       id: IdAttribute,
       data: DataAttributes,
-      preserve_aspect_ratio: PreserveAspectRatio
+      preserve_aspect_ratio: PreserveAspectRatio,
+      aria: AriaAttributes
     }
   end
 
@@ -44,3 +45,4 @@ def self.without_empty_values(params)
 require 'inline_svg/transform_pipeline/transformations/id_attribute'
 require 'inline_svg/transform_pipeline/transformations/data_attributes'
 require 'inline_svg/transform_pipeline/transformations/preserve_aspect_ratio'
+require 'inline_svg/transform_pipeline/transformations/aria_attributes'

lib/inline_svg/transform_pipeline/transformations/aria_attributes.rb

@@ -0,0 +1,23 @@
+module InlineSvg::TransformPipeline::Transformations
+  class AriaAttributes < Transformation
+    def transform(doc)
+      doc = Nokogiri::XML::Document.parse(doc.to_html)
+      svg = doc.at_css("svg")
+
+      # Add role
+      svg["role"] = "img"
+
+      # 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!
+
+      if aria_elements.any?
+        svg["aria-labelledby"] = aria_elements.join(" ")
+      end
+
+      doc
+    end
+  end
+end

spec/transformation_pipeline/aria_attributes_spec.rb

@@ -0,0 +1,41 @@
+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

spec/transformation_pipeline/transformations_spec.rb

@@ -21,6 +21,7 @@ def transform(doc)
         id: 'irrelevant',
         data: 'irrelevant',
         preserve_aspect_ratio: 'irrelevant',
+        aria: 'irrelevant',
       )
 
       expect(transformations.map(&:class)).to match_array([
@@ -33,7 +34,8 @@ def transform(doc)
         InlineSvg::TransformPipeline::Transformations::Width,
         InlineSvg::TransformPipeline::Transformations::IdAttribute,
         InlineSvg::TransformPipeline::Transformations::DataAttributes,
-        InlineSvg::TransformPipeline::Transformations::PreserveAspectRatio
+        InlineSvg::TransformPipeline::Transformations::PreserveAspectRatio,
+        InlineSvg::TransformPipeline::Transformations::AriaAttributes
       ])
     end