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"> <td data-test-indicators class="is-narrow">
{{#if allocation.unhealthyDrivers.length}} {{#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"}} {{x-icon "warning" class="is-warning"}}
</span> </span>
{{/if}} {{/if}}
{{#if allocation.nextAllocation}} {{#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"}} {{x-icon "history" class="is-faded"}}
</span> </span>
{{/if}} {{/if}}
@ -47,11 +47,11 @@
{{else if (not allocation)}} {{else if (not allocation)}}
{{! nothing when there's no allocation}} {{! nothing when there's no allocation}}
{{else if statsError}} {{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"}} {{x-icon "warning" class="is-warning"}}
</span> </span>
{{else}} {{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 <progress
class="progress is-info is-small" class="progress is-info is-small"
value="{{cpu.percent}}" value="{{cpu.percent}}"
@ -67,11 +67,11 @@
{{else if (not allocation)}} {{else if (not allocation)}}
{{! nothing when there's no allocation}} {{! nothing when there's no allocation}}
{{else if statsError}} {{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"}} {{x-icon "warning" class="is-warning"}}
</span> </span>
{{else}} {{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 <progress
class="progress is-danger is-small" class="progress is-danger is-small"
value="{{memory.percent}}" value="{{memory.percent}}"

View file

@ -1,6 +1,6 @@
<td data-test-icon class="is-narrow"> <td data-test-icon class="is-narrow">
{{#if node.unhealthyDrivers.length}} {{#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"}} {{x-icon "warning" class="is-warning"}}
</span> </span>
{{/if}} {{/if}}

View file

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

View file

@ -43,11 +43,11 @@
{{else if (not task)}} {{else if (not task)}}
{{! nothing when there's no task}} {{! nothing when there's no task}}
{{else if statsError}} {{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"}} {{x-icon "warning" class="is-warning"}}
</span> </span>
{{else}} {{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 <progress
class="progress is-info is-small" class="progress is-info is-small"
value="{{cpu.percent}}" value="{{cpu.percent}}"
@ -63,11 +63,11 @@
{{else if (not task)}} {{else if (not task)}}
{{! nothing when there's no task}} {{! nothing when there's no task}}
{{else if statsError}} {{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"}} {{x-icon "warning" class="is-warning"}}
</span> </span>
{{else}} {{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 <progress
class="progress is-danger is-small" class="progress is-danger is-small"
value="{{memory.percent}}" value="{{memory.percent}}"