-
Notifications
You must be signed in to change notification settings - Fork 375
Description
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>
);
}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
Type
Projects
Status
