invisi/accessibility-widgets
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

BUG FIX: Refactor high contrast styles to exclude widget container for improved accessibility and isolation

Browse Source
This commit is contained in:
sinanisler
2025-12-21 23:40:30 +03:00
parent b02572e5fb
commit 9bb4a10da2
1 changed files with 26 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files
widget.js
+26 -14
View File
@@ -371,18 +371,18 @@ const widgetStyles = `
const pageStyles = ` const pageStyles = `
/* High Contrast Modes */ /* High Contrast Modes */
.snn-high-contrast-medium { .snn-high-contrast-medium {
filter: contrast(1.3) !important; filter: none !important;
} }
.snn-high-contrast-medium * { .snn-high-contrast-medium *:not(#snn-accessibility-widget-container):not(#snn-accessibility-widget-container *) {
filter: contrast(1.3) !important; filter: contrast(1.3) !important;
} }
.snn-high-contrast-high { .snn-high-contrast-high {
background-color: #000 !important; background-color: #000 !important;
color: #fff !important; color: #fff !important;
filter: contrast(1.5) !important; filter: none !important;
} }
.snn-high-contrast-high * { .snn-high-contrast-high *:not(#snn-accessibility-widget-container):not(#snn-accessibility-widget-container *) {
background-color: #000 !important; background-color: #000 !important;
color: #fff !important; color: #fff !important;
filter: contrast(1.5) !important; filter: contrast(1.5) !important;
@@ -391,9 +391,9 @@ const pageStyles = `
.snn-high-contrast-ultra { .snn-high-contrast-ultra {
background-color: #000 !important; background-color: #000 !important;
color: #ffff00 !important; color: #ffff00 !important;
filter: contrast(2.0) !important; filter: none !important;
} }
.snn-high-contrast-ultra * { .snn-high-contrast-ultra *:not(#snn-accessibility-widget-container):not(#snn-accessibility-widget-container *) {
background-color: #000 !important; background-color: #000 !important;
color: #ffff00 !important; color: #ffff00 !important;
filter: contrast(2.0) !important; filter: contrast(2.0) !important;
@@ -476,28 +476,40 @@ const pageStyles = `
/* Color Filters */ /* Color Filters */
.snn-filter-protanopia { .snn-filter-protanopia {
filter: none !important;
}
.snn-filter-protanopia body > *:not(#snn-accessibility-widget-container) {
filter: url('#protanopia-filter') !important; filter: url('#protanopia-filter') !important;
} }
.snn-filter-deuteranopia { .snn-filter-deuteranopia {
filter: none !important;
}
.snn-filter-deuteranopia body > *:not(#snn-accessibility-widget-container) {
filter: url('#deuteranopia-filter') !important; filter: url('#deuteranopia-filter') !important;
} }
.snn-filter-tritanopia { .snn-filter-tritanopia {
filter: none !important;
}
.snn-filter-tritanopia body > *:not(#snn-accessibility-widget-container) {
filter: url('#tritanopia-filter') !important; filter: url('#tritanopia-filter') !important;
} }
.snn-filter-grayscale { .snn-filter-grayscale {
filter: none !important;
}
.snn-filter-grayscale body > *:not(#snn-accessibility-widget-container) {
filter: grayscale(100%) !important; filter: grayscale(100%) !important;
}
/* Reduced Motion */
.snn-reduced-motion * {
animation: none !important;
transition: none !important;
}
.snn-reduced-motion *::before,
.snn-reduced-motion *::after { .snn-reduced-motion *::after {
animation: none !important; animation: none !important;
transition: none !important; transition: none !important;
} }
/* Protect widget container from page styles */
#snn-accessibility-widget-container,
#snn-accessibility-widget-container * {
filter: none !important;
background-color: initial !important;
color: initial !important;
}
`; `;
// =========================================== // ===========================================