Adjust tooltips for accessibility

This commit is contained in:
luis cielak
2018-08-13 14:13:47 -04:00
parent 8f50fd2651
commit 88092a7892
6 changed files with 27 additions and 23 deletions

View File

@@ -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 %}

View File

@@ -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>

View File

@@ -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>

View File

@@ -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 %}