feat: Add accessible status indicators setting

src/localization/en.json

@@ -848,6 +848,7 @@
                     "show_notification_icon_dot": "Show Tray Notification Dot",
                     "striped_data_table_mode": "Striped Table Mode",
                     "toggle_pointer_on_hover": "Force pointer on hover",
+                    "accessible_status_indicators": "Accessible Status Indicators",
                     "table_density": "Table Density",
                     "table_density_standard": "Standard",
                     "table_density_comfortable": "Comfortable",

src/stores/settings/appearance.js

@@ -116,6 +116,7 @@ export const useAppearanceSettingsStore = defineStore(
 
         const isDataTableStriped = ref(false);
         const showPointerOnHover = ref(false);
+        const accessibleStatusIndicators = ref(false);
         const showNewDashboardButton = ref(true);
         const tableLimitsDialog = ref({
             visible: false,
@@ -176,6 +177,7 @@ export const useAppearanceSettingsStore = defineStore(
                 navIsCollapsedConfig,
                 dataTableStripedConfig,
                 showPointerOnHoverConfig,
+                accessibleStatusIndicatorsConfig,
                 showNewDashboardButtonConfig,
                 appFontFamilyConfig,
                 customFontFamilyConfig,
@@ -246,6 +248,7 @@ export const useAppearanceSettingsStore = defineStore(
                 configRepository.getBool('VRCX_navIsCollapsed', false),
                 configRepository.getBool('VRCX_dataTableStriped', false),
                 configRepository.getBool('VRCX_showPointerOnHover', false),
+                configRepository.getBool('VRCX_accessibleStatusIndicators', false),
                 configRepository.getBool('VRCX_showNewDashboardButton', true),
                 configRepository.getString(
                     'VRCX_fontFamily',
@@ -362,9 +365,11 @@ export const useAppearanceSettingsStore = defineStore(
             isNavCollapsed.value = navIsCollapsedConfig;
             isDataTableStriped.value = dataTableStripedConfig;
             showPointerOnHover.value = showPointerOnHoverConfig;
+            accessibleStatusIndicators.value = accessibleStatusIndicatorsConfig;
             showNewDashboardButton.value = showNewDashboardButtonConfig;
 
             applyPointerHoverClass();
+            applyAccessibleStatusClass();
 
             await configRepository.remove('VRCX_navWidth');
 
@@ -936,6 +941,30 @@ export const useAppearanceSettingsStore = defineStore(
             applyPointerHoverClass();
         }
 
+        /**
+         *
+         */
+        function applyAccessibleStatusClass() {
+            const classList = document.documentElement.classList;
+            classList.remove('accessible-status-indicators');
+
+            if (accessibleStatusIndicators.value) {
+                classList.add('accessible-status-indicators');
+            }
+        }
+
+        /**
+         *
+         */
+        function toggleAccessibleStatusIndicators() {
+            accessibleStatusIndicators.value = !accessibleStatusIndicators.value;
+            configRepository.setBool(
+                'VRCX_accessibleStatusIndicators',
+                accessibleStatusIndicators.value
+            );
+            applyAccessibleStatusClass();
+        }
+
         /**
          *
          */
@@ -1181,6 +1210,7 @@ export const useAppearanceSettingsStore = defineStore(
             isNavCollapsed,
             isDataTableStriped,
             showPointerOnHover,
+            accessibleStatusIndicators,
             showNewDashboardButton,
             tableLimitsDialog,
             TABLE_MAX_SIZE_MIN,
@@ -1216,6 +1246,7 @@ export const useAppearanceSettingsStore = defineStore(
             setRandomUserColours,
             toggleStripedDataTable,
             togglePointerOnHover,
+            toggleAccessibleStatusIndicators,
             setShowNewDashboardButton,
             setTableDensity,
             setTrustColor,

src/styles/status-icon.css

@@ -23,16 +23,25 @@
 
 .status-icon.joinme::after {
     background: var(--status-joinme);
-    mask-image: url(/images/masks/joinme.svg);
 }
 
 .status-icon.askme::after {
     background: var(--status-askme);
-    mask-image: url(/images/masks/askme.svg);
 }
 
 .status-icon.busy::after {
     background: var(--status-busy);
+}
+
+.accessible-status-indicators .status-icon.joinme::after {
+    mask-image: url(/images/masks/joinme.svg);
+}
+
+.accessible-status-indicators .status-icon.askme::after {
+    mask-image: url(/images/masks/askme.svg);
+}
+
+.accessible-status-indicators .status-icon.busy::after {
     mask-image: url(/images/masks/busy.svg);
 }
 
@@ -96,16 +105,25 @@ i.x-user-status.online {
 
 i.x-user-status.joinme {
     background: var(--status-joinme);
-    mask-image: url(/images/masks/joinme.svg);
 }
 
 i.x-user-status.askme {
     background: var(--status-askme);
-    mask-image: url(/images/masks/askme.svg);
 }
 
 i.x-user-status.busy {
     background: var(--status-busy);
+}
+
+.accessible-status-indicators i.x-user-status.joinme {
+    mask-image: url(/images/masks/joinme.svg);
+}
+
+.accessible-status-indicators i.x-user-status.askme {
+    mask-image: url(/images/masks/askme.svg);
+}
+
+.accessible-status-indicators i.x-user-status.busy {
     mask-image: url(/images/masks/busy.svg);
 }
 

src/views/Settings/components/Tabs/InterfaceTab.vue

@@ -132,6 +132,10 @@
             <SettingsItem :label="t('view.settings.appearance.appearance.toggle_pointer_on_hover')">
                 <Switch :model-value="showPointerOnHover" @update:modelValue="togglePointerOnHover" />
             </SettingsItem>
+
+            <SettingsItem :label="t('view.settings.appearance.appearance.accessible_status_indicators')">
+                <Switch :model-value="accessibleStatusIndicators" @update:modelValue="toggleAccessibleStatusIndicators" />
+            </SettingsItem>
         </SettingsGroup>
 
         <SettingsGroup :title="t('view.settings.interface.navigation.header')">
@@ -385,6 +389,7 @@
         tablePageSizes,
         isDataTableStriped,
         showPointerOnHover,
+        accessibleStatusIndicators,
         showNewDashboardButton
     } = storeToRefs(appearanceSettingsStore);
 
@@ -408,6 +413,7 @@
         setTablePageSizes,
         toggleStripedDataTable,
         togglePointerOnHover,
+        toggleAccessibleStatusIndicators,
         setShowNewDashboardButton,
         setAppFontFamily,
         setCustomFontFamily,