Add role and aria-label to notices to improve accessibility

alphagov · Jan 5, 2015 · a1e98f0 · a1e98f0
1 parent 5d9631a
commit a1e98f0
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 14 deletions.
diff --git a/lib/govspeak.rb b/lib/govspeak.rb
@@ -116,16 +116,16 @@ def insert_strong_inside_p(body, parser=Govspeak::Document)
     }
 
     extension('informational', surrounded_by("^")) { |body|
-      %{\n\n<div class="application-notice info-notice">
+      %{\n\n<div role="note" aria-label="Information" class="application-notice info-notice">
 #{Govspeak::Document.new(body.strip).to_html}</div>\n}
     }
 
     extension('important', surrounded_by("@")) { |body|
-      %{\n\n<div class="advisory">#{insert_strong_inside_p(body)}</div>\n}
+      %{\n\n<div role="note" aria-label="Important" class="advisory">#{insert_strong_inside_p(body)}</div>\n}
     }
 
     extension('helpful', surrounded_by("%")) { |body|
-      %{\n\n<div class="application-notice help-notice">\n#{Govspeak::Document.new(body.strip).to_html}</div>\n}
+      %{\n\n<div role="note" aria-label="Help" class="application-notice help-notice">\n#{Govspeak::Document.new(body.strip).to_html}</div>\n}
     }
 
     extension('attached-image', /^!!([0-9]+)/) do |image_number|

diff --git a/lib/govspeak/html_sanitizer.rb b/lib/govspeak/html_sanitizer.rb
@@ -42,7 +42,7 @@ def sanitize_without_images
   def sanitize_config
     deep_merge(Sanitize::Config::RELAXED, {
       attributes: {
-        :all => Sanitize::Config::RELAXED[:attributes][:all] + [ "id", "class" ],
+        :all => Sanitize::Config::RELAXED[:attributes][:all] + [ "id", "class", "role", "aria-label" ],
         "a"  => Sanitize::Config::RELAXED[:attributes]["a"] + [ "rel" ],
       },
       elements: Sanitize::Config::RELAXED[:elements] + [ "div", "span" ],

diff --git a/test/govspeak_test.rb b/test/govspeak_test.rb
@@ -82,7 +82,7 @@ class GovspeakTest < Test::Unit::TestCase
 
   test_given_govspeak("^ I am very informational ^") do
     assert_html_output %{
-      <div class="application-notice info-notice">
+      <div role="note" aria-label="Information" class="application-notice info-notice">
       <p>I am very informational</p>
       </div>}
     assert_text_output "I am very informational"
@@ -98,23 +98,23 @@ class GovspeakTest < Test::Unit::TestCase
     assert_html_output %{
       <p>The following is very informational</p>
 
-      <div class="application-notice info-notice">
+      <div role="note" aria-label="Information" class="application-notice info-notice">
       <p>I am very informational</p>
       </div>}
     assert_text_output "The following is very informational I am very informational"
   end
 
   test_given_govspeak "^ I am very informational" do
     assert_html_output %{
-      <div class="application-notice info-notice">
+      <div role="note" aria-label="Information" class="application-notice info-notice">
       <p>I am very informational</p>
       </div>}
     assert_text_output "I am very informational"
   end
 
   test_given_govspeak "@ I am very important @" do
     assert_html_output %{
-      <div class="advisory"><p><strong>I am very important</strong></p>
+      <div role="note" aria-label="Important" class="advisory"><p><strong>I am very important</strong></p>
       </div>}
     assert_text_output "I am very important"
   end
@@ -126,14 +126,14 @@ class GovspeakTest < Test::Unit::TestCase
     assert_html_output %{
       <p>The following is very important</p>
 
-      <div class="advisory"><p><strong>I am very important</strong></p>
+      <div role="note" aria-label="Important" class="advisory"><p><strong>I am very important</strong></p>
       </div>}
     assert_text_output "The following is very important I am very important"
   end
 
   test_given_govspeak "% I am very helpful %" do
     assert_html_output %{
-      <div class="application-notice help-notice">
+      <div role="note" aria-label="Help" class="application-notice help-notice">
       <p>I am very helpful</p>
       </div>}
     assert_text_output "I am very helpful"
@@ -143,7 +143,7 @@ class GovspeakTest < Test::Unit::TestCase
     assert_html_output %{
       <p>The following is very helpful</p>
 
-      <div class="application-notice help-notice">
+      <div role="note" aria-label="Help" class="application-notice help-notice">
       <p>I am very helpful</p>
       </div>}
     assert_text_output "The following is very helpful I am very helpful"
@@ -153,7 +153,7 @@ class GovspeakTest < Test::Unit::TestCase
     assert_html_output %{
       <h2 id="hello">Hello</h2>
 
-      <div class="application-notice help-notice">
+      <div role="note" aria-label="Help" class="application-notice help-notice">
       <p>I am very helpful</p>
       </div>
 
@@ -163,7 +163,7 @@ class GovspeakTest < Test::Unit::TestCase
 
   test_given_govspeak "% I am very helpful" do
     assert_html_output %{
-      <div class="application-notice help-notice">
+      <div role="note" aria-label="Help" class="application-notice help-notice">
       <p>I am very helpful</p>
       </div>}
     assert_text_output "I am very helpful"
@@ -533,7 +533,7 @@ class GovspeakTest < Test::Unit::TestCase
 
   test_given_govspeak "@ Message with [a link](http://foo.bar/)@" do
     assert_html_output %{
-      <div class="advisory"><p><strong>Message with <a rel="external" href="http://foo.bar/">a link</a></strong></p>
+      <div role="note" aria-label="Important" class="advisory"><p><strong>Message with <a rel="external" href="http://foo.bar/">a link</a></strong></p>
       </div>
       }
   end