🚸 Improve accessibility (#980)

* 🚸 Improve accessibility

* 🌐 Add missing translations

src/components/Settings/Customization/Accessibility/AccessibilitySettings.tsx

@@ -0,0 +1,80 @@
+import { Alert, Stack, Switch } from '@mantine/core';
+import { IconInfoCircle } from '@tabler/icons-react';
+import { BaseSyntheticEvent } from 'react';
+import { useConfigStore } from '../../../../config/store';
+import { useConfigContext } from '../../../../config/provider';
+import { useTranslation } from 'react-i18next';
+
+export const AccessibilitySettings = () => {
+  const { t } = useTranslation('settings/customization/accessibility');
+  const { updateConfig } = useConfigStore();
+  const { config, name: configName } = useConfigContext();
+
+  return (
+    <Stack>
+      <Switch
+        label={t('disablePulse.label')}
+        description={t('disablePulse.description')}
+        defaultChecked={config?.settings.customization.accessibility?.disablePingPulse ?? false}
+        onChange={(value: BaseSyntheticEvent) => {
+          if (!configName) {
+            return;
+          }
+
+          updateConfig(
+            configName,
+            (previousConfig) => ({
+              ...previousConfig,
+              settings: {
+                ...previousConfig.settings,
+                customization: {
+                  ...previousConfig.settings.customization,
+                  accessibility: {
+                    ...previousConfig.settings.customization.accessibility,
+                    disablePingPulse: value.target.checked,
+                  },
+                },
+              },
+            }),
+            false,
+            true
+          );
+        }}
+      />
+
+      <Switch
+        label={t('replaceIconsWithDots.label')}
+        description={t('replaceIconsWithDots.description')}
+        defaultChecked={config?.settings.customization.accessibility?.disablePingPulse ?? false}
+        onChange={(value: BaseSyntheticEvent) => {
+          if (!configName) {
+            return;
+          }
+
+          updateConfig(
+            configName,
+            (previousConfig) => ({
+              ...previousConfig,
+              settings: {
+                ...previousConfig.settings,
+                customization: {
+                  ...previousConfig.settings.customization,
+                  accessibility: {
+                    ...previousConfig.settings.customization.accessibility,
+                    replacePingDotsWithIcons: value.target.checked,
+                  },
+                },
+              },
+            }),
+            false,
+            true
+          );
+        }}
+      />
+
+      <Alert icon={<IconInfoCircle size="1rem" />} color="blue">
+        {t('alert')}
+      </Alert>
+    </Stack>
+  );
+};

src/components/Settings/Customization/CustomizationAccordeon.tsx

@@ -1,5 +1,5 @@
 import { Accordion, Checkbox, Grid, Group, Stack, Text } from '@mantine/core';
-import { IconBrush, IconChartCandle, IconCode, IconDragDrop, IconLayout } from '@tabler/icons-react';
+import { IconAccessible, IconBrush, IconChartCandle, IconCode, IconDragDrop, IconLayout } from '@tabler/icons-react';
 import { i18n, useTranslation } from 'next-i18next';
 import { ReactNode } from 'react';
 import { GridstackConfiguration } from './Layout/GridstackConfiguration';
@@ -13,6 +13,7 @@ import { ColorSelector } from './Theme/ColorSelector';
 import { CustomCssChanger } from './Theme/CustomCssChanger';
 import { DashboardTilesOpacitySelector } from './Theme/OpacitySelector';
 import { ShadeSelector } from './Theme/ShadeSelector';
+import { AccessibilitySettings } from './Accessibility/AccessibilitySettings';
 
 export const CustomizationSettingsAccordeon = () => {
   const items = getItems().map((item) => (
@@ -70,6 +71,13 @@ const getItems = () => {
       description: t('accordeon.gridstack.description'),
       content: <GridstackConfiguration />,
     },
+    {
+      id: 'accessibility',
+      image: <IconAccessible />,
+      label: t('accordeon.accessibility.name'),
+      description: t('accordeon.accessibility.description'),
+      content: <AccessibilitySettings />,
+    },
     {
       id: 'page_metadata',
       image: <IconChartCandle />,

src/components/Settings/Customization/Layout/LayoutSelector.tsx

@@ -159,7 +159,7 @@ export const LayoutSelector = () => {
           />
           <Checkbox
             label={t('layout.enableping')}
-            checked={ping}
+            checked={enabledPing}
             onChange={(ev) => handleChange('enabledPing', ev, setPing)}
           />
         </Stack>