Finding Component Breakdown

Overview

The dd-finding component renders a list of audit findings, where each item combines a severity badge (embedding dd-badge), a title, and optional evidence and fix details. An accent stripe reinforces the severity for quick visual scanning.

This component is ideal for accessibility, SEO, and security audit reports where issues need to be listed with clear priority. In WordPress, configure it via a repeater of findings with severity, title, evidence, and fix fields. In Drupal, use a Paragraph type with a select for severity and text areas for evidence and fix.

Basic Usage

Wrap the findings in a dd-finding list, using <ol> when the order communicates priority or <ul> when it does not. Each dd-finding__item holds a severity dd-badge, a title heading, and optional evidence and fix blocks. Apply the matching stripe modifier per item.

Preview

Code

<div class="dd-finding">
  <h4 class="dd-finding__heading">Priority findings</h4>
  <ol class="dd-finding__list">
    <li class="dd-finding__item -critical">
      <span class="dd-finding__badge"><span class="dd-badge -critical"><span class="dd-badge__label">Critical</span></span></span>
      <div class="dd-finding__body">
        <p class="dd-finding__title">Missing &lt;title&gt; tag</p>
        <p class="dd-finding__evidence">No &lt;title&gt; in &lt;head&gt;.</p>
        <p class="dd-finding__fix"><span class="dd-finding__fix-label">Fix:</span> Add a unique 50–60 char title.</p>
      </div>
    </li>
    <li class="dd-finding__item -info">
      <span class="dd-finding__badge"><span class="dd-badge -info"><span class="dd-badge__label">Info</span></span></span>
      <div class="dd-finding__body">
        <p class="dd-finding__title">Striking-distance query ‘web design’ at position 12</p>
        <p class="dd-finding__evidence">4,200 impressions, 0.8% CTR.</p>
        <p class="dd-finding__fix"><span class="dd-finding__fix-label">Fix:</span> Strengthen on-page relevance and internal links.</p>
      </div>
    </li>
    <li class="dd-finding__item -pass">
      <span class="dd-finding__badge"><span class="dd-badge -pass"><span class="dd-badge__label">Pass</span></span></span>
      <div class="dd-finding__body">
        <p class="dd-finding__title">Canonical tags present on all pages</p>
      </div>
    </li>
  </ol>
</div>

Order findings by severity when using the ordered list form.

CSS Modifiers (from _dd_finding.scss)

The SCSS file defines the item layout, accent stripe, and spacing for evidence and fix blocks, with stripe modifiers driven by design tokens. Key modifiers include:

• -critical: Error-toned accent stripe for critical findings.
• -warning: Warning-toned accent stripe for warnings.
• -info: Info-toned accent stripe for informational notes.
• -pass: Success-toned accent stripe for passing checks.

Framework files

• source/scss/components/_dd_badge.scss (embedded severity badge)
• source/scss/components/_dd_finding.scss (styles)

Accessibility and Best Practices

Findings use real list semantics with <ol> or <ul> so assistive technology announces the count and position (WCAG 1.3.1 Info and Relationships). Severity is stated by the badge word, not the stripe colour alone (WCAG 1.4.1 Use of Colour). The finding title heading level continues the page outline without skipping levels (WCAG 1.3.1), and any inline links inside evidence or fix keep their underline and a visible focus indicator.