Feature request: aria-hidden

[tysongach]

👋

Huge high-fives all-around for the accessibility features this gem already offers. It’s so handy to be able to pass in titles and descriptions when you call on an SVG. I’d like to discuss furthering the accessibility features by allowing the hiding of SVGs using aria-hidden.

Sometimes SVGs are simply decorative and therefore should be removed from the accessibility tree. Here’s an example:

<p>
  <%= inline_svg "checkmark-icon.svg" %>
  Success!
</p>

You can imagine this as a simple flash message, letting the user know that their action succeeded. We have the word ‘Success’, preceded by a checkmark icon to visually represent the state.

In such a situation, the icon is simply decorative; it’s repeating content already conveyed by the word ‘Success.’ If we apply aria-hidden="true" to the SVG, we can remove it from the accessibility tree and avoid the repetition.

Possible solution?

I’ve not dug into the specifics of how the aria option works, but perhaps passing it a hidden value could work (edit: see comment below):

<%= inline_svg "icon.svg", aria: "hidden" %>

<svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg">
  …
</svg>

[tysongach]

Perhaps this is a good issue for a Hacktoberfest label?

[jamesmartin]

@tysongach thanks for taking the time to write up this suggestion. I'm generally 👍 on any feature that improves things from an accessibility perspective.

As for the interface, my preference would be to make this an explicit option, requiring a value. E.g.

<%= inline_svg "icon.svg", aria_hidden: true %>

[seanpdoyle]

@jamesmartin @tysongach is this already supported?

inline_svg/spec/helpers/inline_svg_spec.rb

Lines 132 to 141 in 25fa64e

	it "applies custm transformations to the output" do
	input_svg = <<-SVG
	<svg></svg>
	SVG
	expected_output = <<-SVG
	<svg custom="some value"></svg>
	SVG
	allow(InlineSvg::AssetFile).to receive(:named).with('some-file').and_return(input_svg)
	expect(helper.inline_svg('some-file', custom: 'some value')).to eq expected_output
	end

Could something like this work?

<%= inline_svg "icon.svg", "aria-hidden" => true %>

[jamesmartin]

is this already supported?

@seanpdoyle it's possible to implement via custom transformations, but each user of the gem would have to implement their own version. Is that what you had in mind?

[seanpdoyle]

@jamesmartin for custom attribute support, are there additional steps to take other than "aria-hidden" => true?

<%= inline_svg "icon.svg", "aria-hidden" => true %>

[tysongach]

I should’ve been more clear in my original description, but yes, this is possible today via custom transformations:

class AriaHiddenAttribute < InlineSvg::CustomTransformation
  def transform(doc)
    doc = Nokogiri::XML::Document.parse(doc.to_html)
    svg = doc.at_css "svg"
    svg["aria-hidden"] = value
    doc
  end
end


InlineSvg.configure do |config|
  config.add_custom_transformation(
    attribute: :aria_hidden,
    transform: AriaHiddenAttribute,
  )
end

This allows you to pass a aria_hidden: true option when using this inline_svg helper. Although each user can add this custom transformation today, I have found myself adding it to many project and using it quite often, so I thought it would be useful as a core feature.

[jamesmartin]

for custom attribute support, are there additional steps to take other than "aria-hidden" => true?

@seanpdoyle yes, see @tysongach's example code.

[seanpdoyle]

@tysongach @jamesmartin #79

[jamesmartin]

@seanpdoyle thanks for opening the PR for this. Great minds think alike, I think we both just implemented the same thing. See #78 😁

I'll merge yours so you get the contribution credit.