[v4] fix(InputGroup): don't add aria-describedby automatically (#9671)

* fix(InputGroup): don't add aria-describedby automatically

For fixing #9667

* test(NumberInput): drop aria-describedby workaround

Test was setting the `aria-describedby=''` attribute to a NumericInput
inside an InputGroup, most probably to avoid the autogenerated value
(see #9667).

However, after cleaning up the InputGroup component,
`aria-describedby=''` is not a workaround anymore for unset the
attribute, breaking the snapshot associated to the test.

packages/react-core/src/components/InputGroup/InputGroup.tsx

@@ -1,9 +1,6 @@
 import * as React from 'react';
 import styles from '@patternfly/react-styles/css/components/InputGroup/input-group';
 import { css } from '@patternfly/react-styles';
-import { FormSelect } from '../FormSelect';
-import { TextArea } from '../TextArea';
-import { TextInput } from '../TextInput';
 
 export interface InputGroupProps extends React.HTMLProps<HTMLDivElement> {
  /** Additional classes added to the input group. */
@@ -20,25 +17,12 @@ export const InputGroup: React.FunctionComponent<InputGroupProps> = ({
  innerRef,
  ...props
 }: InputGroupProps) => {
- const formCtrls = [FormSelect, TextArea, TextInput].map(comp => comp.displayName);
- const idItem = React.Children.toArray(children).find(
- (child: any) => !formCtrls.includes(child.type.displayName) && child.props.id
- ) as React.ReactElement<{ id: string }>;
-
  const ref = React.useRef(null);
  const inputGroupRef = innerRef || ref;
 
  return (
  <div ref={inputGroupRef} className={css(styles.inputGroup, className)} {...props}>
- {idItem
- ? React.Children.map(children, (child: any) =>
- !formCtrls.includes(child.type.displayName) || child.props['aria-describedby']
- ? child
- : React.cloneElement(child, {
- 'aria-describedby': child.props['aria-describedby'] === '' ? undefined : idItem.props.id
- })
- )
- : children}
+ {children}
  </div>
  );
 };

packages/react-core/src/components/InputGroup/__tests__/InputGroup.test.tsx

@@ -7,47 +7,18 @@ import { Button } from '../../Button';
 import { TextInput } from '../../TextInput';
 
 describe('InputGroup', () => {
- test('add aria-describedby to form-control if one of the non form-controls has id', () => {
- // In this test, TextInput is a form-control component and Button is not.
- // If Button has an id props, this should be used in aria-describedby.
+ // Regression test for https://github.com/patternfly/patternfly-react/issues/9667
+ test('wont add aria-describedby automatically to form-control', () => {
  render(
  <InputGroup>
- <TextInput value="some data" aria-label="some text" />
- <Button variant="primary" id="button-id">
- hello
+ <TextInput aria-label="User password" />
+ <Button variant="primary" id="show-password-toggler">
+ Show
  </Button>
  </InputGroup>
  );
- expect(screen.getByLabelText('some text')).toHaveAttribute('aria-describedby', 'button-id');
- });
 
- test('wont add aria-describedby to form-control if describedby is empty string', () => {
- // In this test, TextInput is a form-control component and Button is not.
- // If Button has an id props, this should be used in aria-describedby, but this
- // example has an empty aria-describedby to prevent that from happening.
- render(
- <InputGroup>
- <TextInput value="some data" aria-describedby="" aria-label="some text" />
- <Button id="button-id">
- hello
- </Button>
- </InputGroup>
- );
- expect(screen.getByLabelText('some text')).not.toHaveAttribute('aria-describedby');
- });
-
- test('wont override aria-describedby in form-control if describedby has value', () => {
- // In this test, TextInput is a form-control component and Button is not.
- // If Button has an id props, this should be used in aria-describedby, but this
- // example has a predefined aria-describedby to prevent that from happening
- render(
- <InputGroup>
- <TextInput value="some data" aria-describedby="myself" aria-label="some text" />
- <Button id="button-id">
- hello
- </Button>
- </InputGroup>
- );
- expect(screen.getByLabelText('some text')).toHaveAttribute('aria-describedby', 'myself');
+ const formControl = screen.getByLabelText("User password");
+ expect(formControl).not.toHaveAttribute("aria-describedby");
  });
 });

packages/react-core/src/components/NumberInput/__tests__/NumberInput.test.tsx

@@ -69,7 +69,6 @@ describe('numberInput', () => {
  <NumberInput
  value={5}
  onMinus={jest.fn()}
- inputProps={{ 'aria-describedby': '' }}
  minusBtnProps={{ id: 'minus-id' }}
  onPlus={jest.fn()}
  plusBtnProps={{ id: 'plus-id' }}