npm - q5 - Versions diffs - 4.5.0 → 4.5.4 - Mend

q5 4.5.0 → 4.5.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (9) hide show

package/README.md +3 -1
package/deno.json +2 -1
package/package.json +28 -5
package/q5.d.ts +3 -1
package/q5.js +178 -82
package/q5.min.js +2 -1
package/q5.min.js.map +1 -0
package/.prettierignore +0 -2
package/teach/accessibility.html +0 -503

package/teach/accessibility.html DELETED Viewed

@@ -1,503 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-	<meta charset="UTF-8">
-	<meta name="viewport" content="width=device-width, initial-scale=1.0">
-	<title>q5 Accessibility</title>
-	<link rel="icon" href="/q5js_logo.avif">
-	<link rel="stylesheet" href="/home/index.css">
-	<meta name="description" content="Accessibility Report for q5.js">
-	<style>
-		:root {
-			--pass: #28a745;
-			--fail: #dc3545;
-			--na: #6c757d;
-			--partial: #ffc107;
-		}
-		main {
-			max-width: 900px;
-			margin: 100px auto;
-			padding: 20px;
-		}
-		h1 {
-			font-size: 2.5em;
-			margin-bottom: 20px;
-			color: var(--brand-primary);
-		}
-		h2 {
-			margin-top: 40px;
-			margin-bottom: 20px;
-			padding-bottom: 10px;
-			border-bottom: 2px solid var(--brand-primary);
-		}
-		h3 {
-			margin-top: 30px;
-			color: var(--primary);
-		}
-		p,
-		li {
-			font-size: 1.1rem;
-			line-height: 1.6;
-			color: var(--primary);
-		}
-		a {
-			color: var(--blue1);
-		}
-		.dark a {
-			color: var(--blue);
-		}
-		ul {
-			margin-left: 20px;
-		}
-		table {
-			width: 100%;
-			border-collapse: collapse;
-			margin-top: 20px;
-			font-size: 0.95rem;
-		}
-		th,
-		td {
-			padding: 12px;
-			text-align: left;
-			border-bottom: 1px solid var(--primary);
-			vertical-align: top;
-		}
-		th {
-			background-color: rgba(128, 128, 128, 0.1);
-			font-weight: bold;
-		}
-		tr:hover {
-			background-color: rgba(128, 128, 128, 0.05);
-		}
-		.level-badge {
-			display: inline-block;
-			padding: 2px 6px;
-			border-radius: 4px;
-			font-size: 0.8em;
-			font-weight: bold;
-			background: rgba(128, 128, 128, 0.2);
-		}
-		/* Status Text Colors */
-		.status-pass {
-			color: var(--pass);
-			font-weight: bold;
-		}
-		.status-fail {
-			color: var(--fail);
-			font-weight: bold;
-		}
-		.status-na {
-			color: var(--na);
-			font-style: italic;
-		}
-	</style>
-</head>
-<body class="dark">
-	<main>
-		<h1>Accessibility Report</h1>
-		<p>The q5.js project is committed to ensuring digital accessibility for people with disabilities. We are continually
-			improving the user experience for everyone, and applying the relevant accessibility standards.</p>
-		<h2>Conformance Status</h2>
-		<p>The <a href="https://www.w3.org/WAI/standards-guidelines/wcag/">Web Content Accessibility Guidelines (WCAG)</a>
-			defines requirements for designers and developers to improve accessibility for people with disabilities. It
-			defines three levels of conformance: Level A, Level AA, and Level AAA.</p>
-		<p>q5.js is conformant with WCAG 2.1 level AA, with the exception of dynamic HTML5 canvas content.</p>
-		<h2>Keyboard-Only Navigation</h2>
-		<p>q5js.org can be accessed entirely through keyboard-only navigation.</p>
-		<p>
-		<p>Note that the interactive code editors on the Learn pages trap the <code>Tab</code> key, which is used for
-			indentation. To exit the editor and move to the next focusable element, press <code>Esc</code>. To move to the
-			previous element, press <code>Shift + Tab</code>.</p>
-		</p>
-		<h2>Compatibility with Browsers and Assistive Technology</h2>
-		<p>Accessibility of q5 relies on a web browser to work with the particular combination of assistive
-			technologies or plugins installed on your computer</p>
-		<p>q5 is designed to be compatible with Modern web browsers (Google Chrome, Firefox, Safari, Edge) on
-			Windows,
-			macOS, and Linux.</p>
-		<h2>Limitations and Alternatives</h2>
-		<p>Despite our best efforts to ensure accessibility of q5.js, there may be some limitations. Below is a description
-			of known limitations and potential solutions. Please contact us if you observe an issue not listed below.</p>
-		<h3>Known Limitations for q5.js:</h3>
-		<ul>
-			<li><strong>Canvas-based content</strong>: q5.js renders graphics to an HTML5 Canvas. Canvas content is just
-				pixels and is not inherently accessible to screen readers.
-				<ul>
-					<li><strong>Alternative</strong>: Users creating sketches with q5.js are encouraged to provide text
-						alternatives or HTML-based UI controls where appropriate.</li>
-				</ul>
-			</li>
-		</ul>
-		<h2>Assessment Approach</h2>
-		<p>The q5.js team assessed the accessibility of q5.js by the following approaches:</p>
-		<ul>
-			<li>Self-evaluation</li>
-		</ul>
-		<h2>Review Feedback</h2>
-		<p>We welcome your feedback on the accessibility of q5.js. Please let us know if you encounter accessibility
-			barriers on q5.js:</p>
-		<ul>
-			<li><a href="https://github.com/q5js/q5.js/issues">GitHub Issues</a></li>
-			<li><a href="https://discord.gg/QuxQYwGWuB">Join our Discord</a></li>
-		</ul>
-		<p>This report was created on January 11, 2026.</p>
-		<h2>WCAG 2.1 Checklist</h2>
-		<p>The following table lists the Success Criteria from the Web Content Accessibility Guidelines (WCAG) 2.1. This
-			checklist is used to evaluate the conformity of the q5.js website and documentation.</p>
-		<h3>1. Perceivable</h3>
-		<p>Information and user interface components must be presentable to users in ways they can perceive.</p>
-		<table>
-			<thead>
-				<tr>
-					<th style="width: 35%;">Success Criterion</th>
-					<th style="width: 10%;">Level</th>
-					<th style="width: 55%;">Notes for q5.js</th>
-				</tr>
-			</thead>
-			<tbody>
-				<tr>
-					<td><strong>1.1.1 Non-text Content</strong><br>All non-text content has a text alternative.</td>
-					<td><span class="level-badge">A</span></td>
-					<td>ensure alt text on all logos and example images.</td>
-				</tr>
-				<tr>
-					<td><strong>1.2.1 Audio-only and Video-only (Prerecorded)</strong><br>Alternatives provided for time-based
-						media.</td>
-					<td><span class="level-badge">A</span></td>
-					<td>N/A (No audio/video content currently hosted).</td>
-				</tr>
-				<tr>
-					<td><strong>1.2.2 Captions (Prerecorded)</strong><br>Captions for all prerecorded audio content.</td>
-					<td><span class="level-badge">A</span></td>
-					<td>N/A</td>
-				</tr>
-				<tr>
-					<td><strong>1.2.3 Audio Description or Media Alternative</strong><br>Provided for synchronized media.</td>
-					<td><span class="level-badge">A</span></td>
-					<td>N/A</td>
-				</tr>
-				<tr>
-					<td><strong>1.2.4 Captions (Live)</strong><br>Captions for live audio content.</td>
-					<td><span class="level-badge">AA</span></td>
-					<td>N/A</td>
-				</tr>
-				<tr>
-					<td><strong>1.2.5 Audio Description (Prerecorded)</strong><br>Provided for all prerecorded video content.</td>
-					<td><span class="level-badge">AA</span></td>
-					<td>N/A</td>
-				</tr>
-				<tr>
-					<td><strong>1.3.1 Info and Relationships</strong><br>Info and structure can be programmatically determined.
-					</td>
-					<td><span class="level-badge">A</span></td>
-					<td>Use semantic HTML (header, nav, main, footer).</td>
-				</tr>
-				<tr>
-					<td><strong>1.3.2 Meaningful Sequence</strong><br>Correct reading sequence programmatically determined.</td>
-					<td><span class="level-badge">A</span></td>
-					<td>DOM order matches visual order.</td>
-				</tr>
-				<tr>
-					<td><strong>1.3.3 Sensory Characteristics</strong><br>Instructions don't rely solely on shape, size, etc.</td>
-					<td><span class="level-badge">A</span></td>
-					<td>Ensure instructions are explicit.</td>
-				</tr>
-				<tr>
-					<td><strong>1.3.4 Orientation</strong><br>Not restricted to a single display orientation.</td>
-					<td><span class="level-badge">AA</span></td>
-					<td>Responsive design supports both.</td>
-				</tr>
-				<tr>
-					<td><strong>1.3.5 Identify Input Purpose</strong><br>Purpose of input fields can be programmatically
-						determined.</td>
-					<td><span class="level-badge">AA</span></td>
-					<td>Use autocomplete attributes on forms if added.</td>
-				</tr>
-				<tr>
-					<td><strong>1.4.1 Use of Color</strong><br>Color is not the only means of conveying information.</td>
-					<td><span class="level-badge">A</span></td>
-					<td>Check links vs text, and syntax highlighting.</td>
-				</tr>
-				<tr>
-					<td><strong>1.4.2 Audio Control</strong><br>Mechanism to pause/stop auto-playing audio > 3s.</td>
-					<td><span class="level-badge">A</span></td>
-					<td>N/A</td>
-				</tr>
-				<tr>
-					<td><strong>1.4.3 Contrast (Minimum)</strong><br>Text has contrast ratio of at least 4.5:1.</td>
-					<td><span class="level-badge">AA</span></td>
-					<td>Verify theme colors in dark/light modes.</td>
-				</tr>
-				<tr>
-					<td><strong>1.4.4 Resize Text</strong><br>Text can be resized to 200% without loss of content.</td>
-					<td><span class="level-badge">AA</span></td>
-					<td>Ensure relative units (rem/em) or responsive layout.</td>
-				</tr>
-				<tr>
-					<td><strong>1.4.5 Images of Text</strong><br>Text is used to convey information rather than images of text.
-					</td>
-					<td><span class="level-badge">AA</span></td>
-					<td>Avoid baking text into images.</td>
-				</tr>
-				<tr>
-					<td><strong>1.4.10 Reflow</strong><br>Content reflows without 2D scrolling at 400% zoom.</td>
-					<td><span class="level-badge">AA</span></td>
-					<td>Responsive layout check.</td>
-				</tr>
-				<tr>
-					<td><strong>1.4.11 Non-text Contrast</strong><br>UI components/graphics have 3:1 contrast.</td>
-					<td><span class="level-badge">AA</span></td>
-					<td>Check button borders and icons.</td>
-				</tr>
-				<tr>
-					<td><strong>1.4.12 Text Spacing</strong><br>No loss of content when text spacing properties are changed.</td>
-					<td><span class="level-badge">AA</span></td>
-					<td>CSS line-height check.</td>
-				</tr>
-				<tr>
-					<td><strong>1.4.13 Content on Hover or Focus</strong><br>Dismissible, hoverable, and persistent.</td>
-					<td><span class="level-badge">AA</span></td>
-					<td>Check tooltips and menus.</td>
-				</tr>
-			</tbody>
-		</table>
-		<h3>2. Operable</h3>
-		<p>User interface components and navigation must be operable.</p>
-		<table>
-			<thead>
-				<tr>
-					<th style="width: 35%;">Success Criterion</th>
-					<th style="width: 10%;">Level</th>
-					<th style="width: 55%;">Notes for q5.js</th>
-				</tr>
-			</thead>
-			<tbody>
-				<tr>
-					<td><strong>2.1.1 Keyboard</strong><br>All functionality operable via keyboard.</td>
-					<td><span class="level-badge">A</span></td>
-					<td>Ensure nav and interactive sketches are keyboard reachable where possible.</td>
-				</tr>
-				<tr>
-					<td><strong>2.1.2 No Keyboard Trap</strong><br>Focus can be moved away from components.</td>
-					<td><span class="level-badge">A</span></td>
-					<td>Critical for embedded sketches.</td>
-				</tr>
-				<tr>
-					<td><strong>2.1.4 Character Key Shortcuts</strong><br>Single character shortcuts can be turned off/remapped.
-					</td>
-					<td><span class="level-badge">A</span></td>
-					<td>N/A (No custom shortcuts implemented).</td>
-				</tr>
-				<tr>
-					<td><strong>2.2.1 Timing Adjustable</strong><br>Users can turn off, adjust, or extend time limits.</td>
-					<td><span class="level-badge">A</span></td>
-					<td>N/A</td>
-				</tr>
-				<tr>
-					<td><strong>2.2.2 Pause, Stop, Hide</strong><br>Mechanism to pause moving/blinking content.</td>
-					<td><span class="level-badge">A</span></td>
-					<td>Animations on home page should respect user preference or have toggle.</td>
-				</tr>
-				<tr>
-					<td><strong>2.3.1 Three Flashes or Below Threshold</strong><br>No content flashes more than 3 times/sec.</td>
-					<td><span class="level-badge">A</span></td>
-					<td>Avoid flashing demos.</td>
-				</tr>
-				<tr>
-					<td><strong>2.4.1 Bypass Blocks</strong><br>Mechanism to bypass repeated blocks (Skip to Content).</td>
-					<td><span class="level-badge">A</span></td>
-					<td>Implement "Skip to Main Content" link.</td>
-				</tr>
-				<tr>
-					<td><strong>2.4.2 Page Titled</strong><br>Web pages have titles that describe topic/purpose.</td>
-					<td><span class="level-badge">A</span></td>
-					<td>Check &lt;title&gt; tags.</td>
-				</tr>
-				<tr>
-					<td><strong>2.4.3 Focus Order</strong><br>Focusable components receive focus in meaningful order.</td>
-					<td><span class="level-badge">A</span></td>
-					<td>Logical tab order.</td>
-				</tr>
-				<tr>
-					<td><strong>2.4.4 Link Purpose (In Context)</strong><br>Purpose of link determined from link text + context.
-					</td>
-					<td><span class="level-badge">A</span></td>
-					<td>Use descriptive link text (avoid "click here").</td>
-				</tr>
-				<tr>
-					<td><strong>2.4.5 Multiple Ways</strong><br>More than one way to locate a web page.</td>
-					<td><span class="level-badge">AA</span></td>
-					<td>Navigation menu + Sitemap/Search/Links.</td>
-				</tr>
-				<tr>
-					<td><strong>2.4.6 Headings and Labels</strong><br>Headings and labels describe topic or purpose.</td>
-					<td><span class="level-badge">AA</span></td>
-					<td>Clear section headings.</td>
-				</tr>
-				<tr>
-					<td><strong>2.4.7 Focus Visible</strong><br>Keyboard focus indicator is visible.</td>
-					<td><span class="level-badge">AA</span></td>
-					<td>Ensure CSS outline is present on focus.</td>
-				</tr>
-				<tr>
-					<td><strong>2.5.1 Pointer Gestures</strong><br>No multipoint or path-based gestures required.</td>
-					<td><span class="level-badge">A</span></td>
-					<td>Simple clicks/taps only for site UI.</td>
-				</tr>
-				<tr>
-					<td><strong>2.5.2 Pointer Cancellation</strong><br>Down-event doesn't execute function (use up-event).</td>
-					<td><span class="level-badge">A</span></td>
-					<td>Standard button behavior.</td>
-				</tr>
-				<tr>
-					<td><strong>2.5.3 Label in Name</strong><br>Accessible name contains visible label text.</td>
-					<td><span class="level-badge">A</span></td>
-					<td>Verify aria-label matches text.</td>
-				</tr>
-				<tr>
-					<td><strong>2.5.4 Motion Actuation</strong><br>Functionality not dependent on device motion.</td>
-					<td><span class="level-badge">A</span></td>
-					<td>N/A</td>
-				</tr>
-			</tbody>
-		</table>
-		<h3>3. Understandable</h3>
-		<p>Information and the operation of the user interface must be understandable.</p>
-		<table>
-			<thead>
-				<tr>
-					<th style="width: 35%;">Success Criterion</th>
-					<th style="width: 10%;">Level</th>
-					<th style="width: 55%;">Notes for q5.js</th>
-				</tr>
-			</thead>
-			<tbody>
-				<tr>
-					<td><strong>3.1.1 Language of Page</strong><br>Default language programmatically determined.</td>
-					<td><span class="level-badge">A</span></td>
-					<td>Set &lt;html lang="en"&gt;.</td>
-				</tr>
-				<tr>
-					<td><strong>3.1.2 Language of Parts</strong><br>Language of passages programmatically determined.</td>
-					<td><span class="level-badge">AA</span></td>
-					<td>Mark up language changes if any.</td>
-				</tr>
-				<tr>
-					<td><strong>3.2.1 On Focus</strong><br>Focus does not initiate context change.</td>
-					<td><span class="level-badge">A</span></td>
-					<td>No auto-submit on focus.</td>
-				</tr>
-				<tr>
-					<td><strong>3.2.2 On Input</strong><br>Input does not initiate context change.</td>
-					<td><span class="level-badge">A</span></td>
-					<td>No auto-submit on selection change without warning.</td>
-				</tr>
-				<tr>
-					<td><strong>3.2.3 Consistent Navigation</strong><br>Navigation mechanisms repeated consistently.</td>
-					<td><span class="level-badge">AA</span></td>
-					<td>Keep Nav bar consistent.</td>
-				</tr>
-				<tr>
-					<td><strong>3.2.4 Consistent Identification</strong><br>Components with same functionality identified
-						consistently.</td>
-					<td><span class="level-badge">AA</span></td>
-					<td>Consistent iconography.</td>
-				</tr>
-				<tr>
-					<td><strong>3.3.1 Error Identification</strong><br>Input errors identified and described in text.</td>
-					<td><span class="level-badge">A</span></td>
-					<td>For search or forms.</td>
-				</tr>
-				<tr>
-					<td><strong>3.3.2 Labels or Instructions</strong><br>Labels or instructions provided when input required.</td>
-					<td><span class="level-badge">A</span></td>
-					<td>Form labels.</td>
-				</tr>
-				<tr>
-					<td><strong>3.3.3 Error Suggestion</strong><br>Suggestions for correction provided.</td>
-					<td><span class="level-badge">AA</span></td>
-					<td>N/A (Limited forms).</td>
-				</tr>
-				<tr>
-					<td><strong>3.3.4 Error Prevention (Legal, Financial, Data)</strong><br>Reversible, checked, or confirmed.
-					</td>
-					<td><span class="level-badge">AA</span></td>
-					<td>N/A</td>
-				</tr>
-			</tbody>
-		</table>
-		<h3>4. Robust</h3>
-		<p>Content must be robust enough that it can be interpreted by a wide variety of user agents, including assistive
-			technologies.</p>
-		<table>
-			<thead>
-				<tr>
-					<th style="width: 35%;">Success Criterion</th>
-					<th style="width: 10%;">Level</th>
-					<th style="width: 55%;">Notes for q5.js</th>
-				</tr>
-			</thead>
-			<tbody>
-				<tr>
-					<td><strong>4.1.1 Parsing</strong><br>Elements utilize complete start and end tags, nested properly, unique
-						IDs.</td>
-					<td><span class="level-badge">A</span></td>
-					<td>Valid HTML checking.</td>
-				</tr>
-				<tr>
-					<td><strong>4.1.2 Name, Role, Value</strong><br>Name/Role/Value programmatically determined for UI components.
-					</td>
-					<td><span class="level-badge">A</span></td>
-					<td>Ensure custom controls use ARIA if standard HTML insufficient.</td>
-				</tr>
-				<tr>
-					<td><strong>4.1.3 Status Messages</strong><br>Status messages programmatically determined without focus.</td>
-					<td><span class="level-badge">AA</span></td>
-					<td>Use aria-live for dynamic updates.</td>
-				</tr>
-			</tbody>
-		</table>
-	</main>
-	<footer>
-		<div
-			style="text-align: center; padding: 20px; opacity: 0.7; border-top: 1px solid var(--primary); margin-top: 50px;">
-			<p>q5js.org was created by the q5 team. Copyright 2024-2025.</p>
-		</div>
-	</footer>
-	<script src="home/theme.js"></script>
-</body>
-</html>