diff --git a/index.html b/index.html index ae14ad0..7ac3bc2 100644 --- a/index.html +++ b/index.html @@ -146,6 +146,19 @@ 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 { border-left: 3px solid var(--color-primary); } @@ -236,7 +249,6 @@ /* Interactive Elements */ .js-collapsible { - background: var(--color-danger); color: white; cursor: pointer; padding: 12px 16px; @@ -247,34 +259,31 @@ border-radius: var(--radius); margin-bottom: 1rem; width: 100%; - transition: all 0.2s ease; font-family: inherit; font-weight: 500; } - .js-collapsible:hover { - background: #c82333; - transform: translateY(-1px); - } - - .js-collapsible:focus { - outline: var(--focus-outline-danger); - outline-offset: var(--focus-offset); + .js-wrapper { + display: flex; + flex-direction: column-reverse; } .js-content { - padding: 0; display: none; background: var(--color-content-bg); border: 1px solid var(--color-border); border-radius: 0 0 var(--radius) var(--radius); margin-bottom: 1rem; - transition: all 0.2s ease; } .js-content.active { display: block; - padding: 16px; + padding: 0.5rem; + } + + .js-content.active + .js-collapsible { + border-radius: var(--radius) var(--radius) 0 0; + margin-bottom: 0; } details { @@ -349,6 +358,7 @@ } .js-modal-content { + margin: auto; background: var(--color-bg); padding: 2rem; border-radius: var(--radius); @@ -364,6 +374,7 @@ } dialog { + margin: auto; border: 1px solid var(--color-border); border-radius: var(--radius); padding: 2rem; @@ -371,7 +382,7 @@ color: var(--color-text); box-shadow: var(--shadow); max-width: 500px; - width: 90%; + width: 90vw; } dialog:focus { @@ -398,7 +409,7 @@ .form-group input, .form-group textarea, .form-group select { width: 100%; padding: 10px 12px; - border: 1px solid var(--color-border); + border: 2px solid var(--color-border); border-radius: var(--radius); font-size: 1rem; background: var(--color-bg); @@ -409,8 +420,8 @@ .form-group input:focus, .form-group textarea:focus, .form-group select:focus { outline: var(--focus-outline); - outline-offset: -2px; - border-color: var(--color-primary); + outline-offset: 2px; + border-color: var(--color-border); } .form-group input:invalid { @@ -640,8 +651,9 @@
-

🚀 Built-in HTML Components

-

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.

+

🚀 No more (JS) Drama

+

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.

@@ -655,18 +667,24 @@ ⚠️ Accessibility: Requires manual ARIA, keyboard nav, and screen reader support. - -
- Web accessibility ensures that websites work for people with disabilities. Custom implementations need careful attention to accessibility requirements. +
+
+ Web accessibility ensures that websites work for people with disabilities. Custom implementations need careful + attention to accessibility requirements. +
+
- -
- WCAG provides the framework for accessible web content. Following these guidelines ensures your content works for assistive technologies. +
+
+ WCAG provides the framework for accessible web content. Following these guidelines ensures your content works + for assistive technologies. +
+
@@ -686,24 +704,27 @@ 🎯 Built-in: ARIA support, keyboard navigation, screen reader compatibility work automatically.
-
+
What is Web Accessibility?
- 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.
-
+
Why WCAG Guidelines Matter
- 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.
-
+
Progressive Enhancement Benefits
- 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.
@@ -727,7 +748,8 @@

Custom Modal Implementation INVOLVED

- ⚠️ Requirements: Focus trapping, ESC handling, backdrop interaction, ARIA roles need custom development. + ⚠️ Requirements: Focus trapping, ESC handling, backdrop interaction, ARIA roles need custom + development.
@@ -735,7 +757,9 @@

Custom Modal Implementation

-

This modal requires custom JavaScript for focus management, keyboard handling, and ARIA attributes. While flexible, it needs careful implementation.

+

This modal requires custom JavaScript for focus management, keyboard handling, and ARIA attributes. While + flexible, it needs careful implementation.

+

All the text in the background can still be focused and the user does not get informed.

@@ -763,7 +787,8 @@

Native Dialog Element

-

This dialog provides built-in focus trapping, keyboard support, backdrop interaction, and ARIA semantics automatically.

+

This dialog provides built-in focus trapping, keyboard support, backdrop interaction, and ARIA semantics + automatically.

The browser handles the complexity for you.

@@ -894,15 +921,15 @@ 🎯 Built-in: Semantic element, native ARIA support, automatic screen reader announcements.
- 0% -

Native Progress: 0%

- - - 70%

Static Progress Example

+ 70% - Loading...

Indeterminate Progress (no value attribute)

+ Loading... + +

Native Progress: 0%

+ 0% +

✅ Native Progress Benefits:

@@ -924,7 +951,8 @@

Custom Date Picker LIBRARY

- ⚠️ Complexity: Keyboard navigation, screen reader support, date parsing, mobile UX need development. + ⚠️ Complexity: Keyboard navigation, screen reader support, date parsing, mobile UX need + development.
@@ -954,7 +982,8 @@

Native Date Inputs PLATFORM

- 🎯 Platform: Native keyboard navigation, screen reader support, platform-consistent UX, automatic validation. + 🎯 Platform: Native keyboard navigation, screen reader support, platform-consistent UX, + automatic validation.
@@ -992,7 +1021,8 @@

Custom Autocomplete FEATURED

- ⚠️ Requirements: Dropdown management, keyboard navigation, screen reader support, focus management. + ⚠️ Requirements: Dropdown management, keyboard navigation, screen reader support, focus + management.
@@ -1025,26 +1055,97 @@ + - - - + - - - + + + +
@@ -1066,19 +1167,53 @@
- - + + + + Enter your company's domain name without www or .com + + - - - - - + +
@@ -1096,7 +1231,8 @@

Embrace Built-in Web Components

-

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.

+

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.

The approach:

    @@ -1108,7 +1244,8 @@

    Build with the platform, not against it. Your users will thank you.

    - "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."
@@ -1133,7 +1270,7 @@ // Rest of existing JavaScript functions remain unchanged function toggleContent(id) { const content = document.getElementById(id); - content.style.display = content.style.display === 'none' ? 'block' : 'none'; + content.classList.toggle("active"); } function openJSModal() { @@ -1192,6 +1329,7 @@ // Alsatian cities (historically German-speaking) 'Strasbourg', 'Mulhouse', 'Colmar', 'Haguenau', 'Schiltigheim', 'Illkirch-Graffenstaden', 'Saint-Louis', 'Sélestat', 'Bischwiller', 'Saverne' ]; + function filterCities(value) { const results = document.getElementById('js-results'); if (!value) {