diff --git a/packages/react-core/src/components/TextInput/TextInput.tsx b/packages/react-core/src/components/TextInput/TextInput.tsx index db897a43d02..282928b5c07 100644 --- a/packages/react-core/src/components/TextInput/TextInput.tsx +++ b/packages/react-core/src/components/TextInput/TextInput.tsx @@ -26,6 +26,13 @@ export enum TextInputReadOnlyVariant { plain = 'plain' } +export interface TextInputExpandedObj { + /** Flag to apply expanded styling. */ + isExpanded: boolean; + /** Id of the element that the text input is controlling expansion of. */ + ariaControls: string; +} + export interface TextInputProps extends Omit, 'onChange' | 'onFocus' | 'onBlur' | 'disabled' | 'ref'>, OUIAProps { @@ -33,8 +40,10 @@ export interface TextInputProps className?: string; /** Flag to show if the text input is disabled. */ isDisabled?: boolean; - /** Flag to apply expanded styling */ + /** @deprecated Flag to apply expanded styling. expandedProps should now be used instead. */ isExpanded?: boolean; + /** Prop to apply expanded styling to the text input and link it to the element it is controlling. This should be used when the input controls a menu and that menu is expandable. */ + expandedProps?: TextInputExpandedObj; /** Sets the input as readonly and determines the readonly styling. */ readOnlyVariant?: 'plain' | 'default'; /** Flag indicating whether the input is required */ @@ -182,6 +191,7 @@ export class TextInputBase extends React.Component { render(); expect(trimLeftFn).toHaveBeenCalled(); }); + + test('has aria-expanded set to true when ariaProps.isExpanded is true', () => { + render(); + + const input = screen.getByLabelText('isExpanded'); + expect(input).toHaveAttribute('aria-expanded', 'true'); + expect(input).toHaveAttribute('role', 'combobox'); + expect(input).toHaveAttribute('aria-controls', 'test'); + }); }); diff --git a/packages/react-core/src/components/TextInput/examples/TextInput.md b/packages/react-core/src/components/TextInput/examples/TextInput.md index 747e062f372..3c6b689c080 100644 --- a/packages/react-core/src/components/TextInput/examples/TextInput.md +++ b/packages/react-core/src/components/TextInput/examples/TextInput.md @@ -3,7 +3,7 @@ id: Text input section: components subsection: forms cssPrefix: pf-v5-c-form-control -propComponents: ['TextInput'] +propComponents: ['TextInput', 'TextInputExpandedObj'] --- import CalendarIcon from '@patternfly/react-icons/dist/esm/icons/calendar-icon';