fix(a11y): WCAG 2.1 AA fixes (#2219)

apps/client/src/features/user/components/change-email.tsx

@@ -36,7 +36,13 @@ export default function ChangeEmail() {
       </Button>
       */}
 
-      <Modal opened={opened} onClose={close} title={t("Change email")} centered>
+      <Modal
+        opened={opened}
+        onClose={close}
+        title={t("Change email")}
+        centered
+        closeButtonProps={{ "aria-label": t("Close") }}
+      >
         <Text mb="md">
           {t(
             "To change your email, you have to enter your password and new email.",
@@ -80,6 +86,11 @@ function ChangeEmailForm() {
         placeholder={t("Enter your password")}
         variant="filled"
         mb="md"
+        visibilityToggleButtonProps={{
+          "aria-label": t("Toggle password visibility"),
+          "aria-hidden": false,
+          tabIndex: 0,
+        }}
         {...form.getInputProps("password")}
       />
 

apps/client/src/features/user/components/change-password.tsx

@@ -95,6 +95,11 @@ function ChangePasswordForm({ onClose }: ChangePasswordFormProps) {
         variant="filled"
         mb="md"
         data-autofocus
+        visibilityToggleButtonProps={{
+          "aria-label": t("Toggle password visibility"),
+          "aria-hidden": false,
+          tabIndex: 0,
+        }}
         {...form.getInputProps("oldPassword")}
       />
 
@@ -103,6 +108,11 @@ function ChangePasswordForm({ onClose }: ChangePasswordFormProps) {
         placeholder={t("Enter your new password")}
         variant="filled"
         mb="md"
+        visibilityToggleButtonProps={{
+          "aria-label": t("Toggle password visibility"),
+          "aria-hidden": false,
+          tabIndex: 0,
+        }}
         {...form.getInputProps("newPassword")}
       />
 

apps/client/src/features/user/components/notification-pref.tsx

@@ -3,7 +3,7 @@ import { updateUser } from "@/features/user/services/user-service.ts";
 import { IUser, IUserSettings } from "@/features/user/types/user.types.ts";
 import { Switch, Text, Title, Stack } from "@mantine/core";
 import { useAtom } from "jotai";
-import React, { useState } from "react";
+import React, { useId, useState } from "react";
 import { useTranslation } from "react-i18next";
 import {
   ResponsiveSettingsRow,
@@ -64,6 +64,8 @@ function NotificationToggle({
   description: string;
 }) {
   const { t } = useTranslation();
+  const switchId = useId();
+  const descriptionId = useId();
   const [user, setUser] = useAtom(userAtom);
   const [checked, setChecked] = useState(
     user.settings?.notifications?.[settingKey] !== false,
@@ -83,14 +85,21 @@ function NotificationToggle({
   return (
     <ResponsiveSettingsRow>
       <ResponsiveSettingsContent>
-        <Text size="md">{t(label)}</Text>
-        <Text size="sm" c="dimmed">
+        <Text component="label" htmlFor={switchId} size="md" style={{ cursor: "pointer" }}>
+          {t(label)}
+        </Text>
+        <Text id={descriptionId} size="sm" c="dimmed">
           {t(description)}
         </Text>
       </ResponsiveSettingsContent>
 
       <ResponsiveSettingsControl>
-        <Switch checked={checked} onChange={handleChange} />
+        <Switch
+          id={switchId}
+          checked={checked}
+          onChange={handleChange}
+          aria-describedby={descriptionId}
+        />
       </ResponsiveSettingsControl>
     </ResponsiveSettingsRow>
   );
@@ -101,7 +110,7 @@ export default function NotificationPref() {
 
   return (
     <Stack gap="xs">
-      <Title order={5}>{t("Email notifications")}</Title>
+      <Title order={2} size="h5">{t("Email notifications")}</Title>
 
       {notificationItems.map((item) => (
         <NotificationToggle