Add role="tooltip" to tooltips throughout the app

This commit is contained in:
Michael Lange 2018-10-17 07:17:24 -07:00
parent ea87417d4f
commit 1be400d18e
4 changed files with 17 additions and 17 deletions

View file

@ -1,11 +1,11 @@
<td data-test-indicators class="is-narrow">
{{#if allocation.unhealthyDrivers.length}}
<span data-test-icon="unhealthy-driver" class="tooltip text-center" aria-label="Allocation depends on unhealthy drivers">
<span data-test-icon="unhealthy-driver" class="tooltip text-center" role="tooltip" aria-label="Allocation depends on unhealthy drivers">
{{x-icon "warning" class="is-warning"}}
</span>
{{/if}}
{{#if allocation.nextAllocation}}
<span data-test-icon="reschedule" class="tooltip text-center" aria-label="Allocation was rescheduled">
<span data-test-icon="reschedule" class="tooltip text-center" role="tooltip" aria-label="Allocation was rescheduled">
{{x-icon "history" class="is-faded"}}
</span>
{{/if}}
@ -47,11 +47,11 @@
{{else if (not allocation)}}
{{! nothing when there's no allocation}}
{{else if statsError}}
<span class="tooltip text-center" aria-label="Couldn't collect stats">
<span class="tooltip text-center" role="tooltip" aria-label="Couldn't collect stats">
{{x-icon "warning" class="is-warning"}}
</span>
{{else}}
<div class="inline-chart is-small tooltip" aria-label="{{cpu.used}} / {{stats.reservedCPU}} MHz">
<div class="inline-chart is-small tooltip" role="tooltip" aria-label="{{cpu.used}} / {{stats.reservedCPU}} MHz">
<progress
class="progress is-info is-small"
value="{{cpu.percent}}"
@ -67,11 +67,11 @@
{{else if (not allocation)}}
{{! nothing when there's no allocation}}
{{else if statsError}}
<span class="tooltip is-small text-center" aria-label="Couldn't collect stats">
<span class="tooltip is-small text-center" role="tooltip" aria-label="Couldn't collect stats">
{{x-icon "warning" class="is-warning"}}
</span>
{{else}}
<div class="inline-chart tooltip" aria-label="{{format-bytes memory.used}} / {{stats.reservedMemory}} MiB">
<div class="inline-chart tooltip" role="tooltip" aria-label="{{format-bytes memory.used}} / {{stats.reservedMemory}} MiB">
<progress
class="progress is-danger is-small"
value="{{memory.percent}}"

View file

@ -1,6 +1,6 @@
<td data-test-icon class="is-narrow">
{{#if node.unhealthyDrivers.length}}
<span class="tooltip text-center" aria-label="Client has unhealthy drivers">
<span class="tooltip text-center" role="tooltip" aria-label="Client has unhealthy drivers">
{{x-icon "warning" class="is-warning"}}
</span>
{{/if}}

View file

@ -1,5 +1,5 @@
{{#freestyle-usage "progress-bar" title="Progress Bar"}}
<div class="inline-chart tooltip" aria-label="5 / 15">
<div class="inline-chart tooltip" role="tooltip" aria-label="5 / 15">
<progress
class="progress is-primary is-small"
value="0.33"
@ -12,7 +12,7 @@
{{#freestyle-usage "progress-bar-colors" title="Progress Bar Colors"}}
<div class="columns">
<div class="column">
<div class="inline-chart tooltip" aria-label="5 / 15">
<div class="inline-chart tooltip" role="tooltip" aria-label="5 / 15">
<progress
class="progress is-info is-small"
value="0.33"
@ -22,7 +22,7 @@
</div>
</div>
<div class="column">
<div class="inline-chart tooltip" aria-label="5 / 15">
<div class="inline-chart tooltip" role="tooltip" aria-label="5 / 15">
<progress
class="progress is-success is-small"
value="0.33"
@ -32,7 +32,7 @@
</div>
</div>
<div class="column">
<div class="inline-chart tooltip" aria-label="5 / 15">
<div class="inline-chart tooltip" role="tooltip" aria-label="5 / 15">
<progress
class="progress is-warning is-small"
value="0.33"
@ -42,7 +42,7 @@
</div>
</div>
<div class="column">
<div class="inline-chart tooltip" aria-label="5 / 15">
<div class="inline-chart tooltip" role="tooltip" aria-label="5 / 15">
<progress
class="progress is-danger is-small"
value="0.33"
@ -57,7 +57,7 @@
{{#freestyle-usage "progress-bar-live" title="Progress Bar Live Updates"}}
<div class="columns">
<div class="column is-one-third">
<div class="inline-chart tooltip" aria-label="{{numerator}} / {{denominator}}">
<div class="inline-chart tooltip" role="tooltip" aria-label="{{numerator}} / {{denominator}}">
<progress
class="progress is-primary is-small"
value="{{percentage}}"

View file

@ -43,11 +43,11 @@
{{else if (not task)}}
{{! nothing when there's no task}}
{{else if statsError}}
<span class="tooltip text-center" aria-label="Couldn't collect stats">
<span class="tooltip text-center" role="tooltip" aria-label="Couldn't collect stats">
{{x-icon "warning" class="is-warning"}}
</span>
{{else}}
<div class="inline-chart is-small tooltip" aria-label="{{cpu.used}} / {{taskStats.reservedCPU}} MHz">
<div class="inline-chart is-small tooltip" role="tooltip" aria-label="{{cpu.used}} / {{taskStats.reservedCPU}} MHz">
<progress
class="progress is-info is-small"
value="{{cpu.percent}}"
@ -63,11 +63,11 @@
{{else if (not task)}}
{{! nothing when there's no task}}
{{else if statsError}}
<span class="tooltip is-small text-center" aria-label="Couldn't collect stats">
<span class="tooltip is-small text-center" role="tooltip" aria-label="Couldn't collect stats">
{{x-icon "warning" class="is-warning"}}
</span>
{{else}}
<div class="inline-chart tooltip" aria-label="{{format-bytes memory.used}} / {{taskStats.reservedMemory}} MiB">
<div class="inline-chart tooltip" role="tooltip" aria-label="{{format-bytes memory.used}} / {{taskStats.reservedMemory}} MiB">
<progress
class="progress is-danger is-small"
value="{{memory.percent}}"