Skip to content

Commit

Permalink
file.html: Add an aria-label to the coverage column
Browse files Browse the repository at this point in the history
The column with the coverage info can be:

  no coverage (displays nothing, normal background)
  0 (displays nothing, color-coded)
  number (color-coded)

For screen reader users, we make it be like these, respectively:

  no coverage (says "no coverage" in the aria_label)
  0 (says "0")
  number (as usual)
  • Loading branch information
federicomenaquintero authored and marco-c committed Jun 12, 2022
1 parent 273cfa4 commit f642a4c
Showing 1 changed file with 4 additions and 1 deletion.
5 changes: 4 additions & 1 deletion src/templates/file.html
Original file line number Diff line number Diff line change
Expand Up @@ -11,14 +11,17 @@
{%- set highlight = "success" -%}
{%- set highlight_light = "success-light" -%}
{%- set count = item.1 -%}
{%- set aria_label = count -%}
{%- elif item.1 < 0 -%}
{% set highlight = "white" -%}
{% set highlight_light = "white" -%}
{% set count = "" -%}
{%- set aria_label = "no coverage" -%}
{%- else -%}
{%- set highlight = "danger" -%}
{%- set highlight_light = "danger-light" -%}
{%- set count = "" -%}
{%- set aria_label = "0" -%}
{%- endif -%}
<div class="columns p-0 m-0" role="row">
<div
Expand All @@ -29,7 +32,7 @@
</div>
<div
class="column is-1 is-narrow p-0 has-text-centered has-text-{{ highlight_light }} has-background-{{ highlight }}"
role="cell">
role="cell" aria-label="{{ aria_label }}">
{{ count }}
</div>
<div class="column has-background-{{ highlight_light }} p-0"
Expand Down

0 comments on commit f642a4c

Please sign in to comment.