pacnpal/thrillwiki_django_no_react
1
1
Fork 0
mirror of https://github.com/pacnpal/thrillwiki_django_no_react.git synced 2025-12-24 21:51:09 -05:00
Code Issues Packages Projects Releases Wiki Activity

Add secret management guide, client-side performance monitoring, and search accessibility enhancements

Browse Source 
- Introduced a comprehensive Secret Management Guide detailing best practices, secret classification, development setup, production management, rotation procedures, and emergency protocols.
- Implemented a client-side performance monitoring script to track various metrics including page load performance, paint metrics, layout shifts, and memory usage.
- Enhanced search accessibility with keyboard navigation support for search results, ensuring compliance with WCAG standards and improving user experience.
This commit is contained in:
pacnpal
2025-12-23 16:41:42 -05:00
parent ae31e889d7
commit edcd8f2076
155 changed files with 22046 additions and 4645 deletions
Download Patch File Download Diff File Expand all files Collapse all files

118
static/css/design-tokens.css
View File

@@ -518,6 +518,44 @@
}
}
/* =================================================================
Accessibility - Forced Colors Mode (Windows High Contrast)
================================================================= */
@media (forced-colors: active) {
/* Ensure interactive elements have visible outlines */
button,
a,
input,
select,
textarea,
[role="button"],
[role="link"],
[tabindex="0"] {
outline: 2px solid ButtonText;
}
/* Enhanced focus indicators for forced colors mode */
button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[role="button"]:focus-visible,
[role="menuitem"]:focus-visible,
[role="option"]:focus-visible,
[tabindex="0"]:focus-visible {
outline: 3px solid Highlight;
outline-offset: 2px;
}
/* Ensure disabled states are visible */
[disabled],
[aria-disabled="true"] {
outline-style: dashed;
}
}
/* =================================================================
Accessibility - Screen Reader Utilities
================================================================= */
@@ -1011,6 +1049,22 @@
outline-offset: -2px;
}
/* Enhanced focus ring for complex components */
.focus-ring-thick:focus-visible {
outline: 4px solid var(--color-primary);
outline-offset: 2px;
}
/* Focus visible for custom interactive elements (ARIA roles) */
[role="button"]:focus-visible,
[role="menuitem"]:focus-visible,
[role="option"]:focus-visible,
[role="tab"]:focus-visible,
[role="listitem"]:focus-visible {
outline: 2px solid var(--color-primary);
outline-offset: 2px;
}
/* Skip link styling */
.skip-link {
position: absolute;
@@ -1126,4 +1180,68 @@
opacity: 0.3;
}
}
/* =================================================================
Lazy Loading Image Utilities
================================================================= */
/* Base lazy image styles */
img.lazy {
opacity: 0;
transition: opacity var(--duration-300) var(--ease-out);
}
img.lazy-loading {
opacity: 0.5;
filter: blur(5px);
transition: opacity var(--duration-300) var(--ease-out),
filter var(--duration-300) var(--ease-out);
}
img.lazy-loaded {
opacity: 1;
filter: none;
}
img.lazy-error {
opacity: 0.3;
filter: grayscale(100%);
}
/* Placeholder styling for lazy images */
img[data-src] {
background-color: var(--color-muted);
background-image: linear-gradient(
90deg,
var(--color-muted) 0%,
var(--color-secondary-200) 50%,
var(--color-muted) 100%
);
background-size: 200% 100%;
}
@media (prefers-reduced-motion: no-preference) {
img[data-src]:not(.lazy-loaded) {
animation: skeleton-loading 1.5s ease-in-out infinite;
}
}
@keyframes skeleton-loading {
0% {
background-position: 200% 0;
}
100% {
background-position: -200% 0;
}
}
/* Blur-up placeholder effect */
.blur-up {
filter: blur(10px);
transition: filter var(--duration-500) var(--ease-out);
}
.blur-up.lazy-loaded {
filter: blur(0);
}
}