Skip to content

InputGroup - remove automated aria-describedby attribute #9667

@thatblindgeye

Description

@thatblindgeye

Discussed in https://github.com/orgs/patternfly/discussions/5954

Originally posted by dgdavid September 20, 2023
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>
  );
}

Screenshot from 2023-09-20 23-09-37


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.

Metadata

Metadata

Assignees

Labels

No labels
No labels

Type

No type

Projects

Status

Done

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions