Combobox: do not automatically add labelledby on input

most of the time, the input is already described by a label.
So we had a label pointing to an input pointing to a label : an infinite loop.

Moreover, we already use a label tag for user without assistive tech so we remove labelledby.

app/javascript/components/ComboBox.tsx

@@ -18,7 +18,6 @@ import { findOrCreateContainerElement } from '@coldwired/react';
 import * as s from 'superstruct';
 
 import {
-  useLabelledBy,
   useDispatchChangeEvent,
   useMultiList,
   useSingleList,
@@ -94,7 +93,6 @@ export function SingleComboBox({
   ...maybeProps
 }: SingleComboBoxProps) {
   const {
-    'aria-labelledby': ariaLabelledby,
     items: defaultItems,
     selectedKey: defaultSelectedKey,
     emptyFilterKey,
@@ -105,7 +103,6 @@ export function SingleComboBox({
     ...props
   } = useMemo(() => s.create(maybeProps, SingleComboBoxProps), [maybeProps]);
 
-  const labelledby = useLabelledBy(props.id, ariaLabelledby);
   const { ref, dispatch } = useDispatchChangeEvent();
 
   const { selectedItem, onReset, ...comboBoxProps } = useSingleList({
@@ -117,12 +114,7 @@ export function SingleComboBox({
 
   return (
     <>
-      <ComboBox
-        aria-labelledby={labelledby}
-        menuTrigger="focus"
-        {...comboBoxProps}
-        {...props}
-      >
+      <ComboBox menuTrigger="focus" {...comboBoxProps} {...props}>
         {(item) => <ComboBoxItem id={item.value}>{item.label}</ComboBoxItem>}
       </ComboBox>
       {children || name ? (
@@ -147,7 +139,6 @@ export function SingleComboBox({
 
 export function MultiComboBox(maybeProps: MultiComboBoxProps) {
   const {
-    'aria-labelledby': ariaLabelledby,
     items: defaultItems,
     selectedKeys: defaultSelectedKeys,
     name,
@@ -159,7 +150,6 @@ export function MultiComboBox(maybeProps: MultiComboBoxProps) {
     ...props
   } = useMemo(() => s.create(maybeProps, MultiComboBoxProps), [maybeProps]);
 
-  const labelledby = useLabelledBy(props.id, ariaLabelledby);
   const { ref, dispatch } = useDispatchChangeEvent();
   const inputRef = useRef<HTMLInputElement>(null);
 
@@ -202,7 +192,6 @@ export function MultiComboBox(maybeProps: MultiComboBoxProps) {
         </TagGroup>
       ) : null}
       <ComboBox
-        aria-labelledby={labelledby}
         allowsCustomValue={allowsCustomValue}
         inputRef={inputRef}
         menuTrigger="focus"
@@ -246,7 +235,6 @@ export function RemoteComboBox({
   ...maybeProps
 }: RemoteComboBoxProps) {
   const {
-    'aria-labelledby': ariaLabelledby,
     items: defaultItems,
     selectedKey: defaultSelectedKey,
     allowsCustomValue,
@@ -261,7 +249,6 @@ export function RemoteComboBox({
     ...props
   } = useMemo(() => s.create(maybeProps, RemoteComboBoxProps), [maybeProps]);
 
-  const labelledby = useLabelledBy(props.id, ariaLabelledby);
   const { ref, dispatch } = useDispatchChangeEvent();
 
   const load = useMemo(
@@ -288,7 +275,6 @@ export function RemoteComboBox({
       <ComboBox
         allowsEmptyCollection={comboBoxProps.inputValue.length > 0}
         allowsCustomValue={allowsCustomValue}
-        aria-labelledby={labelledby}
         {...comboBoxProps}
         {...props}
       >

app/javascript/components/react-aria/hooks.ts

@@ -510,24 +510,6 @@ export const createLoader: (
     }
   };
 
-export function useLabelledBy(id?: string, ariaLabelledby?: string) {
-  return useMemo(
-    () => (ariaLabelledby ? ariaLabelledby : findLabelledbyId(id)),
-    [id, ariaLabelledby]
-  );
-}
-
-function findLabelledbyId(id?: string) {
-  if (!id) {
-    return;
-  }
-  const label = document.querySelector(`[for="${id}"]`);
-  if (!label?.id) {
-    return;
-  }
-  return label.id;
-}
-
 export function useOnFormReset(onReset?: () => void) {
   const ref = useRef<HTMLInputElement>(null);
   const onResetListener = useEvent<EventListener>((event) => {