@fadhli_fajarsyah/accessibility-widget
Version:
A simple accessibility widget to adjust font size (A+, A-, Reset)
114 lines (97 loc) • 2.79 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Test Accessibility Widget</title>
<style>
html {
font-size: 16px;
}
body {
font-family: sans-serif;
line-height: 1.6;
padding: 40px;
}
a.link {
text-decoration: none;
color: blue;
}
.underline-links a {
text-decoration: underline;
}
.high-contrast {
background-color: black ;
color: yellow ;
}
.larger-font {
font-size: 1.25em;
}
.smaller-font {
font-size: 0.85em;
}
.reset-font {
font-size: 1em;
}
.accordion {
border: 1px solid #ccc;
border-radius: 5px;
margin-bottom: 1rem;
}
.accordion-header {
background: #f0f0f0;
padding: 1rem;
cursor: pointer;
font-size: 1.2rem;
}
.accordion-body {
padding: 1rem;
display: none;
border-top: 1px solid #ccc;
}
.accordion.open .accordion-body {
display: block;
}
.aa {
font-size: calc(1.25rem);
}
</style>
</head>
<body>
<button class="print-button" id="printButton">Cetak Halaman</button>
<div class="accordion" id="accessibilityAccordion">
<div class="accordion-header" id="accordionTitle">Hello World</div>
<div class="accordion-body">
<p>
Ini adalah paragraf untuk menguji fitur font size accessibility
widget.
</p>
<a href="#" class="link">Ini link tanpa underline awal</a>
</div>
</div>
<a href="#" class="link">Ini link tanpa underline awal</a>
<p class="aa">tess</p>
<script type="module">
import { initAccessibilityWidget } from "./dist/index.js";
window.addEventListener("DOMContentLoaded", () => {
initAccessibilityWidget();
// Accordion toggle behavior
const accordion = document.getElementById("accessibilityAccordion");
const header = document.getElementById("accordionTitle");
header.addEventListener("click", () => {
accordion.classList.toggle("open");
});
});
const printButton = document.getElementById("printButton");
printButton.addEventListener("click", () => {
window.print();
});
// Shortcut Ctrl+P / Cmd+P (untuk custom print)
window.addEventListener("keydown", (e) => {
if ((e.ctrlKey || e.metaKey) && e.key === "p") {
e.preventDefault();
window.print();
}
});
</script>
</body>
</html>