Accessibility tweaks ...

jasonvarga · jasonvarga · commit 77174ec4c09e · 2025-07-22T17:49:00.000-04:00
- Preference stems off a single toggle.
- Got rid of the accessibility tab now that there's only a single field.
- Renamed the preference to strict_accessibility. If there's ever a new thing we need or want to adhere to, we can reuse the preference.
- Contrast class doesn't need to worry about the preference changing.
- Contrast class should update the data property, not a class.
- Data property is added to the body tag without js too.
diff --git a/resources/js/bootstrap/statamic.js b/resources/js/bootstrap/statamic.js
@@ -185,7 +185,7 @@ export default {
 
         Object.assign(this.$app.config.globalProperties, {
             $theme: new Theme(this.initialConfig.user?.theme),
-            $contrast: new Contrast(this.initialConfig.user?.preferences?.contrast),
+            $contrast: new Contrast(this.initialConfig.user?.preferences?.strict_accessibility),
         });
 
         Object.assign(this.$app.config.globalProperties, {
diff --git a/resources/js/components/Contrast.js b/resources/js/components/Contrast.js
@@ -5,37 +5,16 @@ export default class Contrast {
     #contrast = ref(null);
 
     constructor(preference) {
-        this.#preference = ref(preference ?? 'default');
-        this.#watchPreferences();
+        this.#preference = ref(preference ? 'increased' : 'auto');
+        this.#setContrast(this.#preference.value);
         this.#watchContrast();
         this.#listenForColorSchemeChange();
     }
 
-    get preference() {
-        return this.#preference;
-    }
-
-    set preference(value) {
-        this.#preference.value = value;
-    }
-
-    #watchPreferences() {
-        watch(
-            this.#preference,
-            (preference) => {
-                this.#setContrast(preference);
-                this.#savePreference(preference);
-            },
-            { immediate: true },
-        );
-    }
-
     #watchContrast() {
         watch(
             this.#contrast,
-            (contrast) => {
-                document.documentElement.classList.toggle('contrast-increased', contrast === 'increased');
-            },
+            (contrast) => document.body.setAttribute('data-contrast', contrast),
             { immediate: true },
         );
     }
@@ -52,14 +31,4 @@ export default class Contrast {
             if (this.#preference.value === 'auto') this.#contrast.value = e.matches ? 'increased' : 'default';
         });
     }
-
-    #savePreference(preference) {
-        if (preference === 'default') {
-            Statamic.$preferences.remove('contrast');
-            localStorage.removeItem('statamic.contrast');
-        } else {
-            Statamic.$preferences.set('contrast', preference);
-            localStorage.setItem('statamic.contrast', preference);
-        }
-    }
-} 
+}
diff --git a/resources/views/layout.blade.php b/resources/views/layout.blade.php
@@ -7,7 +7,10 @@
         @include('statamic::partials.head')
     </head>
 
-    <body class="bg-gray-800 font-sans leading-normal text-gray-900 dark:text-white">
+    <body
+        class="bg-gray-800 font-sans leading-normal text-gray-900 dark:text-white"
+        @if ($user->getPreference('strict_accessibility')) data-contrast="increased" @endif
+    >
         <config-provider>
             <div id="statamic" v-cloak>
                 @include('statamic::partials.session-expiry')
diff --git a/resources/views/partials/head.blade.php b/resources/views/partials/head.blade.php
@@ -27,8 +27,7 @@
         if (theme === 'auto' && window.matchMedia('(prefers-color-scheme: dark)').matches) theme = 'dark';
         if (theme === 'dark') document.documentElement.classList.add('dark');
 
-        let contrast = {!! ($userContrast = $user?->preferences()['contrast'] ?? null) ? "'" . $userContrast . "'" : 'null' !!};
-        if (!contrast) contrast = localStorage.getItem('statamic.contrast') ?? 'default';
+        let contrast = {!! $user?->getPreference('strict_accessibility') ? "'increased'" : "'auto'" !!};
         if (contrast === 'auto' && window.matchMedia('(prefers-contrast: more)').matches) contrast = 'increased';
         if (contrast === 'increased') document.documentElement.setAttribute('data-contrast', 'increased');
     })();
diff --git a/src/Preferences/CorePreferences.php b/src/Preferences/CorePreferences.php
@@ -25,24 +25,11 @@ public function boot()
             'instructions' => __('statamic::messages.preference_start_page_instructions'),
         ]);
 
-        Preference::tab('accessibility', __('Accessibility'), function () {
-            Preference::register('wcag_conformity', [
-                'type' => 'toggle',
-                'display' => __('Strict WCAG 2.2 Conformity'),
-                'instructions' => __('statamic::messages.preference_wcag'),
-            ]);
-            Preference::register('contrast', [
-                'type' => 'button_group',
-                'display' => __('Increase Contrast'),
-                'instructions' => __('statamic::messages.preference_contrast'),
-                'default' => 'default',
-                'options' => [
-                    'default' => __('Default'),
-                    'increased' => __('Increased'),
-                    'auto' => __('System'),
-                ],
-            ]);
-        });
+        Preference::register('strict_accessibility', [
+            'type' => 'toggle',
+            'display' => __('Strict WCAG 2.2 Conformity'),
+            'instructions' => __('statamic::messages.preference_wcag'),
+        ]);
     }
 
     private function localeOptions(): array
