From 3835f1152a994a51f495835b249889bb7a7c384f Mon Sep 17 00:00:00 2001 From: Titani Date: Tue, 3 Oct 2023 09:52:43 -0400 Subject: [PATCH 1/3] fix(Text input): Added aria-expanded --- .../__snapshots__/ClipboardCopy.test.tsx.snap | 1 + .../__snapshots__/DatePicker.test.tsx.snap | 3 +++ .../__snapshots__/FileUpload.test.tsx.snap | 1 + .../FileUploadField.test.tsx.snap | 1 + .../__snapshots__/LoginForm.test.tsx.snap | 6 ++++++ .../__snapshots__/NumberInput.test.tsx.snap | 13 ++++++++++++ .../__snapshots__/Navigation.test.tsx.snap | 1 + .../__snapshots__/Pagination.test.tsx.snap | 20 +++++++++++++++++++ .../__snapshots__/SearchInput.test.tsx.snap | 3 +++ .../__snapshots__/Slider.test.tsx.snap | 4 ++++ .../src/components/TextInput/TextInput.tsx | 1 + .../TextInput/__tests__/TextInput.test.tsx | 7 +++++++ .../__snapshots__/TextInput.test.tsx.snap | 7 +++++++ .../__snapshots__/Select.test.tsx.snap | 6 ++++++ .../__snapshots__/Table.test.tsx.snap | 8 ++++++++ 15 files changed, 82 insertions(+) diff --git a/packages/react-core/src/components/ClipboardCopy/__tests__/Generated/__snapshots__/ClipboardCopy.test.tsx.snap b/packages/react-core/src/components/ClipboardCopy/__tests__/Generated/__snapshots__/ClipboardCopy.test.tsx.snap index 9b881779f24..ea17ba07738 100644 --- a/packages/react-core/src/components/ClipboardCopy/__tests__/Generated/__snapshots__/ClipboardCopy.test.tsx.snap +++ b/packages/react-core/src/components/ClipboardCopy/__tests__/Generated/__snapshots__/ClipboardCopy.test.tsx.snap @@ -14,6 +14,7 @@ exports[`ClipboardCopy should match snapshot (auto-generated) 1`] = ` class="pf-v5-c-form-control" > { render(); expect(trimLeftFn).toHaveBeenCalled(); }); + + test('has aria-expanded set to true when isExpanded is true', () => { + render(); + + const input = screen.getByLabelText('isExpanded'); + expect(input).toHaveAttribute('aria-expanded', 'true'); + }); }); diff --git a/packages/react-core/src/components/TextInput/__tests__/__snapshots__/TextInput.test.tsx.snap b/packages/react-core/src/components/TextInput/__tests__/__snapshots__/TextInput.test.tsx.snap index 18e5cc29bea..317c20ca24d 100644 --- a/packages/react-core/src/components/TextInput/__tests__/__snapshots__/TextInput.test.tsx.snap +++ b/packages/react-core/src/components/TextInput/__tests__/__snapshots__/TextInput.test.tsx.snap @@ -6,6 +6,7 @@ exports[`TextInput default read only text input 1`] = ` class="pf-v5-c-form-control pf-m-readonly" > Date: Tue, 17 Oct 2023 11:52:26 -0400 Subject: [PATCH 2/3] add interface --- .../__snapshots__/ClipboardCopy.test.tsx.snap | 1 - .../__snapshots__/DatePicker.test.tsx.snap | 3 --- .../__snapshots__/FileUpload.test.tsx.snap | 1 - .../FileUploadField.test.tsx.snap | 1 - .../__snapshots__/LoginForm.test.tsx.snap | 6 ------ .../__snapshots__/NumberInput.test.tsx.snap | 13 ------------ .../__snapshots__/Navigation.test.tsx.snap | 1 - .../__snapshots__/Pagination.test.tsx.snap | 20 ------------------- .../__snapshots__/SearchInput.test.tsx.snap | 3 --- .../__snapshots__/Slider.test.tsx.snap | 4 ---- .../src/components/TextInput/TextInput.tsx | 17 +++++++++++++--- .../TextInput/__tests__/TextInput.test.tsx | 6 ++++-- .../__snapshots__/TextInput.test.tsx.snap | 7 ------- .../__snapshots__/Select.test.tsx.snap | 6 ------ .../__snapshots__/Table.test.tsx.snap | 8 -------- 15 files changed, 18 insertions(+), 79 deletions(-) diff --git a/packages/react-core/src/components/ClipboardCopy/__tests__/Generated/__snapshots__/ClipboardCopy.test.tsx.snap b/packages/react-core/src/components/ClipboardCopy/__tests__/Generated/__snapshots__/ClipboardCopy.test.tsx.snap index ea17ba07738..9b881779f24 100644 --- a/packages/react-core/src/components/ClipboardCopy/__tests__/Generated/__snapshots__/ClipboardCopy.test.tsx.snap +++ b/packages/react-core/src/components/ClipboardCopy/__tests__/Generated/__snapshots__/ClipboardCopy.test.tsx.snap @@ -14,7 +14,6 @@ exports[`ClipboardCopy should match snapshot (auto-generated) 1`] = ` class="pf-v5-c-form-control" > , 'onChange' | 'onFocus' | 'onBlur' | 'disabled' | 'ref'>, OUIAProps { @@ -33,8 +38,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 */ isExpanded?: boolean; + /** Prop to apply expanded styling to the text input and link it toe the element it is controlling. This should be used when the input controls a menu and tha menu is expanded. */ + expandedProps?: TextinputExpandedObj; /** Sets the input as readonly and determines the readonly styling. */ readOnlyVariant?: 'plain' | 'default'; /** Flag indicating whether the input is required */ @@ -182,6 +189,7 @@ export class TextInputBase extends React.Component { expect(trimLeftFn).toHaveBeenCalled(); }); - test('has aria-expanded set to true when isExpanded is true', () => { - render(); + 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/__tests__/__snapshots__/TextInput.test.tsx.snap b/packages/react-core/src/components/TextInput/__tests__/__snapshots__/TextInput.test.tsx.snap index 317c20ca24d..18e5cc29bea 100644 --- a/packages/react-core/src/components/TextInput/__tests__/__snapshots__/TextInput.test.tsx.snap +++ b/packages/react-core/src/components/TextInput/__tests__/__snapshots__/TextInput.test.tsx.snap @@ -6,7 +6,6 @@ exports[`TextInput default read only text input 1`] = ` class="pf-v5-c-form-control pf-m-readonly" > Date: Mon, 23 Oct 2023 15:16:46 -0400 Subject: [PATCH 3/3] updates from review --- .../src/components/TextInput/TextInput.tsx | 14 ++++++++------ .../src/components/TextInput/examples/TextInput.md | 2 +- 2 files changed, 9 insertions(+), 7 deletions(-) diff --git a/packages/react-core/src/components/TextInput/TextInput.tsx b/packages/react-core/src/components/TextInput/TextInput.tsx index 9628f193391..282928b5c07 100644 --- a/packages/react-core/src/components/TextInput/TextInput.tsx +++ b/packages/react-core/src/components/TextInput/TextInput.tsx @@ -26,8 +26,10 @@ export enum TextInputReadOnlyVariant { plain = 'plain' } -interface TextinputExpandedObj { +export interface TextInputExpandedObj { + /** Flag to apply expanded styling. */ isExpanded: boolean; + /** Id of the element that the text input is controlling expansion of. */ ariaControls: string; } @@ -38,10 +40,10 @@ export interface TextInputProps className?: string; /** Flag to show if the text input is disabled. */ isDisabled?: boolean; - /** @deprecated 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 toe the element it is controlling. This should be used when the input controls a menu and tha menu is expanded. */ - expandedProps?: TextinputExpandedObj; + /** 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 */ @@ -201,7 +203,7 @@ export class TextInputBase extends React.Component