diff --git a/src/Reporting/HtmlDashboardReporter.php b/src/Reporting/HtmlDashboardReporter.php index 8c717e5..1806c1d 100644 --- a/src/Reporting/HtmlDashboardReporter.php +++ b/src/Reporting/HtmlDashboardReporter.php @@ -13,10 +13,54 @@ class HtmlDashboardReporter { $count = count($violations); $date = date('Y-m-d H:i:s'); - - $rows = ''; + + // Calculate severity and standard counts + $criticalCount = 0; + $errorCount = 0; + $warningCount = 0; + $infoCount = 0; + + $standardA = 0; + $standardAA = 0; + $standardAAA = 0; + foreach ($violations as $v) { + switch ($v->severity) { + case \YakNet\AccessibilityConsole\Core\Severity::CRITICAL: + $criticalCount++; + break; + case \YakNet\AccessibilityConsole\Core\Severity::ERROR: + $errorCount++; + break; + case \YakNet\AccessibilityConsole\Core\Severity::WARNING: + $warningCount++; + break; + case \YakNet\AccessibilityConsole\Core\Severity::INFO: + $infoCount++; + break; + } + + switch ($v->standard) { + case \YakNet\AccessibilityConsole\Core\WCAGStandard::A: + $standardA++; + break; + case \YakNet\AccessibilityConsole\Core\WCAGStandard::AA: + $standardAA++; + break; + case \YakNet\AccessibilityConsole\Core\WCAGStandard::AAA: + $standardAAA++; + break; + } + } + + // Calculate health score (0-100) + $deductions = ($criticalCount * 15) + ($errorCount * 10) + ($warningCount * 4) + ($infoCount * 1); + $score = max(0, min(100, 100 - $deductions)); + + $cards = ''; + foreach ($violations as $index => $v) { $severityClass = strtolower($v->severity->value); + $standardVal = $v->standard->value; $aiSuggestion = $v->fixSuggestion; $explanation = ''; $fixedCode = ''; @@ -25,80 +69,1110 @@ class HtmlDashboardReporter preg_match('/EXPLANATION:(.*)FIX:(.*)/s', $aiSuggestion, $matches); $explanation = trim($matches[1] ?? ''); $fixedCode = trim($matches[2] ?? ''); - // Clean up potential markdown $fixedCode = preg_replace('/^```html\s*|\s*```$/i', '', $fixedCode); } else { $fixedCode = $aiSuggestion; } - $rows .= " -
" . htmlspecialchars($v->htmlSnippet) . "" . htmlspecialchars($fixedCode) . "" : "Manual fix required") . "
- {$escapedFixed}
+
+ {$escapedSnippet}
+ Target: {$target} | Generated: {$date}
- -Violations Found
-Standard Level
-| Rule ID | -Issue | -Code Snippet | -AI Recommendation | -Source Location | -
|---|
Web Standartları ve WCAG Uyum Analiz Raporu
+Sayfanın genel standartlara uygunluk derecesi.
+Target: demo/broken.html | Generated: 2026-05-13 09:46:04
- -Violations Found
-Standard Level
-| Rule ID | -Issue | -Code Snippet | -AI Recommendation | -Source Location | -
|---|---|---|---|---|
| WCAG_3_1_1_LANG | -The html element must have a lang attribute. | - |
- |
- N/A | -
| WCAG_1_1_1_ALT | -Images must have an alt attribute. | - |
- |
- N/A | -
| WCAG_2_4_4_LINK_TEXT | -Links must have discernible text. | - |
- |
- N/A | -
| WCAG_4_1_2_BUTTON | -Buttons must have discernible text. | - |
- |
- N/A | -
Add lang="en" (or your language) to the html tag.
+
+ <img src="logo.png">
+ Add an alt attribute. Use alt="" for decorative images.
+
+ <a href="https://google.com"></a>
+ Add text content or an aria-label to the link.
+
+ <button type="submit"></button>
+ Add text or an aria-label to the button.
+
+ <input type="text" placeholder="Search website...">
+ Add a <label for="..."> or an aria-label attribute.
+
+ <a href="/keyboard" tabindex="5">Keyboard test</a>
+ Remove the positive tabindex or change it to "0" or "-1".
+
+ <p style="color: #888888; background-color: #999999;">This text has extremely low contrast ratio!</p>
+ Adjust colors to increase contrast. For example, text: #888888, background: #999999.
+
+ <h1 id="main-content">Welcome to a broken page</h1>
+ <div id="main-content">This is a duplicate main-content ID div!</div>
+ <div role="cool-widget" aria-controls="non-existent-popup">WAI-ARIA elements</div>
+ <div role="cool-widget" aria-controls="non-existent-popup">WAI-ARIA elements</div>
+ <iframe src="https://www.youtube.com/embed/dQw4w9WgXcQ" width="560" height="315"></iframe>
+ Add a descriptive title attribute, e.g., title="Embedded Map" or title="Video Player".
+
+ <a href="/read-more">Click here</a>
+ Change the link text to describe its target, or add an aria-label attribute to provide context.
+
+ <a href="/devam-oku">devamını oku</a>
+ Change the link text to describe its target, or add an aria-label attribute to provide context.
+
+ <input type="text" placeholder="Search website...">
+ Add a <label for="..."> or an aria-label attribute. Placeholder text is not a reliable label replacement.
+
+ <img src="logo2.png" alt="logo of our company">
+ Remove redundant phrases like "logo of" from the alt text. Screen readers already announce elements as images.
+
+ <img src="profile.jpg" alt="profile photo of john doe">
+ Remove redundant phrases like "photo of" from the alt text. Screen readers already announce elements as images.
+
+ <div aria-hidden="true">
+ <button type="button">Hidden click</button>
+ </div>
+ Remove aria-hidden="true" from the container or make its focusable elements non-focusable (e.g. by setting tabindex="-1" or disabled).
+
+ <a href="#" aria-hidden="true">Hidden link</a>
+ Remove aria-hidden="true" from the container or make its focusable elements non-focusable (e.g. by setting tabindex="-1" or disabled).
+
+ <head>
+ <title></title>
+</head>
+ Provide descriptive text inside the <title> element.
+
+