Make tooltips/tags and old/new code blocks more accessible (see #(see #1471))

Always add tooltip text as hidden label. Use different tooltip icons for tags and inline help icons. Add labels to old/new code blocks and add option to customise label text.

website/_includes/_mixins.jade

@@ -58,7 +58,9 @@ mixin api(path)
 
 mixin help(tooltip, icon_size)
     span(data-tooltip=tooltip)&attributes(attributes)
-        +icon("help", icon_size || 16).o-icon--inline
+        if tooltip
+            span.u-hidden(aria-role="tooltip")=tooltip
+        +icon("help_o", icon_size || 16).o-icon--inline
 
 
 //- Aside for text
@@ -147,18 +149,23 @@ mixin code(label, language, prompt, height, icon, wrap)
             block
 
 
-//- Code blocks to display old/new versions
+//- Wrapper for code blocks to display old/new versions
 
 mixin code-wrapper()
     span.u-inline-block.u-padding-top.u-width-full
         block
 
-mixin code-old()
-    +code(false, false, false, false, "reject").o-block-small
+//- Code blocks to display old/new versions
+    label - [string] ARIA label for block. Defaults to "correct"/"incorrect".
+
+mixin code-old(label)
+    - var label = label || 'incorrect'
+    +code(false, false, false, false, "reject").o-block-small(aria-label=label)
         block
 
-mixin code-new()
-    +code(false, false, false, false, "accept").o-block-small
+mixin code-new(label)
+    - var label = label || 'correct'
+    +code(false, false, false, false, "accept").o-block-small(aria-label=label)
         block
 
 
@@ -244,10 +251,16 @@ mixin label-inline()
 
 
 //- Tag
+    tooltip   - [string] optional tooltip text.
+    hide_icon - [boolean] hide tooltip icon
 
-mixin tag()
-    span.u-text-tag.u-text-tag--spaced(aria-hidden="true")&attributes(attributes)
+mixin tag(tooltip, hide_icon)
+    div.u-text-tag.u-text-tag--spaced(data-tooltip=tooltip)&attributes(attributes)
         block
+        if tooltip
+            if !hide_icon
+                |  #[+icon("help", 12).o-icon--tag]
+            |  #[span.u-hidden(aria-role="tooltip")=tooltip]
 
 
 //- "Requires model" tag with tooltip and list of capabilities
@@ -256,10 +269,7 @@ mixin tag()
 mixin tag-model(...capabs)
     - var intro = "To use this functionality, spaCy needs a model to be installed"
     - var ext = capabs.length ? " that supports the following capabilities: " + capabs.join(', ') : ""
-
-    span.u-nowrap
-        +tag Needs model
-        +help(intro + ext + ".").u-color-theme
+    +tag(intro + ext + ".") Needs model
 
 
 //- "New" tag to label features new in a specific version
@@ -269,8 +279,8 @@ mixin tag-model(...capabs)
 
 mixin tag-new(version)
     - var version = (typeof version == 'number') ? version.toFixed(1) : version
-    +tag(data-tooltip="This feature is new and was introduced in spaCy v#{version}.")
-        | v#{version}
+    - var tooltip = "This feature is new and was introduced in spaCy v" + version
+    +tag(tooltip, true) v#{version}
 
 
 //- List

website/_includes/_svg.jade

@@ -31,8 +31,11 @@ svg(style="position: absolute; visibility: hidden; width: 0; height: 0;" width="
         symbol#svg_star(viewBox="0 0 24 24")
             path(d="M12 17.25l-6.188 3.75 1.641-7.031-5.438-4.734 7.172-0.609 2.813-6.609 2.813 6.609 7.172 0.609-5.438 4.734 1.641 7.031z")
 
-        symbol#svg_help(viewBox="0 0 24 24")
-            path(d="M12 6c2.203 0 3.984 1.781 3.984 3.984 0 2.484-3 2.766-3 5.016h-1.969c0-3.234 3-3 3-5.016 0-1.078-0.938-1.969-2.016-1.969s-2.016 0.891-2.016 1.969h-1.969c0-2.203 1.781-3.984 3.984-3.984zM12 20.016c4.406 0 8.016-3.609 8.016-8.016s-3.609-8.016-8.016-8.016-8.016 3.609-8.016 8.016 3.609 8.016 8.016 8.016zM12 2.016c5.531 0 9.984 4.453 9.984 9.984s-4.453 9.984-9.984 9.984-9.984-4.453-9.984-9.984 4.453-9.984 9.984-9.984zM11.016 18v-2.016h1.969v2.016h-1.969z")
+        symbol#svg_help(viewBox="0 0 24 28")
+            path(d="M14 21.5v-3c0-0.281-0.219-0.5-0.5-0.5h-3c-0.281 0-0.5 0.219-0.5 0.5v3c0 0.281 0.219 0.5 0.5 0.5h3c0.281 0 0.5-0.219 0.5-0.5zM18 11c0-2.859-3-5-5.688-5-2.547 0-4.453 1.094-5.797 3.328-0.141 0.219-0.078 0.5 0.125 0.656l2.063 1.563c0.078 0.063 0.187 0.094 0.297 0.094 0.141 0 0.297-0.063 0.391-0.187 0.734-0.938 1.047-1.219 1.344-1.437 0.266-0.187 0.781-0.375 1.344-0.375 1 0 1.922 0.641 1.922 1.328 0 0.812-0.422 1.219-1.375 1.656-1.109 0.5-2.625 1.797-2.625 3.313v0.562c0 0.281 0.219 0.5 0.5 0.5h3c0.281 0 0.5-0.219 0.5-0.5v0c0-0.359 0.453-1.125 1.188-1.547 1.188-0.672 2.812-1.578 2.812-3.953zM24 14c0 6.625-5.375 12-12 12s-12-5.375-12-12 5.375-12 12-12 12 5.375 12 12z")
+
+        symbol#svg_help_o(viewBox="0 0 24 28")
+            path(d="M13.75 18.75v2.5c0 0.281-0.219 0.5-0.5 0.5h-2.5c-0.281 0-0.5-0.219-0.5-0.5v-2.5c0-0.281 0.219-0.5 0.5-0.5h2.5c0.281 0 0.5 0.219 0.5 0.5zM17.75 11c0 2.219-1.547 3.094-2.688 3.734-0.812 0.469-1.313 0.766-1.313 1.266v0.5c0 0.281-0.219 0.5-0.5 0.5h-2.5c-0.281 0-0.5-0.219-0.5-0.5v-1.062c0-1.922 1.375-2.531 2.484-3.031 0.938-0.438 1.516-0.734 1.516-1.437 0-0.906-1.141-1.578-2.172-1.578-0.547 0-1.125 0.172-1.484 0.422-0.344 0.234-0.672 0.578-1.25 1.297-0.094 0.125-0.234 0.187-0.391 0.187-0.109 0-0.219-0.031-0.297-0.094l-1.687-1.281c-0.203-0.156-0.25-0.453-0.109-0.672 1.281-2.016 3.078-3 5.453-3v0c2.562 0 5.437 2.031 5.437 4.75zM12 4c-5.516 0-10 4.484-10 10s4.484 10 10 10 10-4.484 10-10-4.484-10-10-10zM24 14c0 6.625-5.375 12-12 12s-12-5.375-12-12 5.375-12 12-12v0c6.625 0 12 5.375 12 12z")
 
         symbol#svg_reject(viewBox="0 0 24 24")
             path(d="M18.984 6.422l-5.578 5.578 5.578 5.578-1.406 1.406-5.578-5.578-5.578 5.578-1.406-1.406 5.578-5.578-5.578-5.578 1.406-1.406 5.578 5.578 5.578-5.578z")

website/assets/css/_base/_objects.sass

@@ -93,6 +93,10 @@
     &.o-icon--inline
         margin: 0 0.5rem 0 0.1rem
 
+    &.o-icon--tag
+        vertical-align: bottom
+        height: 100%
+
 .o-emoji
     margin-right: 0.75rem
     vertical-align: text-bottom