feat: A11y fixes (#2148)

apps/client/src/components/settings/settings-sidebar.tsx

@@ -230,32 +230,6 @@ export default function SettingsSidebar() {
           }
 
           const isDisabled = isItemDisabled(item);
-          const linkElement = (
-            <Link
-              onMouseEnter={!isDisabled ? prefetchHandler : undefined}
-              className={classes.link}
-              data-active={active.startsWith(item.path) || undefined}
-              data-disabled={isDisabled || undefined}
-              key={item.label}
-              to={isDisabled ? "#" : item.path}
-              onClick={(e) => {
-                if (isDisabled) {
-                  e.preventDefault();
-                  return;
-                }
-                if (mobileSidebarOpened) {
-                  toggleMobileSidebar();
-                }
-              }}
-              style={{
-                opacity: isDisabled ? 0.5 : 1,
-                cursor: isDisabled ? "not-allowed" : "pointer",
-              }}
-            >
-              <item.icon className={classes.linkIcon} stroke={2} />
-              <span>{t(item.label)}</span>
-            </Link>
-          );
 
           if (isDisabled) {
             return (
@@ -265,12 +239,41 @@ export default function SettingsSidebar() {
                 position="right"
                 withArrow
               >
-                {linkElement}
+                <span
+                  className={classes.link}
+                  data-disabled
+                  role="link"
+                  aria-disabled="true"
+                  tabIndex={0}
+                  style={{
+                    opacity: 0.5,
+                    cursor: "not-allowed",
+                  }}
+                >
+                  <item.icon className={classes.linkIcon} stroke={2} />
+                  <span>{t(item.label)}</span>
+                </span>
               </Tooltip>
             );
           }
 
-          return linkElement;
+          return (
+            <Link
+              onMouseEnter={prefetchHandler}
+              className={classes.link}
+              data-active={active.startsWith(item.path) || undefined}
+              key={item.label}
+              to={item.path}
+              onClick={() => {
+                if (mobileSidebarOpened) {
+                  toggleMobileSidebar();
+                }
+              }}
+            >
+              <item.icon className={classes.linkIcon} stroke={2} />
+              <span>{t(item.label)}</span>
+            </Link>
+          );
         })}
       </div>
     );
@@ -288,7 +291,7 @@ export default function SettingsSidebar() {
           }}
           variant="transparent"
           c="gray"
-          aria-label="Back"
+          aria-label={t("Back")}
         >
           <IconArrowLeft stroke={2} />
         </ActionIcon>