From 4c1238952d37b69bb6265504252d275d988660f3 Mon Sep 17 00:00:00 2001 From: Jan-Hendrik Willms Date: Mon, 9 Mar 2026 10:58:43 +0100 Subject: use data attributes instead of css classes --- lib/include/html_head.inc.php | 19 ++++++++++--------- resources/assets/stylesheets/studip.scss | 4 ++-- resources/vue/apps/SystemNotificationManager.vue | 6 ++++-- templates/layouts/base.php | 19 ++++++++++--------- 4 files changed, 26 insertions(+), 22 deletions(-) diff --git a/lib/include/html_head.inc.php b/lib/include/html_head.inc.php index 7138bd7..bd79b8e 100644 --- a/lib/include/html_head.inc.php +++ b/lib/include/html_head.inc.php @@ -29,17 +29,18 @@ $getJsonApiSchemas = function () { ); }; -$lang_attr = str_replace('_', '-', $_SESSION['_language']); - -$html_classes = ['no-js']; -if (User::findCurrent()?->getConfiguration()->getValue('A11Y_USER_REDUCE_ANIMATIONS') === 'yes') { - $html_classes[] = 'a11y-reduce-animations'; -} elseif (User::findCurrent()?->getConfiguration()->getValue('A11Y_USER_REDUCE_ANIMATIONS') === 'no') { - $html_classes[] = 'a11y-no-reduce-animations'; -} +$htmlAttributes = HTMLAttributes::from([ + 'lang' => str_replace('_', '-', $_SESSION['_language']), + 'class' => 'no-js', + 'data--a11y-motion' => match (User::findCurrent()?->getConfiguration()->getValue('A11Y_USER_REDUCE_ANIMATIONS')) { + 'yes' => 'reduce', + 'no' => 'allow', + default => 'no-preference', + } +]); ?> - +> diff --git a/resources/assets/stylesheets/studip.scss b/resources/assets/stylesheets/studip.scss index c64813e..33ec53b 100644 --- a/resources/assets/stylesheets/studip.scss +++ b/resources/assets/stylesheets/studip.scss @@ -973,12 +973,12 @@ input.allow-plaintext-toggle { vue Transition:fade-down --end-- */ -html.a11y-reduce-animations { +html[data--a11y-motion="reduce"] { --transition-duration: 0s; --transition-duration-slow: 0s; --transition-duration-superslow: 0s; } -html.a11y-no-reduce-animations { +html[data--a11y-motion="allow"] { --transition-duration: #{$transition-duration}; --transition-duration-slow: #{$transition-duration-slow}; --transition-duration-superslow: #{$transition-duration-superslow}; diff --git a/resources/vue/apps/SystemNotificationManager.vue b/resources/vue/apps/SystemNotificationManager.vue index 6330303..f5e3370 100644 --- a/resources/vue/apps/SystemNotificationManager.vue +++ b/resources/vue/apps/SystemNotificationManager.vue @@ -46,10 +46,12 @@ export default { }, computed: { autohide() { - return !document.querySelector('html').classList.contains('a11y-reduce-animations') + const a11yMotionDataSetting = document.querySelector('html').dataset.A11yMotion; + + return a11yMotionDataSetting !== 'reduce' && ( !window.matchMedia('(prefers-reduced-motion: reduce)').matches - || document.querySelector('html').classList.contains('a11y-no-reduce-animations') + || a11yMotionDataSetting === 'allow' ); } }, diff --git a/templates/layouts/base.php b/templates/layouts/base.php index 79d0cf2..f3e0ae3 100644 --- a/templates/layouts/base.php +++ b/templates/layouts/base.php @@ -23,17 +23,18 @@ $getJsonApiSchemas = function () { ); }; -$lang_attr = str_replace('_', '-', $_SESSION['_language']); - -$html_classes = ['no-js']; -if (User::findCurrent()?->getConfiguration()->getValue('A11Y_USER_REDUCE_ANIMATIONS') === 'yes') { - $html_classes[] = 'a11y-reduce-animations'; -} elseif (User::findCurrent()?->getConfiguration()->getValue('A11Y_USER_REDUCE_ANIMATIONS') === 'no') { - $html_classes[] = 'a11y-no-reduce-animations'; -} +$htmlAttributes = HTMLAttributes::from([ + 'lang' => str_replace('_', '-', $_SESSION['_language']), + 'class' => 'no-js', + 'data--a11y-motion' => match (User::findCurrent()?->getConfiguration()->getValue('A11Y_USER_REDUCE_ANIMATIONS')) { + 'yes' => 'reduce', + 'no' => 'allow', + default => 'no-preference', + } +]); ?> <!DOCTYPE html> -<html class="<?= implode(' ', $html_classes) ?>" lang="<?= htmlReady($lang_attr) ?>"> +<html <?= $htmlAttributes ?>> <head> <meta charset="utf-8"> <title data-original="<?= htmlReady(PageLayout::getTitle()) ?>"> -- cgit v1.0