better tooltips, localized, too

src/components/contrast_ratio/contrast_ratio.vue

@@ -1,6 +1,6 @@
 <template>
 <span  v-if="contrast" class="contrast-ratio">
-  <span :title="`Contrast is ${contrast.text}`" class="rating">
+  <span :title="hint" class="rating">
     <span v-if="contrast.aaa">
       <i class="icon-thumbs-up-alt"/>
     </span>
@@ -11,14 +11,14 @@
       <i class="icon-attention"/>
     </span>
   </span>
-  <span class="rating" v-if="contrast && large" :title="`Contrast is ${contrast.text} (18pt+)`">
-    <span v-if="contrast.aaa">
+  <span class="rating" v-if="contrast && large" :title="hint_18pt">
+    <span v-if="contrast.laaa">
       <i class="icon-thumbs-up-alt"/>
     </span>
-    <span v-if="!contrast.aaa && contrast.aa">
+    <span v-if="!contrast.laaa && contrast.laa">
       <i class="icon-adjust"/>
     </span>
-    <span v-if="!contrast.aaa && !contrast.aa">
+    <span v-if="!contrast.laaa && !contrast.laa">
       <i class="icon-attention"/>
     </span>
   </span>
@@ -29,7 +29,23 @@
 export default {
   props: [
     'large', 'contrast'
-  ]
+  ],
+  computed: {
+    hint () {
+      const levelVal = this.contrast.aaa ? 'aaa' : (this.contrast.aa ? 'aa' : 'bad')
+      const level = this.$t(`settings.style.common.contrast.level.${levelVal}`)
+      const context = this.$t('settings.style.common.contrast.context.text')
+      const ratio = this.contrast.text
+      return this.$t('settings.style.common.contrast.hint', { level, context, ratio })
+    },
+    hint_18pt () {
+      const levelVal = this.contrast.laaa ? 'aaa' : (this.contrast.laa ? 'aa' : 'bad')
+      const level = this.$t(`settings.style.common.contrast.level.${levelVal}`)
+      const context = this.$t('settings.style.common.contrast.context.18pt')
+      const ratio = this.contrast.text
+      return this.$t('settings.style.common.contrast.hint', { level, context, ratio })
+    }
+  }
 }
 </script>
 

src/i18n/en.json

@@ -165,7 +165,19 @@
     "style": {
       "common": {
         "color": "Color",
-        "opacity": "Opacity"
+        "opacity": "Opacity",
+        "contrast": {
+          "hint": "Contrast ratio is {ratio}, it {level} {context}",
+          "level": {
+            "aa": "meets Level AA guideline (minimal)",
+            "aaa": "meets Level AAA guideline (recommended)",
+            "bad": "doesn't meet any accessibility guidelines"
+          },
+          "context": {
+            "18pt": "for large (18pt+) text",
+            "text": "for text"
+          }
+        }
       },
       "basic_colors": {
         "_tab_label": "Basic",