Adjust tooltips for accessibility

2018-08-13 14:13:47 -04:00 · 2018-08-13 14:13:47 -04:00 · 88092a7892
commit 88092a7892
parent 8f50fd2651
6 changed files with 27 additions and 23 deletions
--- a/styles/elements/_inputs.scss
+++ b/styles/elements/_inputs.scss
@ -80,6 +80,17 @@
    }
  }

+  .usa-input__title {
+    display: flex;
+    align-items: center;
+
+    .icon-tooltip {
+      padding: 0 $gap/2;
+      cursor: default;
+      margin-left: $gap/2;
+    }
+  }
+
  .usa-input__help {
    @include h4;
    font-weight: normal;
@ -87,16 +98,7 @@
    @include line-max;

    .icon-link {
-      padding: $gap/2;
-    }
-  }
-
-  .icon-tooltip .icon {
-    @include icon-color($color-blue);
-
-    &:hover {
-      @include icon-color($color-aqua);
-      cursor: pointer;
+      padding: 0 $gap/2;
    }
  }

@ -116,10 +118,6 @@
        font-weight: $font-bold;
      }

-      .icon {
-        vertical-align: middle;
-      }
-
    }

    ul {
--- a/styles/elements/_tooltip.scss
+++ b/styles/elements/_tooltip.scss
@ -7,7 +7,7 @@
    background: $color-black;
    color: $color-white;
    border-radius: $border-radius;
-    padding: 5px 10px 4px;
+    padding: $gap*2;
  }

  .tooltip-arrow {
@ -109,6 +109,11 @@
  }
 }

-.tooltip-wrapper {
-  // display: none;
+
+.icon-tooltip {
+  @include icon-link;
+
+  .icon {
+    @include icon-size(16);
+  }
 }
--- a/templates/base.html
+++ b/templates/base.html
@ -3,11 +3,12 @@
 {% set context=g.navigationContext %}

 <!DOCTYPE html>
-<html>
+<html lang="en">
 <head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
-  <title>{% block title %}JEDI{% endblock %}</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>{% block title %}JEDI Cloud{% endblock %}</title>
  {% assets "css" %}
    <link rel="stylesheet" href="{{ ASSET_URL }}" type="text/css">
  {% endassets %}
--- a/templates/components/options_input.html
+++ b/templates/components/options_input.html
@ -6,7 +6,7 @@

    <fieldset class="usa-input__choices {% if inline %}usa-input__choices--inline{% endif %}">
      <legend>
-        <div>
+        <div class="usa-input__title">
          {{ field.label | striptags}}
          {% if tooltip %}{{ Tooltip(tooltip) }}{% endif %}
        </div>
--- a/templates/components/text_input.html
+++ b/templates/components/text_input.html
@ -4,7 +4,7 @@
 {% macro TextInput(field, tooltip='', placeholder='') -%}
  <div class='usa-input {% if field.errors %}usa-input--error{% endif %}'>
    <label for={{field.name}}>
-      <div>{{ field.label | striptags }} {% if tooltip %}{{ Tooltip(tooltip) }}{% endif %}</div>
+      <div class="usa-input__title">{{ field.label | striptags }} {% if tooltip %}{{ Tooltip(tooltip) }}{% endif %}</div>

      {% if field.description %}
        <span class='usa-input__help'>{{ field.description | safe }}</span>
--- a/templates/components/tooltip.html
+++ b/templates/components/tooltip.html
@ -1,9 +1,9 @@
 {% from "components/icon.html" import Icon %}

-{% macro Tooltip(message) -%}
+{% macro Tooltip(message,title='Help') -%}

  <span class="icon-tooltip" v-tooltip="{content: '{{message}}'}">
-    {{ Icon('help') }}
+    {{ Icon('help') }}<span>{{ title }}</span>
  </span>

 {%- endmacro %}