banhaten 0.2.0 → 0.4.0

package/registry/components/select.tsx

@@ -224,6 +224,9 @@ const Select = React.forwardRef<HTMLDivElement, SelectProps>(function Select({
   const shouldRenderMenu = React.Children.count(children) > 0
   const selectId = triggerId || generatedId
   const helperId = `${selectId}-helper`
+  const triggerAccessibleLabel = shouldRenderLabel
+    ? undefined
+    : getAccessibleText(selectedValue) ?? getAccessibleText(selectedPlaceholder)
   const rootOpenProps =
     open === undefined ? { onOpenChange } : { open, onOpenChange }
 
@@ -261,8 +264,8 @@ const Select = React.forwardRef<HTMLDivElement, SelectProps>(function Select({
         <div data-slot="select-control" className="relative w-full">
           <SelectPrimitive.Trigger asChild>
             <SelectTrigger
+              aria-label={triggerAccessibleLabel}
               aria-describedby={shouldRenderHelperText ? helperId : undefined}
-              aria-expanded={open || undefined}
               aria-haspopup="listbox"
               aria-invalid={isError || undefined}
               expandIcon={expandIcon}
@@ -436,6 +439,12 @@ function hasRenderableContent(content: React.ReactNode) {
   )
 }
 
+function getAccessibleText(content: React.ReactNode) {
+  return typeof content === "string" || typeof content === "number"
+    ? String(content)
+    : undefined
+}
+
 type SelectHelperTextProps = React.ComponentProps<"p"> & {
   hasIcon?: boolean
   type?: "default" | "error"
@@ -592,7 +601,14 @@ SelectTrigger.displayName = "SelectTrigger"
 type SelectMenuProps = React.ComponentProps<"div">
 
 const SelectMenu = React.forwardRef<HTMLDivElement, SelectMenuProps>(function SelectMenu(
-  { children, className, onKeyDown, role, ...props },
+  {
+    "aria-label": ariaLabel = "Options",
+    children,
+    className,
+    onKeyDown,
+    role,
+    ...props
+  },
   ref
 ) {
   const handleKeyDown = React.useCallback(
@@ -638,6 +654,7 @@ const SelectMenu = React.forwardRef<HTMLDivElement, SelectMenuProps>(function Se
 
   return (
     <div
+      aria-label={ariaLabel}
       data-slot="select-menu"
       onKeyDown={handleKeyDown}
       ref={ref}
@@ -645,7 +662,11 @@ const SelectMenu = React.forwardRef<HTMLDivElement, SelectMenuProps>(function Se
       className={cn(selectMenu(), className)}
       {...props}
     >
-      <div data-slot="select-menu-list" className={selectMenuList()}>
+      <div
+        data-slot="select-menu-list"
+        role="presentation"
+        className={selectMenuList()}
+      >
         {children}
       </div>
     </div>
@@ -689,6 +710,8 @@ type SelectMenuItemProps = SelectMenuItemBaseProps &
 
 const SelectMenuItem = React.forwardRef<HTMLButtonElement, SelectMenuItemProps>(function SelectMenuItem({
   addonText,
+  "aria-checked": ariaChecked,
+  "aria-selected": ariaSelected,
   children,
   className,
   disabled,
@@ -706,8 +729,12 @@ const SelectMenuItem = React.forwardRef<HTMLButtonElement, SelectMenuItemProps>(
   const generatedValue = React.useId()
   const isDisabled = disabled
   const selectedWithEndCheck = selected && selectionType === "default"
-  const resolvedRole =
-    role || (selectionType === "checkbox" ? "menuitemcheckbox" : "option")
+  const resolvedRole = role || "option"
+  const usesCheckedState =
+    resolvedRole === "checkbox" ||
+    resolvedRole === "menuitemcheckbox" ||
+    resolvedRole === "radio" ||
+    resolvedRole === "menuitemradio"
   const selectedMedia =
     media === false ? null : media ?? getDefaultSelectItemMedia(itemType)
   const content = label ?? children
@@ -723,13 +750,9 @@ const SelectMenuItem = React.forwardRef<HTMLButtonElement, SelectMenuItemProps>(
 
   const item = (
     <button
-      aria-checked={
-        selectionType === "checkbox" ? Boolean(selected) : undefined
-      }
+      aria-checked={usesCheckedState ? (ariaChecked ?? Boolean(selected)) : undefined}
       aria-disabled={isDisabled || undefined}
-      aria-selected={
-        selectionType === "default" ? Boolean(selected) : undefined
-      }
+      aria-selected={resolvedRole === "option" ? (ariaSelected ?? Boolean(selected)) : undefined}
       data-disabled={isDisabled ? "true" : undefined}
       data-item-type={itemType}
       data-selected={selected ? "true" : "false"}
@@ -760,7 +783,7 @@ const SelectMenuItem = React.forwardRef<HTMLButtonElement, SelectMenuItemProps>(
         {selectedMedia ? (
           <span
             data-slot="select-menu-item-media"
-            className="flex shrink-0 items-center ps-[var(--bh-select-media-inset)] text-[var(--bh-content-subtle)] group-data-[disabled=true]/select-menu-item:text-[var(--bh-content-disabled)] group-data-[disabled=true]/select-menu-item:opacity-[var(--bh-opacity-60)] [&_svg:not([class*='size-'])]:size-[var(--bh-select-icon-slot-size)]"
+            className="flex shrink-0 items-center ps-[var(--bh-select-media-inset)] text-[var(--bh-content-subtle)] group-data-[disabled=true]/select-menu-item:text-[var(--bh-content-disabled)] group-data-[disabled=true]/select-menu-item:opacity-[var(--bh-opacity-60)] [&_svg:not([class*='size-'])]:size-[var(--bh-icon-size-default)]"
           >
             {selectedMedia}
           </span>