fix: resolve moderate/serious accessibility audit issues

Author: Sc-MuthulaAlwis

src/app/(registry)/page.tsx

@@ -345,6 +345,7 @@ export default function Home() {
             alias:
           </p>
           <CodeBlock
+            ariaLabel="Test setup App.jsx example"
             code={`import { Button } from "@/components/ui/button"
 
 export default function MyComponent() {

src/app/(registry)/rtl/page.tsx

@@ -242,6 +242,7 @@ export default function RTLPage() {
           </p>
           <CodeBlock
             code={UseDirectionCode}
+            ariaLabel="useDirection hook code"
             lang="tsx"
             showLineNumbers={true}
             className="bg-body-bg border"
@@ -310,6 +311,7 @@ export default function RTLPage() {
             <div>
               <h3 className="font-semibold text-xl mb-2">Basic Usage</h3>
               <CodeBlock
+                ariaLabel="Basic RTL DirectionProvider example"
                 code={`import { Direction } from "radix-ui";
 
 export default function App() {
@@ -330,6 +332,7 @@ export default function App() {
                 Using the Hook in Components
               </h3>
               <CodeBlock
+                ariaLabel="Sidebar RTL useDirection example"
                 code={`import { Direction } from "radix-ui";
 import { cn } from "@/lib/utils";
 
@@ -361,6 +364,7 @@ export function Sidebar() {
                 Code blocks should always remain LTR for readability:
               </p>
               <CodeBlock
+                ariaLabel="Keep code blocks LTR example"
                 code={`export function CodeBlock({ code }: { code: string }) {
   return (
     <div dir="ltr">

src/app/content/ui/combobox/combobox-multiple.tsx

@@ -37,9 +37,7 @@ export default function ComboboxMultipleDemo() {
           {(values: readonly string[]) => (
             <React.Fragment>
               {values.map((value: string) => (
-                <ComboboxChip key={value} aria-label="Remove chip">
-                  {value}
-                </ComboboxChip>
+                <ComboboxChip key={value}>{value}</ComboboxChip>
               ))}
               <ComboboxChipsInput aria-label="Combobox chips input" />
             </React.Fragment>

src/app/content/ui/popover/popover.tsx

@@ -24,25 +24,37 @@ export default function PopoverDemo() {
           <div className="grid gap-2">
             <div className="grid grid-cols-3 items-center gap-4">
               <Label htmlFor="width">Width</Label>
-              <Input id="width" defaultValue="100%" className="col-span-2" />
+              <Input
+                id="width"
+                defaultValue="100%"
+                autoComplete="off"
+                className="col-span-2"
+              />
             </div>
             <div className="grid grid-cols-3 items-center gap-4">
               <Label htmlFor="maxWidth">Max. width</Label>
               <Input
                 id="maxWidth"
                 defaultValue="300px"
+                autoComplete="off"
                 className="col-span-2"
               />
             </div>
             <div className="grid grid-cols-3 items-center gap-4">
               <Label htmlFor="height">Height</Label>
-              <Input id="height" defaultValue="25px" className="col-span-2" />
+              <Input
+                id="height"
+                defaultValue="25px"
+                autoComplete="off"
+                className="col-span-2"
+              />
             </div>
             <div className="grid grid-cols-3 items-center gap-4">
               <Label htmlFor="maxHeight">Max. height</Label>
               <Input
                 id="maxHeight"
                 defaultValue="none"
+                autoComplete="off"
                 className="col-span-2"
               />
             </div>

src/components/bloks/collaboration.tsx

@@ -136,35 +136,29 @@ function UserListItem({
   onAdd?: () => void;
   onRemove?: () => void;
 }) {
-  const [isHovered, setIsHovered] = useState(false);
-
   return (
-    <div
-      className="flex items-center justify-between py-2 px-1 rounded-md hover:bg-neutral-bg transition-colors"
-      onMouseEnter={() => setIsHovered(true)}
-      onMouseLeave={() => setIsHovered(false)}
-    >
-      <div className="flex items-center gap-3">
+    <div className="group flex min-w-0 items-center justify-between gap-2 py-2 px-1 rounded-md hover:bg-neutral-bg transition-colors">
+      <div className="flex min-w-0 flex-1 items-center gap-3">
         <Avatar className="size-8">
           <AvatarImage src={user.avatarUrl} alt={user.name} />
           <AvatarFallback className="text-xs bg-muted">
             {getInitials(user.name)}
           </AvatarFallback>
         </Avatar>
-        <span className="text-sm font-medium">
+        <span className="truncate text-sm font-medium">
           {user.name}
           {isCurrentUser && (
             <span className="text-muted-foreground"> (You)</span>
           )}
         </span>
       </div>
-      {isAdded && isHovered && onRemove && (
+      {isAdded && onRemove && (
         <Button
           variant="link"
           size="xs"
           colorScheme="primary"
           onClick={onRemove}
-          className="h-auto py-0.5 px-2 no-underline hover:no-underline font-bold"
+          className="h-auto py-0.5 px-2 no-underline hover:no-underline font-bold opacity-0 group-hover:opacity-100 focus-visible:opacity-100"
         >
           Remove
         </Button>
@@ -294,6 +288,7 @@ export function Collaboration<T extends User = User>({
         <PopoverContent
           align="end"
           sideOffset={8}
+          aria-label={title}
           className="w-[368px] p-0 border-0 bg-transparent shadow-none"
         >
           {/* Users Panel */}
@@ -313,7 +308,7 @@ export function Collaboration<T extends User = User>({
                   {emptyStateMessage}
                 </div>
               ) : (
-                <div className="space-y-1 max-h-48 overflow-y-auto">
+                <div className="max-h-48 space-y-1 overflow-y-auto overflow-x-hidden">
                   {users.map((user) => {
                     const userId = getUserId(user as T);
                     const currentUserId = currentUser
@@ -360,6 +355,7 @@ export function Collaboration<T extends User = User>({
                   align="center"
                   sideOffset={-8}
                   alignOffset={26}
+                  aria-label="Add users"
                   className="w-[420px] p-0 border-0 bg-transparent shadow-none"
                 >
                   {/* Add Users Panel */}
@@ -412,7 +408,7 @@ export function Collaboration<T extends User = User>({
                         </SearchInput>
                       </div>
 
-                      <div className="space-y-1 max-h-48 overflow-y-auto">
+                      <div className="max-h-48 space-y-1 overflow-y-auto overflow-x-hidden">
                         {isSearching && (
                           <div className="text-sm text-muted-foreground py-4 text-center">
                             Searching...

src/components/code-block.tsx

@@ -162,7 +162,7 @@ export function CodeBlock({
   return (
     <div
       dir="ltr"
-      role="region"
+      role={ariaLabel ? "region" : undefined}
       aria-label={ariaLabel}
       className={cn(
         "relative rounded-md bg-muted max-h-[400px] overflow-auto",

src/components/docsite/component-card.tsx

@@ -11,7 +11,7 @@ const DemoWrapper = dynamic(() => import("@/components/demo-wrapper"), {
 
 export function ComponentCard({ component }: ComponentCardProps) {
   return (
-    <section>
+    <section aria-label="Component preview">
       <div id="starting-kit">
         <div className="w-full min-w-0 overflow-x-hidden">
           <DemoWrapper name={component.name} />

src/components/layout/topbar.tsx

@@ -522,7 +522,10 @@ export default function TopBar() {
 
           {/* Top navigation */}
           <nav aria-label="Top navigation">
-            <NavigationMenu className="hidden lg:flex">
+            <NavigationMenu
+              className="hidden lg:flex"
+              aria-label="Site navigation"
+            >
               <NavigationMenuList className="flex gap-3">
                 {navItems.map((item) => {
                   const normalizedPathname = pathname.replace(/\/$/, "") || "/";

src/components/ui/accordion.tsx

@@ -35,29 +35,31 @@ function AccordionTrigger({
   actions?: React.ReactNode;
 }) {
   return (
-    <AccordionPrimitive.Header className="flex items-center hover:bg-blackAlpha-50 transition-colors w-full min-w-0">
-      <AccordionPrimitive.Trigger
-        data-slot="accordion-trigger"
-        className={cn(
-          "focus-visible:border-ring focus-visible:ring-ring/50 text-md font-regular flex flex-1 cursor-pointer items-center justify-between gap-4 px-2 py-4 text-left transition-all outline-none focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 [&[data-state=open]>svg]:rotate-180 min-w-0",
-          className,
-        )}
-        {...props}
-      >
-        {children}
-        <Icon
-          path={mdiChevronDown}
-          className="transition-transform duration-200 size-6 shrink-0"
-        />
-      </AccordionPrimitive.Trigger>
-      {actions && (
-        <div
-          className="flex items-center shrink-0 py-4 px-2"
-          onClick={(e) => e.stopPropagation()}
+    <AccordionPrimitive.Header asChild>
+      <div className="flex items-center hover:bg-blackAlpha-50 transition-colors w-full min-w-0">
+        <AccordionPrimitive.Trigger
+          data-slot="accordion-trigger"
+          className={cn(
+            "focus-visible:border-ring focus-visible:ring-ring/50 text-md font-regular flex flex-1 cursor-pointer items-center justify-between gap-4 px-2 py-4 text-left transition-all outline-none focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 [&[data-state=open]>svg]:rotate-180 min-w-0",
+            className,
+          )}
+          {...props}
         >
-          {actions}
-        </div>
-      )}
+          {children}
+          <Icon
+            path={mdiChevronDown}
+            className="transition-transform duration-200 size-6 shrink-0"
+          />
+        </AccordionPrimitive.Trigger>
+        {actions && (
+          <div
+            className="flex items-center shrink-0 py-4 px-2"
+            onClick={(e) => e.stopPropagation()}
+          >
+            {actions}
+          </div>
+        )}
+      </div>
     </AccordionPrimitive.Header>
   );
 }

src/components/ui/calendar.tsx

@@ -92,6 +92,7 @@ function Calendar({
       className={cn("p-3", className)}
       captionLayout={captionLayout}
       labels={{
+        labelNav: () => "Month navigation",
         ...labels,
         ...(monthDropdownAriaLabel != null && !labels?.labelMonthDropdown
           ? { labelMonthDropdown: () => monthDropdownAriaLabel }