pk/atst
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Adjust tooltips for accessibility

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
styles/elements/_inputs.scss
View File

@ -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 { .usa-input__help {
@include h4; @include h4;
font-weight: normal; font-weight: normal;
@ -87,16 +98,7 @@
@include line-max; @include line-max;
.icon-link { .icon-link {
padding: $gap/2; padding: 0 $gap/2;
}
}
.icon-tooltip .icon {
@include icon-color($color-blue);
&:hover {
@include icon-color($color-aqua);
cursor: pointer;
} }
} }
@ -116,10 +118,6 @@
font-weight: $font-bold; font-weight: $font-bold;
} }
.icon {
vertical-align: middle;
}
} }
ul { ul {

11
styles/elements/_tooltip.scss
View File

@ -7,7 +7,7 @@
background: $color-black; background: $color-black;
color: $color-white; color: $color-white;
border-radius: $border-radius; border-radius: $border-radius;
padding: 5px 10px 4px; padding: $gap*2;
} }
.tooltip-arrow { .tooltip-arrow {
@ -109,6 +109,11 @@
} }
} }
.tooltip-wrapper {
// display: none; .icon-tooltip {
@include icon-link;
.icon {
@include icon-size(16);
}
} }

5
templates/base.html
View File

@ -3,11 +3,12 @@
{% set context=g.navigationContext %} {% set context=g.navigationContext %}
<!DOCTYPE html> <!DOCTYPE html>
<html> <html lang="en">
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <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" %} {% assets "css" %}
<link rel="stylesheet" href="{{ ASSET_URL }}" type="text/css"> <link rel="stylesheet" href="{{ ASSET_URL }}" type="text/css">
{% endassets %} {% endassets %}

2
templates/components/options_input.html
View File

@ -6,7 +6,7 @@
<fieldset class="usa-input__choices {% if inline %}usa-input__choices--inline{% endif %}"> <fieldset class="usa-input__choices {% if inline %}usa-input__choices--inline{% endif %}">
<legend> <legend>
<div> <div class="usa-input__title">
{{ field.label | striptags}} {{ field.label | striptags}}
{% if tooltip %}{{ Tooltip(tooltip) }}{% endif %} {% if tooltip %}{{ Tooltip(tooltip) }}{% endif %}
</div> </div>

2
templates/components/text_input.html
View File

@ -4,7 +4,7 @@
{% macro TextInput(field, tooltip='', placeholder='') -%} {% macro TextInput(field, tooltip='', placeholder='') -%}
<div class='usa-input {% if field.errors %}usa-input--error{% endif %}'> <div class='usa-input {% if field.errors %}usa-input--error{% endif %}'>
<label for={{field.name}}> <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 %} {% if field.description %}
<span class='usa-input__help'>{{ field.description | safe }}</span> <span class='usa-input__help'>{{ field.description | safe }}</span>

4
templates/components/tooltip.html
View File

@ -1,9 +1,9 @@
{% from "components/icon.html" import Icon %} {% from "components/icon.html" import Icon %}
{% macro Tooltip(message) -%} {% macro Tooltip(message,title='Help') -%}
<span class="icon-tooltip" v-tooltip="{content: '{{message}}'}"> <span class="icon-tooltip" v-tooltip="{content: '{{message}}'}">
{{ Icon('help') }} {{ Icon('help') }}<span>{{ title }}</span>
</span> </span>
{%- endmacro %} {%- endmacro %}