Why InputGroup automatically set the aria-describedby to a "form-control" child?

[dgdavid]

Hi there!

Excuse me for the noob question, but I do not get why the InputGroup component automatically set the aria-describedby attribute to the form-control child pointing to another child component when the former does not have such an attribute and the latest isn't considered a form-control but has set the id attribute.

Despite reading the code and searching on the Github repository, I haven't found anything more than evidence that it was done on purpose. Even looking at the PatternFly examples... the behavior there don't make sense to me.

Consider an InputGroup that groups a TextInput of type password with a Button that toggles it to type text. Due to requirements, the button has an id attribute. I cannot see the value of the TextInput having set the aria-describedby="button-id" attribute. Most probably, I'm missing something.

---

import EyeIcon from '@patternfly/react-icons/dist/esm/icons/eye-icon';
import { Button, InputGroup, InputGroupItem, TextInput } from '@patternfly/react-core';

export default function Example() {
  return (
    <InputGroup>
      <InputGroupItem isFill>
        <TextInput id="password" type="password" aria-label="User password field" />
      </InputGroupItem>
      <InputGroupItem>
        <Button id="button-id" variant="control" icon={<EyeIcon />} />
      </InputGroupItem>
    </InputGroup>
  );
}

---

Looking at the code, it's clear that the "workaround" is setting the aria-describedby="" to the input field... but it feels weird. Wouldn't it make better sense the other way around? I.e., the developer setting the aria-describedby="button-id" if really needed.

I really appreciate your help to understand the rationale of that behavior.

Thanks a lot in advance.

[dgdavid]

@boaz0, @dlabaj maybe you can/don't mind help me here 😇

[thatblindgeye]

Hey @dgdavid , thanks for bringing this up!

After discussing this with some on the team, what you've mentioned in your original post makes sense and is accurate. Ideally what we'd want to do is:

• Remove the automated application of the aria-describedby attribute, and have it simply be something passed by the consumer when applicable like most/all of our other components
• Possibly provide an example showcasing when an aria-describedby would make sense

We concluded that this is more of a bug fix than breaking change, so I'll create an issue from this discussion, thanks again for bringing this to our attention!

[dgdavid]

We concluded that this is more of a bug fix than breaking change, so I'll create an issue from this discussion, thanks again for bringing this to our attention!

My pleasure!

Thanks to you @thatblindgeye and your team for answering and taking care of the issue.