Aria-label missing on autocomplete

[lorenzoerba25]

Hi, i have a problem during the rendering of a modal which contains an autocomplete component.

                 <Autocomplete
                  placeholder="Seleziona i dipendenti"
                  variant="secondary"
                  value={fields.employeesId}
                  selectionMode="multiple"
                  onChange={(keys) => {
                    const ids = [...keys].map(Number);

                    updateFields("employeesId", ids);

                    const employees = hiredEmps.filter((e) =>
                      ids.includes(e.employeeId!),
                    );

                    setSelectedEmployees(employees);
                  }}
                  allowsEmptyCollection
                  aria-label="Event date"
                >
                  <Label>Dipendenti associati al dispositivo</Label>
                  <Autocomplete.Trigger>
                    <Autocomplete.Value />
                    <Autocomplete.ClearButton
                      onClick={(e) => {
                        e.preventDefault();
                        e.stopPropagation();
                      }}
                    />
                    <Autocomplete.Indicator />
                  </Autocomplete.Trigger>
                  <Autocomplete.Popover>
                    <Autocomplete.Filter filter={contains}>
                      <SearchField autoFocus name="search" variant="secondary">
                        <SearchField.Group>
                          <SearchField.SearchIcon />
                          <SearchField.Input placeholder="Ricerca dipendente..." />
                          <SearchField.ClearButton />
                        </SearchField.Group>
                      </SearchField>
                      <ListBox
                        renderEmptyState={() => (
                          <EmptyState>Nessun risultato</EmptyState>
                        )}
                      >
                        {hiredEmps.map((e) => (
                          <ListBox.Item
                            key={e.employeeId}
                            id={e.employeeId}
                            textValue={`${e.name} ${e.surname}`}
                          >
                            {e.name} {e.surname}
                            <ListBox.ItemIndicator />
                          </ListBox.Item>
                        ))}
                      </ListBox>
                    </Autocomplete.Filter>
                  </Autocomplete.Popover>
                </Autocomplete>

On the console i get A dialog must have a title for accessibility. Either provide an aria-label or aria-labelledby prop, or render a heading element inside the dialog. I tried to put aria-label tag on Autocomplete but didn't solve the problem.

Thank you

[agrovr]

The warning is for the internal dialog inside Autocomplete.Popover, not for the outer Autocomplete/select. In HeroUI v3, Autocomplete.Popover renders a React Aria Dialog around its children, while the props on <Autocomplete> label the select itself. That is why aria-label on the root does not remove this warning.

Add a title inside the popover so React Aria can associate it with that internal dialog:

import { Heading } from "react-aria-components";

<Autocomplete
  // The visible <Label> already labels the select; remove the unrelated
  // aria-label="Event date", or change it to an employee-related label.
  placeholder="Seleziona i dipendenti"
  selectionMode="multiple"
  // ...the rest of your props
>
  <Label>Dipendenti associati al dispositivo</Label>

  <Autocomplete.Trigger>
    <Autocomplete.Value />
    <Autocomplete.ClearButton />
    <Autocomplete.Indicator />
  </Autocomplete.Trigger>

  <Autocomplete.Popover>
    <Heading slot="title" className="sr-only">
      Seleziona i dipendenti
    </Heading>

    <Autocomplete.Filter filter={contains}>
      {/* SearchField + ListBox */}
    </Autocomplete.Filter>
  </Autocomplete.Popover>
</Autocomplete>

The heading can be visible if that suits the design; sr-only keeps it available to assistive technology without adding visual UI.

So this is not a missing label on your outer modal. It is a current composition gap: Autocomplete.Popover owns an internal dialog but does not expose that dialog's labeling props directly. The source shows the wrapper here:
https://github.com/heroui-inc/heroui/blob/v3/packages/react/src/components/autocomplete/autocomplete.tsx

[lorenzoerba25]

Hi, thank you. I've tried to put <Heading> after the Popover but i'm still getting the aria-label warning.

                 <Autocomplete
                  placeholder="Seleziona i dipendenti"
                  variant="secondary"
                  value={fields.assignments.map((a) => a.employeeId)}
                  selectionMode="multiple"
                  onChange={(keys) => {
                    const ids = [...keys].map(Number);

                    updateFields(
                      "assignments",
                      ids.map((id) => {
                        const existing = fields.assignments.find(
                          (a) => a.employeeId === id,
                        );

                        return (
                          existing ?? {
                            employeeId: id,
                            assignmentDate: null,
                            returnDate: null,
                          }
                        );
                      }),
                    );

                    const employees = hiredEmps.filter((e) =>
                      ids.includes(e.employeeId!),
                    );

                    setSelectedEmployees(employees);
                  }}
                  allowsEmptyCollection
                >
                  <Label>Dipendenti associati al dispositivo</Label>
                  <Autocomplete.Trigger>
                    <Autocomplete.Value />
                    <Autocomplete.ClearButton
                      onClick={(e) => {
                        e.preventDefault();
                        e.stopPropagation();
                      }}
                    />
                    <Autocomplete.Indicator />
                  </Autocomplete.Trigger>
                  <Autocomplete.Popover>
                    <Heading slot="title" className="sr-only">
                      Seleziona i dipendenti
                    </Heading>
                    <Autocomplete.Filter filter={contains}>
                      <SearchField autoFocus name="search" variant="secondary">
                        <SearchField.Group>
                          <SearchField.SearchIcon />
                          <SearchField.Input placeholder="Ricerca dipendente..." />
                          <SearchField.ClearButton />
                        </SearchField.Group>
                      </SearchField>
                      <ListBox
                        renderEmptyState={() => (
                          <EmptyState>Nessun dipendente trovato</EmptyState>
                        )}
                      >
                        {hiredEmps.map((e) => (
                          <ListBox.Item
                            key={e.employeeId}
                            id={e.employeeId}
                            textValue={`${e.name} ${e.surname}`}
                          >
                            {e.name} {e.surname}
                            <ListBox.ItemIndicator />
                          </ListBox.Item>
                        ))}
                      </ListBox>
                    </Autocomplete.Filter>
                  </Autocomplete.Popover>
                </Autocomplete>

I'm using heroui/react v3.2.1