Add role="tooltip" to tooltips throughout the app
This commit is contained in:
parent
ea87417d4f
commit
1be400d18e
|
@ -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}}"
|
||||||
|
|
|
@ -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}}
|
||||||
|
|
|
@ -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}}"
|
||||||
|
|
|
@ -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}}"
|
||||||
|
|
Loading…
Reference in a new issue