fix(example): some a11y improvements

examples/playground/app/(playground)/layout.tsx

@@ -3,6 +3,7 @@ import { HelpCircle, Zap } from "lucide-react"
 
 import { workspaces } from "@/data/teams"
 import { user } from "@/data/user"
+import { siteConfig } from "@/config/site"
 import { cn } from "@/lib/utils"
 import { Icons } from "@/components/icons"
 import { MainNav } from "@/components/main-nav"
@@ -21,6 +22,7 @@ export default function DashboardLayout({ children }: DashboardLayoutProps) {
           <div className="flex items-center space-x-4">
             <Link href="/">
               <Icons.logo />
+              <span className="sr-only">{siteConfig.name}</span>
             </Link>
             <MainNav />
           </div>
@@ -29,7 +31,7 @@ export default function DashboardLayout({ children }: DashboardLayoutProps) {
               href="/login"
               className={cn(
                 buttonVariants({ variant: "ghost" }),
-                "h-9 px-2 text-emerald-600"
+                "h-9 px-2 text-emerald-700"
               )}
             >
               <Zap className="mr-2 h-4 w-4" /> Upgrade

examples/playground/app/(playground)/page.tsx

@@ -100,8 +100,10 @@ export default function PlaygroundPage() {
             <div className="hidden flex-col space-y-4 sm:flex">
               <div className="grid gap-2">
                 <HoverCard openDelay={200}>
-                  <HoverCardTrigger className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70">
-                    Mode
+                  <HoverCardTrigger asChild>
+                    <span className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70">
+                      Mode
+                    </span>
                   </HoverCardTrigger>
                   <HoverCardContent className="w-[320px] text-sm" side="left">
                     Choose the interface that best suits your task. You can
@@ -112,12 +114,15 @@ export default function PlaygroundPage() {
                 </HoverCard>
                 <TabsList className="grid grid-cols-3">
                   <TabsTrigger value="complete">
+                    <span className="sr-only">Complete</span>
                     <Icons.completeMode className="h-5 w-5" />
                   </TabsTrigger>
                   <TabsTrigger value="insert">
+                    <span className="sr-only">Insert</span>
                     <Icons.insertMode className="h-5 w-5" />
                   </TabsTrigger>
                   <TabsTrigger value="edit">
+                    <span className="sr-only">Edit</span>
                     <Icons.editMode className="h-5 w-5" />
                   </TabsTrigger>
                 </TabsList>

examples/playground/components/maxlength-selector.tsx

@@ -21,21 +21,24 @@ export function MaxLengthSelector({ defaultValue }: MaxLengthSelectorProps) {
   return (
     <div className="grid gap-2 pt-2">
       <HoverCard openDelay={200}>
-        <HoverCardTrigger className="grid gap-4">
-          <div className="flex items-center justify-between">
-            <Label htmlFor="maxlength">Maximum Length</Label>
-            <span className="w-12 rounded-md border border-transparent px-2 py-0.5 text-right text-sm text-slate-600 hover:border-slate-100 dark:text-slate-400 dark:hover:border-slate-800">
-              {value}
-            </span>
+        <HoverCardTrigger asChild>
+          <div className="grid gap-4">
+            <div className="flex items-center justify-between">
+              <Label htmlFor="maxlength">Maximum Length</Label>
+              <span className="w-12 rounded-md border border-transparent px-2 py-0.5 text-right text-sm text-slate-600 hover:border-slate-100 dark:text-slate-400 dark:hover:border-slate-800">
+                {value}
+              </span>
+            </div>
+            <Slider
+              id="maxlength"
+              max={4000}
+              defaultValue={value}
+              step={10}
+              onValueChange={setValue}
+              className="[&_[role=slider]]:h-4 [&_[role=slider]]:w-4"
+              aria-label="Maximum Length"
+            />
           </div>
-          <Slider
-            id="maxlength"
-            max={4000}
-            defaultValue={value}
-            step={10}
-            onValueChange={setValue}
-            className="[&_[role=slider]]:h-4 [&_[role=slider]]:w-4"
-          />
         </HoverCardTrigger>
         <HoverCardContent
           align="start"

examples/playground/components/model-selector.tsx

@@ -42,7 +42,7 @@ export function ModelSelector({ models, types, ...props }: ModelSelectorProps) {
   return (
     <div className="grid gap-2">
       <HoverCard openDelay={200}>
-        <HoverCardTrigger>
+        <HoverCardTrigger asChild>
           <Label htmlFor="model">Model</Label>
         </HoverCardTrigger>
         <HoverCardContent
@@ -60,6 +60,7 @@ export function ModelSelector({ models, types, ...props }: ModelSelectorProps) {
             variant="outline"
             role="combobox"
             aria-expanded={open}
+            aria-label="Select a model"
             className="w-full justify-between"
           >
             {selectedModel ? selectedModel.name : "Select a model..."}

examples/playground/components/preset-selector.tsx

@@ -37,6 +37,7 @@ export function PresetSelector({ presets, ...props }: PresetSelectorProps) {
         <Button
           variant="outline"
           role="combobox"
+          aria-label="Load a preset..."
           aria-expanded={open}
           className="max-w-[300px] flex-1 justify-between"
         >

examples/playground/components/temperature-selector.tsx

@@ -23,21 +23,24 @@ export function TemperatureSelector({
   return (
     <div className="grid gap-2 pt-2">
       <HoverCard openDelay={200}>
-        <HoverCardTrigger className="grid gap-4">
-          <div className="flex items-center justify-between">
-            <Label htmlFor="temperature">Temperature</Label>
-            <span className="w-12 rounded-md border border-transparent px-2 py-0.5 text-right text-sm text-slate-600 hover:border-slate-100 dark:text-slate-400 dark:hover:border-slate-800">
-              {value}
-            </span>
+        <HoverCardTrigger asChild>
+          <div className="grid gap-4">
+            <div className="flex items-center justify-between">
+              <Label htmlFor="temperature">Temperature</Label>
+              <span className="w-12 rounded-md border border-transparent px-2 py-0.5 text-right text-sm text-slate-600 hover:border-slate-100 dark:text-slate-400 dark:hover:border-slate-800">
+                {value}
+              </span>
+            </div>
+            <Slider
+              id="temperature"
+              max={1}
+              defaultValue={value}
+              step={0.1}
+              onValueChange={setValue}
+              className="[&_[role=slider]]:h-4 [&_[role=slider]]:w-4"
+              aria-label="Temperature"
+            />
           </div>
-          <Slider
-            id="temperature"
-            max={1}
-            defaultValue={value}
-            step={0.1}
-            onValueChange={setValue}
-            className="[&_[role=slider]]:h-4 [&_[role=slider]]:w-4"
-          />
         </HoverCardTrigger>
         <HoverCardContent
           align="start"

examples/playground/components/top-p-selector.tsx

@@ -21,21 +21,24 @@ export function TopPSelector({ defaultValue }: TopPSelectorProps) {
   return (
     <div className="grid gap-2 pt-2">
       <HoverCard openDelay={200}>
-        <HoverCardTrigger className="grid gap-4">
-          <div className="flex items-center justify-between">
-            <Label htmlFor="top-p">Top P</Label>
-            <span className="w-12 rounded-md border border-transparent px-2 py-0.5 text-right text-sm text-slate-600 hover:border-slate-100 dark:text-slate-400 dark:hover:border-slate-800">
-              {value}
-            </span>
+        <HoverCardTrigger asChild>
+          <div className="grid gap-4">
+            <div className="flex items-center justify-between">
+              <Label htmlFor="top-p">Top P</Label>
+              <span className="w-12 rounded-md border border-transparent px-2 py-0.5 text-right text-sm text-slate-600 hover:border-slate-100 dark:text-slate-400 dark:hover:border-slate-800">
+                {value}
+              </span>
+            </div>
+            <Slider
+              id="top-p"
+              max={1}
+              defaultValue={value}
+              step={0.1}
+              onValueChange={setValue}
+              className="[&_[role=slider]]:h-4 [&_[role=slider]]:w-4"
+              aria-label="Top P"
+            />
           </div>
-          <Slider
-            id="top-p"
-            max={1}
-            defaultValue={value}
-            step={0.1}
-            onValueChange={setValue}
-            className="[&_[role=slider]]:h-4 [&_[role=slider]]:w-4"
-          />
         </HoverCardTrigger>
         <HoverCardContent
           align="start"