accessibility_scanner-8.x-1.0-alpha8/templates/wpa-axecore-cli-full-report.html.twig

{#
/**
 * @file
 * Template file for the preview report.
 *
 * Available variables:
 * - summary: Object containing summary results.
 * - url: URL this report relates to.
 */
#}

{{ attach_library('accessibility_scanner/axecore') }}
{{ attach_library('accessibility_scanner/google-charts-axecore-cli') }}

{% set status_modifier = summary.is_passing ? 'pass' : 'fail' %}
{% set status_string = summary.is_passing ? 'Pass'|t : 'Fail'|t %}

<div class="axecore-cli-full axecore-cli-full--{{ status_modifier }}">
  <h2>{{ 'Detailed Accessibility Report'|t }}</h2>

  <div class="axecore-cli-full__section">
    <p><strong>{{ 'Skip to Section:'|t }}</strong></p>
    <ul>
      <li><a href="#overview">{{ 'Overview'|t }}</a></li>
      <li><a href="#rule-violations">{{ 'Rule Violations'|t }}</a></li>
      <li><a href="#needs-review">{{ 'Needs Review'|t }}</a></li>
      <li><a href="#passing-rules">{{ 'Passing Rules'|t }}</a></li>
      <li><a href="#inapplicable-rules">{{ 'Inapplicable Rules'|t }}</a></li>
    </ul>
  </div>

  <div id="overview" class="axecore-cli-full__section">
    <h3>{{ 'Overview'|t }}</h3>
  {% include '@accessibility_scanner/wpa-axecore-cli-preview.html.twig' %}
  </div>

  <div id="rule-violations" class="axecore-cli-full__section">
    <h3>{{ 'Rule Violations'|t }}</h3>
    {% if results.violations is not empty %}
      <p>{{ 'The following rule violations were detected on the page:'|t }}</p>
      <ul>
      {% for rule in results.violations %}
      <li class="axecore-cli-full__violation axecore-cli-full__violation--{{ rule.impact }}">
        <strong>
          <span class="axecore-cli-full__impact">{{ rule.impact }}</span> - <a href="{{ rule.helpUrl}}" target="_blank" rel="noopener noreferrer">{{ rule.help }}</a>
        </strong>
        <ul>
        {% for node in rule.nodes %}
          <li>{{ node.failureSummary }}<br><code>{{ node.html }}</code></li>
        {% endfor %}
        </ul>
      </li>
      {% endfor %}
      </ul>
    {% else %}
      <p>{{ 'No rule violations were detected on the page!'}}</p>
    {% endif %}
  </div>

  <div id="needs-review" class="axecore-cli-full__section">
    <h3>{{ 'Needs Review'|t }}</h3>
    {% if results.incomplete is not empty %}
      <p>{{ 'The following elements could not be adequately scanned and need further review:'|t }}</p>

      <ul>
      {% for rule in results.incomplete %}
      <li class="axecore-cli-full__incomplete axecore-cli-full__incomplete--{{ rule.impact }}">
        <strong>
          <span class="axecore-cli-full__impact">{{ rule.impact }}:</span> - <a href="{{ rule.helpUrl}}" target="_blank" rel="noopener noreferrer">{{ rule.help }}</a>
        </strong>
        <ul>
        {% for node in rule.nodes %}
          <li>{{ node.failureSummary }}<br><code>{{ node.html }}</code></li>
        {% endfor %}
        </ul>
      </li>
      {% endfor %}
      </ul>
    {% else %}
      {{ 'All page elements were evaluated by @axe-core/cli.'|t }}
    {% endif %}
  </div>

  <div id="passing-rules" class="axecore-cli-full__section">
    <h3>{{ 'Passing Rules'|t }}</h3>
    {% if results.passes is not empty %}
      <p>{{ 'The scanned page passed the following rules:' }}</p>
      <ul>
      {% for rule in results.passes %}
        <li><a href="{{ rule.helpUrl}}" target="_blank" rel="noopener noreferrer">{{ rule.help }}</a></li>
      {% endfor %}
      </ul>
    {% else %}
    {{ 'There were no passing accessibility rules on this page.'|t }}
    {% endif %}
  </div>

  <div id="inapplicable-rules" class="axecore-cli-full__section">
    <h3>{{ 'Inapplicable Rules'|t }}</h3>
    {% if results.inapplicable is not empty %}
      <p>{{ 'The following rules did not apply to the scanned page:' }}</p>
      <ul>
      {% for rule in results.inapplicable %}
        <li><a href="{{ rule.helpUrl}}" target="_blank" rel="noopener noreferrer">{{ rule.help }}</a></li>
      {% endfor %}
      </ul>
    {% else %}
      <p>{{ 'There are no inapplicable rules for this page.'|t }}</p>
    {% endif %}
  </div>
</div>