DialFormItem: group accessible name absorbs an interactive label child (info-tooltip button)

[dearsimanovich-epam]

Summary

DialFormItem (and everything built on it — DialSelectField, DialInputField, …) puts
role="group" and aria-labelledby on the label container rather than on the label's text node:

<div role="group" aria-labelledby={`${id}-label`} aria-describedby={…}>
  <div id={`${id}-label`}>   {/* <- name is computed from ALL of this */}
    <DialLabel label={label} … />
  </div>
  …
</div>

Because the accessible name of the group is computed from the whole subtree of that container, any
interactive child of a ReactNode label contributes its own accessible name to the group's name.

Reproduction

Pass a label node that carries an icon button with an aria-label — the common "field label + info
tooltip" pattern:

<DialSelectField
  id="ordering-key"
  label={
    <span className="flex items-center gap-1">
      <span>Ordering key</span>
      <DialTooltip tooltip={<span>{hint}</span>}>
        <button type="button" aria-label={hint}>
          <IconInfoCircle size={14} aria-hidden />
        </button>
      </DialTooltip>
    </span>
  }
  options={options}
  value={value}
  onChange={onChange}
/>

Actual

The group's accessible name becomes "Ordering key <the entire hint text> *". With a three-sentence
hint (~300 characters) a screen reader announces the whole hint before the user reaches the select.
Verified in a Chromium accessibility snapshot.

Expected

The group is named by the label's own text ("Ordering key"). A hint button inside the label keeps its
own accessible name, reachable on its own, and does not leak into the group's name.

Why it cannot be worked around by the consumer

• DialFormItemProps does not forward aria-*, so neither the group nor the label container can be
  given an explicit aria-label to override the computed name.
• labelClassName only styles the container.
• Any text placed in the label feeds the computed name — including sr-only text — so the hint text
  cannot be hidden from it while staying available to assistive technology.

Suggested fix

Point aria-labelledby at the element that holds the label text (or accept an explicit
aria-label/labelId on DialFormItem), so interactive descendants of a ReactNode label are not
part of the group's accessible name.

Version

@epam/ai-dial-ui-kit as installed in ai-dial-admin-frontend (dist/index-BnqboA_3.js, Aug 2026).