Allow alerts to stand on their own

Previously, for the alerts to work, a whitespace was needed to succeed
them, and this was possible since we were using `NOTE: **Note:**`.

However, if we wanted to get rid of the `**Note:**` text, this would mean
that the alert would need a trailing whitespace in order to be rendered
and it would look like `NOTE: `.

With that change, the regex is more permissive and allows the whitespace
to be absent.

Since now we can render alerts with only the icon present, an alternate
title was also added for accessibility issues.

2 files changed, 10 insertions, 3 deletions

diff --git a/lib/filters/admonition.rb b/lib/filters/admonition.rb
index 21acaee9..0cb288fa 100644
--- a/lib/filters/admonition.rb
+++ b/lib/filters/admonition.rb
@@ -22,7 +22,7 @@ class AdmonitionFilter < Nanoc::Filter
     doc = Nokogiri::HTML.fragment(content.dup)
     doc.css('p').each do |para|
       content = para.inner_html
-      match = content.match(/\A(?<type>TIP|NOTE|CAUTION|DANGER): (?<content>.*)\Z/m)
+      match = content.match(/\A(?<type>TIP|NOTE|CAUTION|DANGER):\s?(?<content>.*)\Z/m)
       next unless match
 
       new_content = generate(match[:type].downcase, match[:content])
diff --git a/lib/helpers/icons_helper.rb b/lib/helpers/icons_helper.rb
index b4f22edd..dbd3035c 100644
--- a/lib/helpers/icons_helper.rb
+++ b/lib/helpers/icons_helper.rb
@@ -6,7 +6,13 @@ module Nanoc::Helpers
   module IconsHelper
     extend self
 
-    ICONS_SVG = '/assets/images/icons.svg'.freeze
+    ICONS_SVG = '/assets/images/icons.svg'
+
+    GITLAB_SVGS_MAPPING = {
+      'bulb' => 'tip',
+      'information-o' => 'note',
+      'warning' => 'caution'
+    }.freeze
 
     def icon(icon_name, size = nil, css_class = nil)
       unless known_sprites.include?(icon_name)
@@ -22,7 +28,8 @@ module Nanoc::Helpers
         *css_class
       ].join(' ')
 
-      %(<svg class="#{svg_class}"><use href="#{ICONS_SVG}##{icon_name}" /></svg>)
+      # https://css-tricks.com/svg-title-vs-html-title-attribute/
+      %(<svg role="img" aria-label="#{GITLAB_SVGS_MAPPING[icon_name]}" class="#{svg_class}"><use href="#{ICONS_SVG}##{icon_name}" /> <title> #{GITLAB_SVGS_MAPPING[icon_name]} </title> </svg>)
     end
 
     private