chore: update dependencies and improve accessibility in various compo…

…nents

apps/web/src/api/routes/v1_project_data.ts

@@ -1,9 +1,9 @@
 import { zValidator } from "@hono/zod-validator";
 import { ABBY_WINDOW_KEY, type AbbyDataResponse } from "@tryabby/core";
+import type { FlagRuleSet } from "@tryabby/core/schema";
 import { type Context, Hono } from "hono";
 import { cors } from "hono/cors";
 import { endTime, startTime, timing } from "hono/timing";
-import type { FlagRuleSet } from "@tryabby/core/schema";
 import { transformFlagValue } from "lib/flags";
 import { ConfigCache } from "server/common/config-cache";
 import { prisma } from "server/db/client";

apps/web/src/components/AddFeatureFlagModal.tsx

@@ -69,8 +69,11 @@ export function ChangeFlagForm({
   return (
     <div className="flex flex-col space-y-5">
       <div>
-        <label className="mb-1 block text-pink-50">Name</label>
+        <label className="mb-1 block text-pink-50" htmlFor="name">
+          Name
+        </label>
         <Input
+          name="name"
           ref={inputRef}
           type="text"
           defaultValue={initialValues.name}
@@ -83,6 +86,7 @@ export function ChangeFlagForm({
       </div>
       {isRemoteConfig && (
         <div>
+          {/* biome-ignore lint/a11y/noLabelWithoutControl: <explanation> */}
           <label className="mb-1 block text-pink-50">Type</label>
           <RadioSelect
             isDisabled={!canChangeType}
@@ -118,6 +122,7 @@ export function ChangeFlagForm({
         </div>
       )}
       <div>
+        {/* biome-ignore lint/a11y/noLabelWithoutControl: <explanation> */}
         <label className="mb-1 block text-pink-50">Value</label>
         {state.type === "BOOLEAN" && (
           <Toggle

apps/web/src/components/Avatar.tsx

@@ -18,6 +18,7 @@ type Props = {
 
 export const Avatar = ({ imageUrl, userName, className, ...props }: Props) => (
   <RadixAvatar.Root
+    // biome-ignore lint/a11y/useSemanticElements: <explanation>
     role="button"
     className={twMerge(
       "inline-flex h-[45px] w-[45px] select-none items-center justify-center overflow-hidden rounded-full bg-gray-600 align-middle",

apps/web/src/components/CodeSnippet.tsx

@@ -63,8 +63,10 @@ export function BaseCodeSnippet(
         <div className="mt-2 flex w-full overflow-x-auto bg-gray-800">
           {Object.entries(INTEGRATIONS).map(([key, { icon: Icon, name }]) => (
             // biome-ignore lint/a11y/useKeyWithClickEvents:>
+            // biome-ignore lint/a11y/useFocusableInteractive: <explanation>
             <div
               key={name}
+              // biome-ignore lint/a11y/useSemanticElements: <explanation>
               role="button"
               onClick={() => setCurrentIntegration(key as Integrations)}
               className={clsx(

apps/web/src/components/CreateAPIKeyModal.tsx

@@ -41,8 +41,11 @@ export const CreateAPIKeyModal = ({ onClose, isOpen }: Props) => {
         }
       }}
     >
-      <label className="mb-1 block text-pink-50">Name</label>
+      <label className="mb-1 block text-pink-50" htmlFor="name">
+        Name
+      </label>
       <Input
+        name="name"
         ref={inputRef}
         type="text"
         value={name}

apps/web/src/components/CreateEnvironmentModal.tsx

@@ -59,8 +59,11 @@ export const CreateEnvironmentModal = ({
         }
       }}
     >
-      <label className="mb-1 block text-pink-50">Name</label>
+      <label className="mb-1 block text-pink-50" htmlFor="name">
+        Name
+      </label>
       <Input
+        name="name"
         ref={inputRef}
         value={name}
         onChange={(e) => setName(e.target.value)}

apps/web/src/components/EventCounter.tsx

@@ -1,5 +1,4 @@
-import {} from "react";
-import { motion, AnimatePresence } from "framer-motion";
+import { AnimatePresence, motion } from "framer-motion";
 import { trpc } from "utils/trpc";
 
 export function EventCounter() {

apps/web/src/components/FeatureFlag.tsx

@@ -5,20 +5,20 @@ import { P, match } from "ts-pattern";
 
 import type { FeatureFlagHistory, FeatureFlagType } from "@prisma/client";
 import { Tooltip, TooltipContent, TooltipTrigger } from "components/Tooltip";
+import { Button } from "components/ui/button";
+import { Label } from "components/ui/label";
 import relativeTime from "dayjs/plugin/relativeTime";
+import { getEnvironmentStyle } from "lib/environment-styles";
 import { cn } from "lib/utils";
-import { useState, useMemo } from "react";
+import { Settings } from "lucide-react";
+import { useRouter } from "next/router";
+import { useMemo, useState } from "react";
 import { toast } from "react-hot-toast";
 import { type RouterOutputs, trpc } from "utils/trpc";
 import { ChangeFlagForm, type FlagFormValues } from "./AddFeatureFlagModal";
 import { Avatar } from "./Avatar";
 import { LoadingSpinner } from "./LoadingSpinner";
 import { Modal } from "./Modal";
-import { useRouter } from "next/router";
-import { Button } from "components/ui/button";
-import { Settings } from "lucide-react";
-import { Label } from "components/ui/label";
-import { getEnvironmentStyle } from "lib/environment-styles";
 
 dayjs.extend(relativeTime);
 

apps/web/src/components/FlagPage.tsx

@@ -12,27 +12,27 @@ import { Editor } from "components/Editor";
 import { FeatureFlag } from "components/FeatureFlag";
 import { Modal } from "components/Modal";
 import {} from "components/Tooltip";
-import { Input } from "components/ui/input";
-import { Card, CardContent, CardHeader, CardTitle } from "components/ui/card";
 import { Button } from "components/ui/button";
+import { Card, CardContent, CardHeader, CardTitle } from "components/ui/card";
+import { EnvironmentBadge } from "components/ui/environment-badge";
+import { Input } from "components/ui/input";
 import Fuse from "fuse.js";
 import { useProjectId } from "lib/hooks/useProjectId";
 import {
+  ChevronRight,
   EditIcon,
   FileEditIcon,
   Search,
   Sparkle,
   TrashIcon,
-  ChevronRight,
 } from "lucide-react";
+import { useRouter } from "next/router";
 import { useEffect, useMemo, useRef, useState } from "react";
 import { toast } from "react-hot-toast";
 import { AiOutlinePlus } from "react-icons/ai";
 import { BsThreeDotsVertical } from "react-icons/bs";
 import type { appRouter } from "server/trpc/router/_app";
 import { trpc } from "utils/trpc";
-import { useRouter } from "next/router";
-import { EnvironmentBadge } from "components/ui/environment-badge";
 
 const EditTitleModal = ({
   flagId,

apps/web/src/components/Progress.tsx

@@ -8,6 +8,7 @@ type Props = {
 export function Progress({ currentValue, maxValue }: Props) {
   const currentValuePercentage = Math.min((currentValue / maxValue) * 100, 100);
   return (
+    // biome-ignore lint/a11y/useFocusableInteractive: <explanation>
     <div
       className="relative h-6 w-full rounded-full bg-background"
       role="progressbar"

apps/web/src/components/ProjectSwitcher.tsx

@@ -83,6 +83,7 @@ export default function ProjectSwitcher({ className }: ProjectSwitcherProps) {
         <PopoverTrigger asChild>
           <Button
             variant="outline"
+            // biome-ignore lint/a11y/useSemanticElements: <explanation>
             role="combobox"
             aria-expanded={open}
             aria-label="Select a team"

apps/web/src/components/Test/CreateTestSection.tsx

@@ -134,8 +134,9 @@ export function CreateTestSection({
       <div className="grid grid-cols-1">
         <Card title="Settings" className="bg-gray-800/60">
           <form className="mr-auto flex flex-col space-y-4">
-            <label>Name:</label>
+            <label htmlFor="testName">Name:</label>
             <input
+              name="testName"
               value={testName}
               onChange={(e) => setTestName(e.target.value)}
               className="flex items-center space-x-4 rounded-md bg-gray-700 p-2 pr-4 focus:outline focus:outline-blue-400"

apps/web/src/components/flags/FlagRuleEditor.tsx

@@ -1,24 +1,24 @@
+import type { FeatureFlagType } from "@prisma/client";
+import type { FlagRule, SubFlagRule, ValidatorType } from "@tryabby/core";
 import {
   type FlagRuleSet,
   getDisplayNameForOperator,
   getOperatorsForType,
 } from "@tryabby/core/schema";
+import { JSONEditor } from "components/JSONEditor";
+import { Button } from "components/ui/button";
+import { Input } from "components/ui/input";
+import { Label } from "components/ui/label";
 import {
   Select,
   SelectContent,
   SelectItem,
   SelectTrigger,
   SelectValue,
 } from "components/ui/select";
-import { Input } from "components/ui/input";
-import { Button } from "components/ui/button";
 import { Switch } from "components/ui/switch";
-import type { FlagRule, SubFlagRule, ValidatorType } from "@tryabby/core";
-import type { FeatureFlagType } from "@prisma/client";
-import { match } from "ts-pattern";
-import { Label } from "components/ui/label";
-import { JSONEditor } from "components/JSONEditor";
 import { ArrowRight, Trash } from "lucide-react";
+import { match } from "ts-pattern";
 
 export function ThenValueInput({
   flagType,

apps/web/src/components/flags/RuleSetEditor.tsx

@@ -1,21 +1,21 @@
 "use client";
 
-import { useState } from "react";
+import type { FeatureFlagType } from "@prisma/client";
+import type { ValidatorType } from "@tryabby/core";
+import type { FlagRuleSet } from "@tryabby/core/schema";
 import { Button } from "components/ui/button";
 import { Card, CardContent, CardHeader, CardTitle } from "components/ui/card";
-import type { FlagRuleSet } from "@tryabby/core/schema";
-import { FlagRuleEditor, ThenValueInput } from "./FlagRuleEditor";
-import type { ValidatorType } from "@tryabby/core";
-import type { FeatureFlagType } from "@prisma/client";
+import { Label } from "components/ui/label";
 import {
   Select,
   SelectContent,
   SelectItem,
   SelectTrigger,
   SelectValue,
 } from "components/ui/select";
-import { Label } from "components/ui/label";
 import { ArrowRight, Plus, Trash } from "lucide-react";
+import { useState } from "react";
+import { FlagRuleEditor, ThenValueInput } from "./FlagRuleEditor";
 
 export function FlagRulesEditor({
   userSchema,

apps/web/src/components/settings/Integrations.tsx

@@ -75,6 +75,7 @@ export function Integrations({ projectId }: { projectId: string | undefined }) {
                       <PopoverTrigger asChild>
                         <Button
                           variant="outline"
+                          // biome-ignore lint/a11y/useSemanticElements: <explanation>
                           role="combobox"
                           aria-expanded={open}
                           className="w-[350px] justify-between"

apps/web/src/components/ui/environment-badge.tsx

@@ -1,5 +1,5 @@
-import { cn } from "lib/utils";
 import { getEnvironmentStyle } from "lib/environment-styles";
+import { cn } from "lib/utils";
 
 interface EnvironmentBadgeProps {
   name: string;

apps/web/src/pages/_app.tsx

@@ -6,13 +6,13 @@ import type { AppProps, AppType } from "next/app";
 import { Toaster } from "react-hot-toast";
 import { trpc } from "../utils/trpc";
 
+import { OpenPanelComponent } from "@openpanel/nextjs";
 import { TooltipProvider } from "components/Tooltip";
 import { env } from "env/client.mjs";
 import { AbbyDevtools, AbbyProvider, withAbby } from "lib/abby";
 import type { NextPage } from "next";
 import { useRouter } from "next/router";
 import type { ReactElement, ReactNode } from "react";
-import { OpenPanelComponent } from "@openpanel/nextjs";
 import "@fontsource/martian-mono/600.css";
 
 import "../styles/shadcn.css";

apps/web/src/pages/index.tsx

@@ -4,6 +4,7 @@ import { createAbby } from "@tryabby/next";
 import { BaseCodeSnippet } from "components/CodeSnippet";
 import { DevtoolsArrow } from "components/DevtoolsArrow";
 import { Divider } from "components/Divider";
+import { EventCounter } from "components/EventCounter";
 import { Feature } from "components/Feature";
 import { Integrations } from "components/Integrations";
 import { MarketingLayout } from "components/MarketingLayout";
@@ -29,7 +30,6 @@ import { twMerge } from "tailwind-merge";
 import { generateCodeSnippets } from "utils/snippets";
 import abbyScreenshot from "../../public/screenshot.png";
 import type { NextPageWithLayout } from "./_app";
-import { EventCounter } from "components/EventCounter";
 
 const { useAbby, AbbyProvider, useFeatureFlag, __abby__, withDevtools } =
   createAbby({

apps/web/src/pages/projects/[projectId]/environments.tsx

@@ -258,14 +258,12 @@ const EnvironmentPage: NextPageWithLayout = () => {
         </section>
       </div>
       {activeEnvironment && (
-        <>
-          <DeleteEnvironmentModal
-            environment={activeEnvironment}
-            projectId={projectId}
-            isOpen={activeEnvironmentInfo?.action === "delete"}
-            onClose={() => setActiveEnvironmentInfo(null)}
-          />
-        </>
+        <DeleteEnvironmentModal
+          environment={activeEnvironment}
+          projectId={projectId}
+          isOpen={activeEnvironmentInfo?.action === "delete"}
+          onClose={() => setActiveEnvironmentInfo(null)}
+        />
       )}
     </>
   );

apps/web/src/pages/projects/[projectId]/flags/[flagId].tsx

@@ -1,22 +1,22 @@
 import type { ValidatorType } from "@tryabby/core";
+import type { FlagRuleSet } from "@tryabby/core/schema";
+import { Avatar } from "components/Avatar";
 import { DashboardHeader } from "components/DashboardHeader";
-import { FlagRulesEditor } from "components/flags/RuleSetEditor";
+import { getHistoryEventDescription } from "components/FeatureFlag";
 import { Layout } from "components/Layout";
-import type { FlagRuleSet } from "@tryabby/core/schema";
-import { useRouter } from "next/router";
-import type { NextPageWithLayout } from "pages/_app";
-import { trpc } from "utils/trpc";
-import toast from "react-hot-toast";
+import { FlagRulesEditor } from "components/flags/RuleSetEditor";
+import { Button } from "components/ui/button";
 import { Card, CardContent, CardHeader, CardTitle } from "components/ui/card";
-import { getHistoryEventDescription } from "components/FeatureFlag";
+import { Label } from "components/ui/label";
 import dayjs from "dayjs";
 import relativeTime from "dayjs/plugin/relativeTime";
-import { Avatar } from "components/Avatar";
-import { Label } from "components/ui/label";
 import { getEnvironmentStyle } from "lib/environment-styles";
 import { cn } from "lib/utils";
 import { AlertCircle, Plus } from "lucide-react";
-import { Button } from "components/ui/button";
+import { useRouter } from "next/router";
+import type { NextPageWithLayout } from "pages/_app";
+import toast from "react-hot-toast";
+import { trpc } from "utils/trpc";
 
 dayjs.extend(relativeTime);
 

apps/web/src/pages/projects/[projectId]/settings.tsx

@@ -150,10 +150,11 @@ const SettingsPage: NextPageWithLayout = () => {
               </DashboardSectionTitle>
               <div className="flex flex-col space-y-4">
                 <div className="flex">
-                  <label className="flex flex-col">
+                  <label className="flex flex-col" htmlFor="projectName">
                     Name
                     <div className="col flex space-x-5">
                       <Input
+                        name="projectName"
                         ref={projectNameRef}
                         className="w-52 px-3 py-2"
                         type="text"

apps/web/src/pages/welcome.tsx

@@ -143,9 +143,13 @@ function Step1() {
         </CardDescription>
       </CardHeader>
       <CardContent>
-        <label>
+        <label htmlFor="name">
           <span>Name</span>
-          <Input value={name} onChange={(e) => setName(e.target.value)} />
+          <Input
+            name="name"
+            value={name}
+            onChange={(e) => setName(e.target.value)}
+          />
         </label>
       </CardContent>
     </motion.div>

apps/web/src/server/services/EventService.ts

@@ -1,18 +1,18 @@
+import crypto from "node:crypto";
 import {
   getEventsByTestIdForAllTime,
   getEventsByTestIdForDay,
   getEventsByTestIdForLast30Days,
 } from "@prisma/client/sql";
 import type { AbbyEvent, AbbyEventType } from "@tryabby/core";
+import dayjs from "dayjs";
+import timezone from "dayjs/plugin/timezone";
+import utc from "dayjs/plugin/utc";
+import { env } from "env/server.mjs";
 import { TIME_INTERVAL, isSpecialTimeInterval } from "lib/events";
 import { PLANS, type PlanName, getLimitByPlan } from "server/common/plans";
 import { prisma } from "server/db/client";
 import { RequestCache } from "./RequestCache";
-import crypto from "node:crypto";
-import { env } from "env/server.mjs";
-import dayjs from "dayjs";
-import timezone from "dayjs/plugin/timezone";
-import utc from "dayjs/plugin/utc";
 
 dayjs.extend(utc);
 dayjs.extend(timezone);