y-packages/accessibility-console
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Major upgrade v2.0.0

Browse Source
This commit is contained in:
Enes Yakıştır
2026-05-13 09:10:43 +03:00
commit e348025579
41 changed files with 2139 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
demo/static_preview.html
+102
View File
@@ -0,0 +1,102 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Accessibility Console Preview</title>
</head>
<body>
<h1>Accessibility Console Preview</h1>
<p>This is a static preview of how the error console looks.</p>
<p>Click the "Accessibility: 2 Errors" button in the bottom right.</p>
<!-- Hardcoded output from HtmlReporter for demonstration -->
<div id='yaknet-a11y-console-toggle' onclick='document.getElementById("yaknet-a11y-console").style.display="block"'
style='position:fixed; bottom:10px; right:10px; background:#ff9900; color:white; padding:8px 15px; border-radius:4px; cursor:pointer; font-family:sans-serif; z-index:99999; font-weight:bold; font-size:14px; box-shadow: 0 2px 5px rgba(0,0,0,0.2); border: 1px solid #cc7a00;'>
⚠️ Accessibility: 2 Errors
</div>
<div id='yaknet-a11y-console'
style='display:none; position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.7); z-index:100000; font-family:Verdana, sans-serif;'>
<div
style='width:90%; max-width:1200px; margin:50px auto; background:#fff; box-shadow:0 0 20px rgba(0,0,0,0.5); overflow:hidden; border-radius:4px;'>
<div
style='background:#f7f7f7; color:#333; padding:15px 20px; border-bottom:1px solid #ccc; font-size:18px; font-weight:bold; display:flex; justify-content:space-between; align-items:center;'>
<span>
<span
style='background:#d9534f; color:white; padding:2px 6px; border-radius:3px; font-size:14px; vertical-align:middle; margin-right:10px;'>FATAL
ERROR</span>
Accessibility Violations Detected
</span>
<button onclick='document.getElementById("yaknet-a11y-console").style.display="none"'
style='border:none; background:none; font-size:24px; cursor:pointer; color:#999; line-height:1;'>&times;</button>
</div>
<div style='max-height:80vh; overflow-y:auto; padding:0;'>
<table style='width:100%; border-collapse:collapse; font-size:14px;'>
<thead style='background:#eeeff0; color:#333; text-align:left;'>
<tr>
<th style='padding:12px 15px; border-bottom:2px solid #ddd; width: 50px;'>#</th>
<th style='padding:12px 15px; border-bottom:2px solid #ddd;'>Violation / Message</th>
<th style='padding:12px 15px; border-bottom:2px solid #ddd;'>Source File</th>
</tr>
</thead>
<tbody>
<tr style='border-bottom:1px solid #eee; background:#fff;'>
<td style='padding:12px 15px; vertical-align:top; color:#999;'>1</td>
<td style='padding:12px 15px; vertical-align:top;'>
<div style='color:#cc0000; font-weight:bold; margin-bottom:5px; font-size:15px;'>Image
is missing alt attribute.</div>
<div style='font-size:12px; color:#555; margin-bottom:8px;'>Rule:
<code>img-alt-text</code></div>
<div
style='background:#f1f1f1; padding:8px; border-left:3px solid #ccc; font-family:monospace; font-size:12px; margin-bottom:8px; color:#333; overflow-x:auto;'>
&lt;img src="logo.png" /&gt;
</div>
<div style='font-size:13px; color:#222;'>
<span style='color:#28a745; font-weight:bold;'>Fix:</span> Add an alt="" attribute
describing the image, or alt="" if decorative.
</div>
</td>
<td
style='padding:12px 15px; vertical-align:top; font-family:monospace; font-size:13px; color:#333;'>
<div style='margin-bottom:5px;'>
C:\Users\User\Project\views\header.php<strong>:42</strong>
</div>
</td>
</tr>
<tr style='border-bottom:1px solid #eee; background:#f9f9f9;'>
<td style='padding:12px 15px; vertical-align:top; color:#999;'>2</td>
<td style='padding:12px 15px; vertical-align:top;'>
<div style='color:#cc0000; font-weight:bold; margin-bottom:5px; font-size:15px;'>Form
field &lt;input&gt; missing label.</div>
<div style='font-size:12px; color:#555; margin-bottom:8px;'>Rule:
<code>form-label</code></div>
<div
style='background:#f1f1f1; padding:8px; border-left:3px solid #ccc; font-family:monospace; font-size:12px; margin-bottom:8px; color:#333; overflow-x:auto;'>
&lt;input type="text" name="username" /&gt;
</div>
<div style='font-size:13px; color:#222;'>
<span style='color:#28a745; font-weight:bold;'>Fix:</span> Associate a &lt;label&gt;
via "for" attribute, wrap in &lt;label&gt;, or use "aria-label".
</div>
</td>
<td
style='padding:12px 15px; vertical-align:top; font-family:monospace; font-size:13px; color:#333;'>
<div style='margin-bottom:5px;'>
C:\Users\User\Project\views\login.php<strong>:15</strong>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</body>
</html>