dhbw/html-over-js
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: update examples, remove nonsense, extend data lists and align modals

Browse Source
This commit is contained in:
Michael Czechowski
2025-06-01 18:35:35 +02:00
parent ef47e5ca90
commit b76fcc515e
1 changed files with 217 additions and 79 deletions
Download Patch File Download Diff File Expand all files Collapse all files

296
index.html
View File

@@ -146,6 +146,19 @@
content: '⚠️ '; content: '⚠️ ';
} }
.bad button {
background: var(--color-danger);
}
.bad button:hover {
background: var(--color-danger);
}
.bad button:focus {
outline: var(--focus-outline-danger);
outline-offset: var(--focus-offset);
}
.good { .good {
border-left: 3px solid var(--color-primary); border-left: 3px solid var(--color-primary);
} }
@@ -236,7 +249,6 @@
/* Interactive Elements */ /* Interactive Elements */
.js-collapsible { .js-collapsible {
background: var(--color-danger);
color: white; color: white;
cursor: pointer; cursor: pointer;
padding: 12px 16px; padding: 12px 16px;
@@ -247,34 +259,31 @@
border-radius: var(--radius); border-radius: var(--radius);
margin-bottom: 1rem; margin-bottom: 1rem;
width: 100%; width: 100%;
transition: all 0.2s ease;
font-family: inherit; font-family: inherit;
font-weight: 500; font-weight: 500;
} }
.js-collapsible:hover { .js-wrapper {
background: #c82333; display: flex;
transform: translateY(-1px); flex-direction: column-reverse;
}
.js-collapsible:focus {
outline: var(--focus-outline-danger);
outline-offset: var(--focus-offset);
} }
.js-content { .js-content {
padding: 0;
display: none; display: none;
background: var(--color-content-bg); background: var(--color-content-bg);
border: 1px solid var(--color-border); border: 1px solid var(--color-border);
border-radius: 0 0 var(--radius) var(--radius); border-radius: 0 0 var(--radius) var(--radius);
margin-bottom: 1rem; margin-bottom: 1rem;
transition: all 0.2s ease;
} }
.js-content.active { .js-content.active {
display: block; display: block;
padding: 16px; padding: 0.5rem;
}
.js-content.active + .js-collapsible {
border-radius: var(--radius) var(--radius) 0 0;
margin-bottom: 0;
} }
details { details {
@@ -349,6 +358,7 @@
} }
.js-modal-content { .js-modal-content {
margin: auto;
background: var(--color-bg); background: var(--color-bg);
padding: 2rem; padding: 2rem;
border-radius: var(--radius); border-radius: var(--radius);
@@ -364,6 +374,7 @@
} }
dialog { dialog {
margin: auto;
border: 1px solid var(--color-border); border: 1px solid var(--color-border);
border-radius: var(--radius); border-radius: var(--radius);
padding: 2rem; padding: 2rem;
@@ -371,7 +382,7 @@
color: var(--color-text); color: var(--color-text);
box-shadow: var(--shadow); box-shadow: var(--shadow);
max-width: 500px; max-width: 500px;
width: 90%; width: 90vw;
} }
dialog:focus { dialog:focus {
@@ -398,7 +409,7 @@
.form-group input, .form-group textarea, .form-group select { .form-group input, .form-group textarea, .form-group select {
width: 100%; width: 100%;
padding: 10px 12px; padding: 10px 12px;
border: 1px solid var(--color-border); border: 2px solid var(--color-border);
border-radius: var(--radius); border-radius: var(--radius);
font-size: 1rem; font-size: 1rem;
background: var(--color-bg); background: var(--color-bg);
@@ -409,8 +420,8 @@
.form-group input:focus, .form-group textarea:focus, .form-group select:focus { .form-group input:focus, .form-group textarea:focus, .form-group select:focus {
outline: var(--focus-outline); outline: var(--focus-outline);
outline-offset: -2px; outline-offset: 2px;
border-color: var(--color-primary); border-color: var(--color-border);
} }
.form-group input:invalid { .form-group input:invalid {
@@ -640,8 +651,9 @@
<body class="search_plugin_added"> <body class="search_plugin_added">
<div class="hero"> <div class="hero">
<h1>🚀 Built-in HTML Components</h1> <h1>🚀 No more (JS) Drama</h1>
<p class="subtitle">Discover the power of semantic HTML and native browser features. This guide shows you how to build accessible, performant interfaces using the web platform's built-in components with progressive enhancement.</p> <p class="subtitle">Discover the power of semantic HTML and native browser features. This guide shows you how to build
accessible, performant interfaces using the web platform's built-in components with progressive enhancement.</p>
</div> </div>
<!-- COLLAPSIBLES --> <!-- COLLAPSIBLES -->
@@ -655,18 +667,24 @@
<strong>⚠️ Accessibility:</strong> Requires manual ARIA, keyboard nav, and screen reader support. <strong>⚠️ Accessibility:</strong> Requires manual ARIA, keyboard nav, and screen reader support.
</div> </div>
<button class="js-collapsible" onclick="toggleContent('content1')"> <div class="js-wrapper">
What is Web Accessibility? <div class="js-content" id="content1">
</button> Web accessibility ensures that websites work for people with disabilities. Custom implementations need careful
<div class="js-content" id="content1"> attention to accessibility requirements.
Web accessibility ensures that websites work for people with disabilities. Custom implementations need careful attention to accessibility requirements. </div>
<button class="js-collapsible" onclick="toggleContent('content1')">
What is Web Accessibility?
</button>
</div> </div>
<button class="js-collapsible" onclick="toggleContent('content2')"> <div class="js-wrapper">
Why WCAG Guidelines Matter <div class="js-content" id="content2">
</button> WCAG provides the framework for accessible web content. Following these guidelines ensures your content works
<div class="js-content" id="content2"> for assistive technologies.
WCAG provides the framework for accessible web content. Following these guidelines ensures your content works for assistive technologies. </div>
<button class="js-collapsible" onclick="toggleContent('content2')">
Why WCAG Guidelines Matter
</button>
</div> </div>
<div class="pros-cons"> <div class="pros-cons">
@@ -686,24 +704,27 @@
<strong>🎯 Built-in:</strong> ARIA support, keyboard navigation, screen reader compatibility work automatically. <strong>🎯 Built-in:</strong> ARIA support, keyboard navigation, screen reader compatibility work automatically.
</div> </div>
<details> <details name="a11y">
<summary>What is Web Accessibility?</summary> <summary>What is Web Accessibility?</summary>
<div> <div>
Web accessibility ensures that websites work for people with disabilities. Native HTML elements provide accessibility features automatically, following established web standards. Web accessibility ensures that websites work for people with disabilities. Native HTML elements provide
accessibility features automatically, following established web standards.
</div> </div>
</details> </details>
<details> <details name="a11y">
<summary>Why WCAG Guidelines Matter</summary> <summary>Why WCAG Guidelines Matter</summary>
<div> <div>
WCAG provides the framework for accessible web content. Native elements follow these guidelines by default, reducing development complexity. WCAG provides the framework for accessible web content. Native elements follow these guidelines by default,
reducing development complexity.
</div> </div>
</details> </details>
<details> <details name="a11y">
<summary>Progressive Enhancement Benefits</summary> <summary>Progressive Enhancement Benefits</summary>
<div> <div>
Start with functional HTML, enhance with CSS, add JavaScript where needed. This ensures your content works across all devices and abilities. Start with functional HTML, enhance with CSS, add JavaScript where needed. This ensures your content works
across all devices and abilities.
</div> </div>
</details> </details>
@@ -727,7 +748,8 @@
<h3>Custom Modal Implementation <span class="perf-indicator perf-slow">INVOLVED</span></h3> <h3>Custom Modal Implementation <span class="perf-indicator perf-slow">INVOLVED</span></h3>
<div class="accessibility-note"> <div class="accessibility-note">
<strong>⚠️ Requirements:</strong> Focus trapping, ESC handling, backdrop interaction, ARIA roles need custom development. <strong>⚠️ Requirements:</strong> Focus trapping, ESC handling, backdrop interaction, ARIA roles need custom
development.
</div> </div>
<button onclick="openJSModal()">Open Custom Modal</button> <button onclick="openJSModal()">Open Custom Modal</button>
@@ -735,7 +757,9 @@
<div class="js-modal-overlay" id="jsModal"> <div class="js-modal-overlay" id="jsModal">
<div class="js-modal-content"> <div class="js-modal-content">
<h4>Custom Modal Implementation</h4> <h4>Custom Modal Implementation</h4>
<p>This modal requires custom JavaScript for focus management, keyboard handling, and ARIA attributes. While flexible, it needs careful implementation.</p> <p>This modal requires custom JavaScript for focus management, keyboard handling, and ARIA attributes. While
flexible, it needs careful implementation.</p>
<p>All the text in the background can still be focused and the user does not get informed.</p>
<button onclick="closeJSModal()">Close Modal</button> <button onclick="closeJSModal()">Close Modal</button>
</div> </div>
</div> </div>
@@ -763,7 +787,8 @@
<dialog id="nativeDialog"> <dialog id="nativeDialog">
<h4>Native Dialog Element</h4> <h4>Native Dialog Element</h4>
<p>This dialog provides built-in focus trapping, keyboard support, backdrop interaction, and ARIA semantics automatically.</p> <p>This dialog provides built-in focus trapping, keyboard support, backdrop interaction, and ARIA semantics
automatically.</p>
<p><strong>The browser handles the complexity for you.</strong></p> <p><strong>The browser handles the complexity for you.</strong></p>
<button onclick="document.getElementById('nativeDialog').close()"> <button onclick="document.getElementById('nativeDialog').close()">
Close Dialog Close Dialog
@@ -868,12 +893,14 @@
<h3>Custom Progress Implementation <span class="perf-indicator perf-slow">STYLED</span></h3> <h3>Custom Progress Implementation <span class="perf-indicator perf-slow">STYLED</span></h3>
<div class="accessibility-note"> <div class="accessibility-note">
<strong>⚠️ Requirements:</strong> Semantic meaning, screen reader announcements, ARIA labels need custom implementation. <strong>⚠️ Requirements:</strong> Semantic meaning, screen reader announcements, ARIA labels need custom
implementation.
</div> </div>
<div class="js-progress-container"> <div class="js-progress-container">
<div class="js-progress-bar" id="jsProgress"></div> <div class="js-progress-bar" id="jsProgress"></div>
</div> </div>
<p>Custom Progress: <span id="jsProgressText">0%</span></p> <p>Custom Progress: <span id="jsProgressText">0%</span></p>
<button onclick="startJSProgress()">Start Progress Demo</button> <button onclick="startJSProgress()">Start Progress Demo</button>
@@ -894,15 +921,15 @@
<strong>🎯 Built-in:</strong> Semantic element, native ARIA support, automatic screen reader announcements. <strong>🎯 Built-in:</strong> Semantic element, native ARIA support, automatic screen reader announcements.
</div> </div>
<progress id="nativeProgress" max="100" value="0">0%</progress>
<p>Native Progress: <span id="nativeProgressText">0%</span></p>
<button onclick="startNativeProgress()">Start Progress Demo</button>
<progress max="100" value="70">70%</progress>
<p>Static Progress Example</p> <p>Static Progress Example</p>
<progress max="100" value="70">70%</progress>
<progress>Loading...</progress>
<p>Indeterminate Progress (no value attribute)</p> <p>Indeterminate Progress (no value attribute)</p>
<progress>Loading...</progress>
<p>Native Progress: <span id="nativeProgressText">0%</span></p>
<progress id="nativeProgress" max="100" value="0">0%</progress>
<button onclick="startNativeProgress()">Start Progress Demo</button>
<div class="pros-cons"> <div class="pros-cons">
<h4 class="pros">✅ Native Progress Benefits:</h4> <h4 class="pros">✅ Native Progress Benefits:</h4>
@@ -924,7 +951,8 @@
<h3>Custom Date Picker <span class="perf-indicator perf-slow">LIBRARY</span></h3> <h3>Custom Date Picker <span class="perf-indicator perf-slow">LIBRARY</span></h3>
<div class="accessibility-note"> <div class="accessibility-note">
<strong>⚠️ Complexity:</strong> Keyboard navigation, screen reader support, date parsing, mobile UX need development. <strong>⚠️ Complexity:</strong> Keyboard navigation, screen reader support, date parsing, mobile UX need
development.
</div> </div>
<div class="form-group"> <div class="form-group">
@@ -954,7 +982,8 @@
<h3>Native Date Inputs <span class="perf-indicator perf-fast">PLATFORM</span></h3> <h3>Native Date Inputs <span class="perf-indicator perf-fast">PLATFORM</span></h3>
<div class="accessibility-note"> <div class="accessibility-note">
<strong>🎯 Platform:</strong> Native keyboard navigation, screen reader support, platform-consistent UX, automatic validation. <strong>🎯 Platform:</strong> Native keyboard navigation, screen reader support, platform-consistent UX,
automatic validation.
</div> </div>
<div class="form-group"> <div class="form-group">
@@ -992,7 +1021,8 @@
<h3>Custom Autocomplete <span class="perf-indicator perf-slow">FEATURED</span></h3> <h3>Custom Autocomplete <span class="perf-indicator perf-slow">FEATURED</span></h3>
<div class="accessibility-note"> <div class="accessibility-note">
<strong>⚠️ Requirements:</strong> Dropdown management, keyboard navigation, screen reader support, focus management. <strong>⚠️ Requirements:</strong> Dropdown management, keyboard navigation, screen reader support, focus
management.
</div> </div>
<div class="form-group"> <div class="form-group">
@@ -1025,26 +1055,97 @@
<label for="native-city">City Search (Native)</label> <label for="native-city">City Search (Native)</label>
<input id="native-city" list="cities" placeholder="Type or select a city..." type="text"> <input id="native-city" list="cities" placeholder="Type or select a city..." type="text">
<datalist id="cities"> <datalist id="cities">
<!-- Original core cities with proper names -->
<option value="Berlin"> <option value="Berlin">
</option> <option value="Wien">
<option value="Vienna"> <option value="Zürich">
</option> <option value="München">
<option value="Zurich">
</option>
<option value="Munich">
</option>
<option value="Hamburg"> <option value="Hamburg">
</option>
<option value="Salzburg"> <option value="Salzburg">
</option> <option value="Genève">
<option value="Geneva"> <option value="Frankfurt am Main">
</option> <option value="Köln">
<option value="Frankfurt">
</option>
<option value="Cologne">
</option>
<option value="Stuttgart"> <option value="Stuttgart">
</option>
<!-- Extended German cities -->
<option value="Dresden">
<option value="Leipzig">
<option value="Düsseldorf">
<option value="Dortmund">
<option value="Essen">
<option value="Bremen">
<option value="Hannover">
<option value="Nürnberg">
<option value="Duisburg">
<option value="Bochum">
<option value="Wuppertal">
<option value="Bielefeld">
<option value="Bonn">
<option value="Münster">
<option value="Karlsruhe">
<option value="Mannheim">
<option value="Augsburg">
<option value="Wiesbaden">
<option value="Gelsenkirchen">
<option value="Mönchengladbach">
<option value="Braunschweig">
<option value="Chemnitz">
<option value="Kiel">
<option value="Aachen">
<option value="Halle (Saale)">
<option value="Magdeburg">
<option value="Freiburg im Breisgau">
<option value="Krefeld">
<option value="Lübeck">
<option value="Oberhausen">
<!-- Austrian cities -->
<option value="Graz">
<option value="Linz">
<option value="Innsbruck">
<option value="Klagenfurt">
<option value="Villach">
<option value="Wels">
<option value="Sankt Pölten">
<option value="Dornbirn">
<option value="Steyr">
<option value="Wiener Neustadt">
<!-- Swiss cities -->
<option value="Basel">
<option value="Bern">
<option value="Lausanne">
<option value="Winterthur">
<option value="Luzern">
<option value="St. Gallen">
<option value="Lugano">
<option value="Biel/Bienne">
<option value="Thun">
<option value="Köniz">
<!-- South Tyrolean cities -->
<option value="Bozen">
<option value="Meran">
<option value="Brixen">
<option value="Bruneck">
<option value="Sterzing">
<option value="Schlanders">
<option value="Eppan">
<option value="Leifers">
<option value="Klausen">
<option value="Neumarkt">
<!-- Alsatian cities -->
<option value="Strasbourg">
<option value="Mulhouse">
<option value="Colmar">
<option value="Haguenau">
<option value="Schiltigheim">
<option value="Illkirch-Graffenstaden">
<option value="Saint-Louis">
<option value="Sélestat">
<option value="Bischwiller">
<option value="Saverne">
</datalist> </datalist>
</div> </div>
@@ -1066,19 +1167,53 @@
</div> </div>
<div class="form-group"> <div class="form-group">
<label for="native-company">Company Domain</label> <label for="company-domain">Company Domain</label>
<input id="native-company" list="company-domains" placeholder="company-name" type="text"> <input
aria-describedby="company-domain-hint"
autocomplete="organization"
id="company-domain"
list="company-domains"
placeholder="e.g., siemens, volkswagen"
type="text"
>
<small class="form-text text-muted" id="company-domain-hint">
Enter your company's domain name without www or .com
</small>
<datalist id="company-domains"> <datalist id="company-domains">
<option value="siemens"> <!-- German automotive & industrial giants -->
</option> <option label="Volkswagen AG" value="volkswagen">
<option value="volkswagen"> <option label="Mercedes-Benz Group" value="mercedes-benz">
</option> <option label="BMW Group" value="bmw">
<option value="bmw"> <option label="Audi AG" value="audi">
</option> <option label="Porsche AG" value="porsche">
<option value="mercedes-benz">
</option> <!-- Industrial conglomerates -->
<option value="bosch"> <option label="Siemens AG" value="siemens">
</option> <option label="Robert Bosch GmbH" value="bosch">
<option label="thyssenkrupp AG" value="thyssenkrupp">
<option label="Continental AG" value="continental">
<option label="Schaeffler Group" value="schaeffler">
<!-- Tech & Software -->
<option label="SAP SE" value="sap">
<option label="Infineon Technologies" value="infineon">
<option label="Software AG" value="software-ag">
<!-- Energy & Utilities -->
<option label="E.ON SE" value="eon">
<option label="RWE AG" value="rwe">
<option label="Wintershall Dea" value="wintershall-dea">
<!-- Chemicals & Pharma -->
<option label="BASF SE" value="basf">
<option label="Bayer AG" value="bayer">
<option label="Merck KGaA" value="merck">
<!-- Retail & Consumer -->
<option label="Adidas AG" value="adidas">
<option label="Puma SE" value="puma">
<option label="Metro AG" value="metro">
</datalist> </datalist>
</div> </div>
@@ -1096,7 +1231,8 @@
<div class="summary-box"> <div class="summary-box">
<h3>Embrace Built-in Web Components</h3> <h3>Embrace Built-in Web Components</h3>
<p>Native HTML elements provide rich functionality with built-in accessibility, keyboard navigation, and consistent user experience. These elements represent years of browser engineering and web standards development.</p> <p>Native HTML elements provide rich functionality with built-in accessibility, keyboard navigation, and consistent
user experience. These elements represent years of browser engineering and web standards development.</p>
<p><strong>The approach:</strong></p> <p><strong>The approach:</strong></p>
<ul style="text-align: left; max-width: 600px; margin: 2rem auto;"> <ul style="text-align: left; max-width: 600px; margin: 2rem auto;">
@@ -1108,7 +1244,8 @@
<p>Build with the platform, not against it. <strong>Your users will thank you.</strong></p> <p>Build with the platform, not against it. <strong>Your users will thank you.</strong></p>
<div class="zen-quote"> <div class="zen-quote">
"The most elegant code leverages existing solutions. Native HTML elements provide decades of accessibility research and browser optimization - use them as your foundation." "The most elegant code leverages existing solutions. Native HTML elements provide decades of accessibility research
and browser optimization - use them as your foundation."
</div> </div>
</div> </div>
@@ -1133,7 +1270,7 @@
// Rest of existing JavaScript functions remain unchanged // Rest of existing JavaScript functions remain unchanged
function toggleContent(id) { function toggleContent(id) {
const content = document.getElementById(id); const content = document.getElementById(id);
content.style.display = content.style.display === 'none' ? 'block' : 'none'; content.classList.toggle("active");
} }
function openJSModal() { function openJSModal() {
@@ -1192,6 +1329,7 @@
// Alsatian cities (historically German-speaking) // Alsatian cities (historically German-speaking)
'Strasbourg', 'Mulhouse', 'Colmar', 'Haguenau', 'Schiltigheim', 'Illkirch-Graffenstaden', 'Saint-Louis', 'Sélestat', 'Bischwiller', 'Saverne' 'Strasbourg', 'Mulhouse', 'Colmar', 'Haguenau', 'Schiltigheim', 'Illkirch-Graffenstaden', 'Saint-Louis', 'Sélestat', 'Bischwiller', 'Saverne'
]; ];
function filterCities(value) { function filterCities(value) {
const results = document.getElementById('js-results'); const results = document.getElementById('js-results');
if (!value) { if (!value) {