From 30f08582ed115b8d2cf5b84310930c9be5552766 Mon Sep 17 00:00:00 2001 From: "Keith J. Grant" Date: Wed, 7 Apr 2021 14:57:05 -0700 Subject: [PATCH 01/12] add id to code editor input fields --- awx/ui_next/src/components/CodeEditor/CodeEditor.jsx | 10 +++++++--- .../src/components/CodeEditor/VariablesField.jsx | 3 ++- 2 files changed, 9 insertions(+), 4 deletions(-) diff --git a/awx/ui_next/src/components/CodeEditor/CodeEditor.jsx b/awx/ui_next/src/components/CodeEditor/CodeEditor.jsx index fac99894f4..501ece5bdb 100644 --- a/awx/ui_next/src/components/CodeEditor/CodeEditor.jsx +++ b/awx/ui_next/src/components/CodeEditor/CodeEditor.jsx @@ -96,11 +96,15 @@ function CodeEditor({ useEffect( function removeTextareaTabIndex() { const editorInput = editor.current.refEditor?.querySelector('textarea'); - if (editorInput && !readOnly) { + if (!editorInput) { + return; + } + if (!readOnly) { editorInput.tabIndex = -1; } + editorInput.id = id; }, - [readOnly] + [readOnly, id] ); const listen = useCallback(event => { @@ -144,7 +148,7 @@ function CodeEditor({ value={value} onFocus={onFocus} onBlur={onBlur} - name={id || 'code-editor'} + name={`${id}-editor` || 'code-editor'} editorProps={{ $blockScrolling: true }} fontSize={16} width="100%" diff --git a/awx/ui_next/src/components/CodeEditor/VariablesField.jsx b/awx/ui_next/src/components/CodeEditor/VariablesField.jsx index ed56f5376c..dba241e428 100644 --- a/awx/ui_next/src/components/CodeEditor/VariablesField.jsx +++ b/awx/ui_next/src/components/CodeEditor/VariablesField.jsx @@ -167,7 +167,7 @@ function VariablesFieldInternals({ - {tooltip && } + {tooltip && } Date: Thu, 8 Apr 2021 11:32:53 -0700 Subject: [PATCH 02/12] fix a11y labels on dashboard tabs --- .../src/screens/Dashboard/Dashboard.jsx | 145 +++++++++--------- 1 file changed, 76 insertions(+), 69 deletions(-) diff --git a/awx/ui_next/src/screens/Dashboard/Dashboard.jsx b/awx/ui_next/src/screens/Dashboard/Dashboard.jsx index c6d029cb67..78fea22c7d 100644 --- a/awx/ui_next/src/screens/Dashboard/Dashboard.jsx +++ b/awx/ui_next/src/screens/Dashboard/Dashboard.jsx @@ -170,86 +170,93 @@ function Dashboard({ i18n }) { aria-label={i18n._(t`Job status graph tab`)} eventKey={0} title={{i18n._(t`Job status`)}} - /> + > + + + + + + + + + + + + {i18n._(t`Recent Jobs`)}} - /> + > +
+ {activeTabId === 1 && ( + + )} +
+ {i18n._(t`Recent Templates`)} } - /> + > +
+ {activeTabId === 2 && ( + + )} +
+ - {activeTabId === 0 && ( - - - - - - - - - - - - )} - {activeTabId === 1 && } - {activeTabId === 2 && ( - - )} From be9622d03f1ee1d8f7acc1b377e6042c4e9546ae Mon Sep 17 00:00:00 2001 From: "Keith J. Grant" Date: Thu, 8 Apr 2021 16:08:54 -0700 Subject: [PATCH 03/12] fix missing ids/alt for a11y fixes --- awx/ui_next/src/components/AppContainer/AppContainer.jsx | 4 +++- awx/ui_next/src/components/AppContainer/BrandLogo.jsx | 4 +++- .../src/components/CodeEditor/VariablesDetail.jsx | 9 +++++++-- awx/ui_next/src/components/RoutedTabs/RoutedTabs.jsx | 3 +-- .../src/screens/Project/ProjectList/ProjectListItem.jsx | 2 +- 5 files changed, 15 insertions(+), 7 deletions(-) diff --git a/awx/ui_next/src/components/AppContainer/AppContainer.jsx b/awx/ui_next/src/components/AppContainer/AppContainer.jsx index 4c290adb41..241175be36 100644 --- a/awx/ui_next/src/components/AppContainer/AppContainer.jsx +++ b/awx/ui_next/src/components/AppContainer/AppContainer.jsx @@ -138,10 +138,12 @@ function AppContainer({ i18n, navRouteConfig = [], children }) { } }, [handleLogout, timeRemaining]); + const brandName = config?.license_info?.product_name || 'brand'; + const header = ( } + logo={} logoProps={{ href: '/' }} headerTools={ ; +const BrandLogo = ({ alt }) => ( + +); export default BrandLogo; diff --git a/awx/ui_next/src/components/CodeEditor/VariablesDetail.jsx b/awx/ui_next/src/components/CodeEditor/VariablesDetail.jsx index 797c10673d..1a0f07fb27 100644 --- a/awx/ui_next/src/components/CodeEditor/VariablesDetail.jsx +++ b/awx/ui_next/src/components/CodeEditor/VariablesDetail.jsx @@ -70,6 +70,7 @@ function VariablesDetail({ dataCy, helpText, value, label, rows, i18n }) { css="grid-column: 1 / -1" >
-
+
+ {tabsArray.map(tab => ( {tab.name}} - role="tab" /> ))} diff --git a/awx/ui_next/src/screens/Project/ProjectList/ProjectListItem.jsx b/awx/ui_next/src/screens/Project/ProjectList/ProjectListItem.jsx index 55c265cf0d..b9c902c4a8 100644 --- a/awx/ui_next/src/screens/Project/ProjectList/ProjectListItem.jsx +++ b/awx/ui_next/src/screens/Project/ProjectList/ProjectListItem.jsx @@ -98,7 +98,7 @@ function ProjectListItem({ /> - + {project.name} From 94038006aa19ef20a984fe7755e6b011ef1482ad Mon Sep 17 00:00:00 2001 From: "Keith J. Grant" Date: Fri, 9 Apr 2021 14:17:56 -0700 Subject: [PATCH 04/12] fix a11y bugs in RoutedTabs, UserList --- awx/ui_next/.eslintrc | 1 + awx/ui_next/src/components/RoutedTabs/RoutedTabs.jsx | 6 +++--- awx/ui_next/src/screens/User/UserList/UserListItem.jsx | 2 +- 3 files changed, 5 insertions(+), 4 deletions(-) diff --git a/awx/ui_next/.eslintrc b/awx/ui_next/.eslintrc index a648085d46..90c96ae87b 100644 --- a/awx/ui_next/.eslintrc +++ b/awx/ui_next/.eslintrc @@ -60,6 +60,7 @@ "mode", "aria-labelledby", "aria-hidden", + "aria-controls", "sortKey", "ouiaId", "credentialTypeNamespace", diff --git a/awx/ui_next/src/components/RoutedTabs/RoutedTabs.jsx b/awx/ui_next/src/components/RoutedTabs/RoutedTabs.jsx index d4d5336c11..11744603aa 100644 --- a/awx/ui_next/src/components/RoutedTabs/RoutedTabs.jsx +++ b/awx/ui_next/src/components/RoutedTabs/RoutedTabs.jsx @@ -3,8 +3,7 @@ import { shape, string, number, arrayOf, node, oneOfType } from 'prop-types'; import { Tab, Tabs, TabTitleText } from '@patternfly/react-core'; import { useHistory, useLocation } from 'react-router-dom'; -function RoutedTabs(props) { - const { tabsArray } = props; +function RoutedTabs({ tabsArray }) { const history = useHistory(); const location = useLocation(); @@ -36,8 +35,9 @@ function RoutedTabs(props) { aria-label={typeof tab.name === 'string' ? tab.name : null} eventKey={tab.id} key={tab.id} - link={tab.link} + href={tab.link} title={{tab.name}} + aria-controls="" /> ))} diff --git a/awx/ui_next/src/screens/User/UserList/UserListItem.jsx b/awx/ui_next/src/screens/User/UserList/UserListItem.jsx index 672e381c47..731d0eac2b 100644 --- a/awx/ui_next/src/screens/User/UserList/UserListItem.jsx +++ b/awx/ui_next/src/screens/User/UserList/UserListItem.jsx @@ -43,7 +43,7 @@ function UserListItem({ }} /> - + {user.username} {ldapUser && ( From 445b2fef8432253fdd444e534fe24eaa24056b23 Mon Sep 17 00:00:00 2001 From: "Keith J. Grant" Date: Mon, 12 Apr 2021 08:45:28 -0700 Subject: [PATCH 05/12] update VariablesField test for new id --- awx/ui_next/src/components/CodeEditor/VariablesField.test.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/awx/ui_next/src/components/CodeEditor/VariablesField.test.jsx b/awx/ui_next/src/components/CodeEditor/VariablesField.test.jsx index 24c896069e..3e6dd69b97 100644 --- a/awx/ui_next/src/components/CodeEditor/VariablesField.test.jsx +++ b/awx/ui_next/src/components/CodeEditor/VariablesField.test.jsx @@ -90,7 +90,7 @@ describe('VariablesField', () => { )} ); - expect(wrapper.find('Popover[data-cy="the-field"]').length).toBe(1); + expect(wrapper.find('Popover[data-cy="the-field-tooltip"]').length).toBe(1); }); it('should submit value through Formik', async () => { From 79118cfbe2fceb98a9ba1904537d25a74cba680d Mon Sep 17 00:00:00 2001 From: "Keith J. Grant" Date: Mon, 12 Apr 2021 09:42:36 -0700 Subject: [PATCH 06/12] fix Schedule tests --- .../CodeEditor/VariablesDetail.test.jsx | 4 +- .../src/components/Schedule/Schedule.test.jsx | 4 +- .../ScheduleList/ScheduleListItem.test.jsx | 54 +++++++++++-------- 3 files changed, 35 insertions(+), 27 deletions(-) diff --git a/awx/ui_next/src/components/CodeEditor/VariablesDetail.test.jsx b/awx/ui_next/src/components/CodeEditor/VariablesDetail.test.jsx index 2705f2b2cf..a9caa9a21f 100644 --- a/awx/ui_next/src/components/CodeEditor/VariablesDetail.test.jsx +++ b/awx/ui_next/src/components/CodeEditor/VariablesDetail.test.jsx @@ -42,12 +42,12 @@ describe('', () => { expect(input2.prop('value')).toEqual('foo: bar\n'); }); - test('should render label and value= --- when there are no values', () => { + test('should render label and value --- when there are no values', () => { const wrapper = mountWithContexts( ); expect(wrapper.find('VariablesDetail___StyledCodeEditor').length).toBe(1); - expect(wrapper.find('div.pf-c-form__label').text()).toBe('Variables'); + expect(wrapper.find('.pf-c-form__label').text()).toBe('Variables'); }); test('should update value if prop changes', () => { diff --git a/awx/ui_next/src/components/Schedule/Schedule.test.jsx b/awx/ui_next/src/components/Schedule/Schedule.test.jsx index 280c6af6bb..6082df1a95 100644 --- a/awx/ui_next/src/components/Schedule/Schedule.test.jsx +++ b/awx/ui_next/src/components/Schedule/Schedule.test.jsx @@ -121,8 +121,8 @@ describe('', () => { }); test('expect all tabs to exist, including Back to Schedules', async () => { expect( - wrapper.find('button[link="/templates/job_template/1/schedules"]').length + wrapper.find('a[href="/templates/job_template/1/schedules"]').length ).toBe(1); - expect(wrapper.find('button[aria-label="Details"]').length).toBe(1); + expect(wrapper.find('a[aria-label="Details"]').length).toBe(1); }); }); diff --git a/awx/ui_next/src/components/Schedule/ScheduleList/ScheduleListItem.test.jsx b/awx/ui_next/src/components/Schedule/ScheduleList/ScheduleListItem.test.jsx index ccf5fa8855..394128a095 100644 --- a/awx/ui_next/src/components/Schedule/ScheduleList/ScheduleListItem.test.jsx +++ b/awx/ui_next/src/components/Schedule/ScheduleList/ScheduleListItem.test.jsx @@ -50,13 +50,17 @@ describe('ScheduleListItem', () => { describe('User has edit permissions', () => { beforeAll(() => { wrapper = mountWithContexts( - + + + + +
); }); @@ -190,22 +194,26 @@ describe('ScheduleListItem', () => { describe('schedule has missing prompt data', () => { beforeAll(() => { wrapper = mountWithContexts( - + + + + +
); }); From c738772cd5cdd5d8c9101730031a567da232fba9 Mon Sep 17 00:00:00 2001 From: "Keith J. Grant" Date: Mon, 12 Apr 2021 09:45:43 -0700 Subject: [PATCH 07/12] translate brand logo alt text --- awx/ui_next/src/components/AppContainer/AppContainer.jsx | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/awx/ui_next/src/components/AppContainer/AppContainer.jsx b/awx/ui_next/src/components/AppContainer/AppContainer.jsx index 241175be36..ede56b2862 100644 --- a/awx/ui_next/src/components/AppContainer/AppContainer.jsx +++ b/awx/ui_next/src/components/AppContainer/AppContainer.jsx @@ -138,12 +138,13 @@ function AppContainer({ i18n, navRouteConfig = [], children }) { } }, [handleLogout, timeRemaining]); - const brandName = config?.license_info?.product_name || 'brand'; + const brandName = config?.license_info?.product_name; + const alt = brandName ? i18n._(t`${brandName} logo`) : i18n._(t`brand logo`); const header = ( } + logo={} logoProps={{ href: '/' }} headerTools={ } + logo={} headerTools={ From ac0f5342089cd2551d754d716e1c1a022233129c Mon Sep 17 00:00:00 2001 From: "Keith J. Grant" Date: Mon, 12 Apr 2021 11:36:39 -0700 Subject: [PATCH 08/12] update inventory group tests --- .../Inventory/InventoryGroup/InventoryGroup.test.jsx | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/awx/ui_next/src/screens/Inventory/InventoryGroup/InventoryGroup.test.jsx b/awx/ui_next/src/screens/Inventory/InventoryGroup/InventoryGroup.test.jsx index 6087abd9ac..670f651d85 100644 --- a/awx/ui_next/src/screens/Inventory/InventoryGroup/InventoryGroup.test.jsx +++ b/awx/ui_next/src/screens/Inventory/InventoryGroup/InventoryGroup.test.jsx @@ -65,11 +65,11 @@ describe('', () => { test('expect all tabs to exist, including Back to Groups', async () => { expect( - wrapper.find('button[link="/inventories/inventory/1/groups"]').length + wrapper.find('a[href="/inventories/inventory/1/groups"]').length ).toBe(1); - expect(wrapper.find('button[aria-label="Details"]').length).toBe(1); - expect(wrapper.find('button[aria-label="Related Groups"]').length).toBe(1); - expect(wrapper.find('button[aria-label="Hosts"]').length).toBe(1); + expect(wrapper.find('a[aria-label="Details"]').length).toBe(1); + expect(wrapper.find('a[aria-label="Related Groups"]').length).toBe(1); + expect(wrapper.find('a[aria-label="Hosts"]').length).toBe(1); }); test('should show content error when user attempts to navigate to erroneous route', async () => { From f807b76044e54871243e35a388b69f3d9d0e7561 Mon Sep 17 00:00:00 2001 From: "Keith J. Grant" Date: Mon, 12 Apr 2021 15:36:33 -0700 Subject: [PATCH 09/12] revert RoutedTabs to buttons pending PF fix --- awx/ui_next/src/components/RoutedTabs/RoutedTabs.jsx | 2 +- awx/ui_next/src/components/Schedule/Schedule.test.jsx | 4 ++-- .../Inventory/InventoryGroup/InventoryGroup.test.jsx | 8 ++++---- 3 files changed, 7 insertions(+), 7 deletions(-) diff --git a/awx/ui_next/src/components/RoutedTabs/RoutedTabs.jsx b/awx/ui_next/src/components/RoutedTabs/RoutedTabs.jsx index 11744603aa..b29f0b9896 100644 --- a/awx/ui_next/src/components/RoutedTabs/RoutedTabs.jsx +++ b/awx/ui_next/src/components/RoutedTabs/RoutedTabs.jsx @@ -35,7 +35,7 @@ function RoutedTabs({ tabsArray }) { aria-label={typeof tab.name === 'string' ? tab.name : null} eventKey={tab.id} key={tab.id} - href={tab.link} + link={tab.link} title={{tab.name}} aria-controls="" /> diff --git a/awx/ui_next/src/components/Schedule/Schedule.test.jsx b/awx/ui_next/src/components/Schedule/Schedule.test.jsx index 6082df1a95..280c6af6bb 100644 --- a/awx/ui_next/src/components/Schedule/Schedule.test.jsx +++ b/awx/ui_next/src/components/Schedule/Schedule.test.jsx @@ -121,8 +121,8 @@ describe('', () => { }); test('expect all tabs to exist, including Back to Schedules', async () => { expect( - wrapper.find('a[href="/templates/job_template/1/schedules"]').length + wrapper.find('button[link="/templates/job_template/1/schedules"]').length ).toBe(1); - expect(wrapper.find('a[aria-label="Details"]').length).toBe(1); + expect(wrapper.find('button[aria-label="Details"]').length).toBe(1); }); }); diff --git a/awx/ui_next/src/screens/Inventory/InventoryGroup/InventoryGroup.test.jsx b/awx/ui_next/src/screens/Inventory/InventoryGroup/InventoryGroup.test.jsx index 670f651d85..6087abd9ac 100644 --- a/awx/ui_next/src/screens/Inventory/InventoryGroup/InventoryGroup.test.jsx +++ b/awx/ui_next/src/screens/Inventory/InventoryGroup/InventoryGroup.test.jsx @@ -65,11 +65,11 @@ describe('', () => { test('expect all tabs to exist, including Back to Groups', async () => { expect( - wrapper.find('a[href="/inventories/inventory/1/groups"]').length + wrapper.find('button[link="/inventories/inventory/1/groups"]').length ).toBe(1); - expect(wrapper.find('a[aria-label="Details"]').length).toBe(1); - expect(wrapper.find('a[aria-label="Related Groups"]').length).toBe(1); - expect(wrapper.find('a[aria-label="Hosts"]').length).toBe(1); + expect(wrapper.find('button[aria-label="Details"]').length).toBe(1); + expect(wrapper.find('button[aria-label="Related Groups"]').length).toBe(1); + expect(wrapper.find('button[aria-label="Hosts"]').length).toBe(1); }); test('should show content error when user attempts to navigate to erroneous route', async () => { From 77cc3306a5d204c496255637637dba034bb6f8f0 Mon Sep 17 00:00:00 2001 From: "Keith J. Grant" Date: Tue, 13 Apr 2021 09:37:37 -0700 Subject: [PATCH 10/12] add typeahead aria labels to all Select boxes --- .../src/components/FieldWithPrompt/FieldWithPrompt.jsx | 2 +- awx/ui_next/src/components/MultiSelect/TagMultiSelect.jsx | 3 ++- awx/ui_next/src/components/Search/Search.jsx | 2 ++ awx/ui_next/src/screens/ActivityStream/ActivityStream.jsx | 1 + .../src/screens/Credential/shared/CredentialForm.jsx | 3 ++- .../shared/CredentialFormFields/BecomeMethodField.jsx | 1 + awx/ui_next/src/screens/Dashboard/Dashboard.jsx | 1 + .../Inventory/shared/InventorySourceSubForms/SCMSubForm.jsx | 1 + .../src/screens/Template/Survey/SurveyPreviewModal.jsx | 2 ++ .../Modals/NodeModals/NodeTypeStep/NodeTypeStep.jsx | 1 + awx/ui_next/src/screens/Template/shared/LabelSelect.jsx | 3 ++- awx/ui_next/src/screens/Template/shared/PlaybookSelect.jsx | 1 + .../src/screens/Template/shared/WorkflowJobTemplateForm.jsx | 6 +++--- 13 files changed, 20 insertions(+), 7 deletions(-) diff --git a/awx/ui_next/src/components/FieldWithPrompt/FieldWithPrompt.jsx b/awx/ui_next/src/components/FieldWithPrompt/FieldWithPrompt.jsx index 8c9051e67e..4617d0284c 100644 --- a/awx/ui_next/src/components/FieldWithPrompt/FieldWithPrompt.jsx +++ b/awx/ui_next/src/components/FieldWithPrompt/FieldWithPrompt.jsx @@ -39,7 +39,7 @@ function FieldWithPrompt({ )} - {tooltip && } + {tooltip && }
{renderOptions(options)} diff --git a/awx/ui_next/src/components/Search/Search.jsx b/awx/ui_next/src/components/Search/Search.jsx index 2c38f98793..31478f8b81 100644 --- a/awx/ui_next/src/components/Search/Search.jsx +++ b/awx/ui_next/src/components/Search/Search.jsx @@ -175,6 +175,7 @@ function Search({ variant={SelectVariant.single} className="simpleKeySelect" aria-label={i18n._(t`Simple key select`)} + typeAheadAriaLabel={i18n._(t`Simple key select`)} onToggle={setIsSearchDropdownOpen} onSelect={handleDropdownSelect} selections={searchColumnName} @@ -212,6 +213,7 @@ function Search({ diff --git a/awx/ui_next/src/screens/Inventory/shared/InventorySourceSubForms/SCMSubForm.jsx b/awx/ui_next/src/screens/Inventory/shared/InventorySourceSubForms/SCMSubForm.jsx index e874157d99..c04f471f32 100644 --- a/awx/ui_next/src/screens/Inventory/shared/InventorySourceSubForms/SCMSubForm.jsx +++ b/awx/ui_next/src/screens/Inventory/shared/InventorySourceSubForms/SCMSubForm.jsx @@ -125,6 +125,7 @@ const SCMSubForm = ({ autoPopulateProject, i18n }) => { sourcePathHelpers.setValue(value); }} aria-label={i18n._(t`Select source path`)} + typeAheadAriaLabel={i18n._(t`Select source path`)} placeholder={i18n._(t`Select source path`)} createText={i18n._(t`Set source path to`)} isCreatable diff --git a/awx/ui_next/src/screens/Template/Survey/SurveyPreviewModal.jsx b/awx/ui_next/src/screens/Template/Survey/SurveyPreviewModal.jsx index 1b1086e6b2..0a1e57d0c9 100644 --- a/awx/ui_next/src/screens/Template/Survey/SurveyPreviewModal.jsx +++ b/awx/ui_next/src/screens/Template/Survey/SurveyPreviewModal.jsx @@ -88,6 +88,7 @@ function SurveyPreviewModal({ id={`survey-preview-multipleChoice-${q.variable}`} isDisabled aria-label={i18n._(t`Multiple Choice`)} + typeAheadAriaLabel={i18n._(t`Multiple Choice`)} placeholderText={q.default} onToggle={() => {}} /> @@ -109,6 +110,7 @@ function SurveyPreviewModal({ } onToggle={() => {}} aria-label={i18n._(t`Multi-Select`)} + typeAheadAriaLabel={i18n._(t`Multi-Select`)} id={`survey-preview-multiSelect-${q.variable}`} > {q.choices.length > 0 && diff --git a/awx/ui_next/src/screens/Template/WorkflowJobTemplateVisualizer/Modals/NodeModals/NodeTypeStep/NodeTypeStep.jsx b/awx/ui_next/src/screens/Template/WorkflowJobTemplateVisualizer/Modals/NodeModals/NodeTypeStep/NodeTypeStep.jsx index 3ae4894e85..59d0872826 100644 --- a/awx/ui_next/src/screens/Template/WorkflowJobTemplateVisualizer/Modals/NodeModals/NodeTypeStep/NodeTypeStep.jsx +++ b/awx/ui_next/src/screens/Template/WorkflowJobTemplateVisualizer/Modals/NodeModals/NodeTypeStep/NodeTypeStep.jsx @@ -239,6 +239,7 @@ function NodeTypeStep({ i18n }) { setIsConvergenceOpen(false); }} aria-label={i18n._(t`Convergence select`)} + typeAheadAriaLabel={i18n._(t`Convergence select`)} className="convergenceSelect" ouiaId="convergenceSelect" > diff --git a/awx/ui_next/src/screens/Template/shared/LabelSelect.jsx b/awx/ui_next/src/screens/Template/shared/LabelSelect.jsx index 539947738f..5bd8da9add 100644 --- a/awx/ui_next/src/screens/Template/shared/LabelSelect.jsx +++ b/awx/ui_next/src/screens/Template/shared/LabelSelect.jsx @@ -1,6 +1,7 @@ import React, { useState, useEffect } from 'react'; import { func, arrayOf, number, shape, string, oneOfType } from 'prop-types'; import { Select, SelectOption, SelectVariant } from '@patternfly/react-core'; +import { t } from '@lingui/macro'; import { LabelsAPI } from '../../../api'; import { useSyncedSelectValue } from '../../../components/MultiSelect'; @@ -84,7 +85,7 @@ function LabelSelect({ value, placeholder, onChange, onError, createText }) { isDisabled={isLoading} selections={selections} isOpen={isExpanded} - aria-labelledby="label-select" + typeAheadAriaLabel={t`Select Labels`} placeholderText={placeholder} createText={createText} > diff --git a/awx/ui_next/src/screens/Template/shared/PlaybookSelect.jsx b/awx/ui_next/src/screens/Template/shared/PlaybookSelect.jsx index ad47f2d4c1..313a89fb40 100644 --- a/awx/ui_next/src/screens/Template/shared/PlaybookSelect.jsx +++ b/awx/ui_next/src/screens/Template/shared/PlaybookSelect.jsx @@ -56,6 +56,7 @@ function PlaybookSelect({ selections={selected} onToggle={setIsOpen} placeholderText={i18n._(t`Select a playbook`)} + typeAheadAriaLabel={i18n._(t`Select a playbook`)} isCreateable={false} onSelect={(event, value) => { setIsOpen(false); diff --git a/awx/ui_next/src/screens/Template/shared/WorkflowJobTemplateForm.jsx b/awx/ui_next/src/screens/Template/shared/WorkflowJobTemplateForm.jsx index a1891d26f0..6ee8446415 100644 --- a/awx/ui_next/src/screens/Template/shared/WorkflowJobTemplateForm.jsx +++ b/awx/ui_next/src/screens/Template/shared/WorkflowJobTemplateForm.jsx @@ -159,7 +159,7 @@ function WorkflowJobTemplateForm({ )} { scmHelpers.setValue(value); From 1dc3b80c689595c623afab3324eeb9d9857c0c24 Mon Sep 17 00:00:00 2001 From: "Keith J. Grant" Date: Tue, 13 Apr 2021 12:09:40 -0700 Subject: [PATCH 11/12] add missing titles/labels, remove duplicate IDs --- .../src/components/PaginatedTable/PaginatedTable.jsx | 3 +++ awx/ui_next/src/screens/Dashboard/shared/LineChart.jsx | 2 +- ...List.test.jsx => ExecutionEnvironmentList.test.jsx} | 0 .../ExecutionEnvironmentListItem.jsx | 10 +++------- 4 files changed, 7 insertions(+), 8 deletions(-) rename awx/ui_next/src/screens/ExecutionEnvironment/ExecutionEnvironmentList/{ExecutionEnviromentList.test.jsx => ExecutionEnvironmentList.test.jsx} (100%) diff --git a/awx/ui_next/src/components/PaginatedTable/PaginatedTable.jsx b/awx/ui_next/src/components/PaginatedTable/PaginatedTable.jsx index 2d33fe1e66..ffd9878d60 100644 --- a/awx/ui_next/src/components/PaginatedTable/PaginatedTable.jsx +++ b/awx/ui_next/src/components/PaginatedTable/PaginatedTable.jsx @@ -123,6 +123,9 @@ function PaginatedTable({ } onSetPage={handleSetPage} onPerPageSelect={handleSetPageSize} + titles={{ + paginationTitle: t`Top Pagination`, + }} /> ); diff --git a/awx/ui_next/src/screens/Dashboard/shared/LineChart.jsx b/awx/ui_next/src/screens/Dashboard/shared/LineChart.jsx index 922605a3ad..cebd59c7a3 100644 --- a/awx/ui_next/src/screens/Dashboard/shared/LineChart.jsx +++ b/awx/ui_next/src/screens/Dashboard/shared/LineChart.jsx @@ -248,7 +248,7 @@ function LineChart({ id, data, height, i18n, pageContext }) { .style('fill', () => colors(0)) .attr('cx', d => x(d.DATE)) .attr('cy', d => y(d.FAIL)) - .attr('id', d => `success-dot-${dateFormat(d.DATE)}`) + .attr('id', d => `fail-dot-${dateFormat(d.DATE)}`) .on('mouseover', handleMouseOver) .on('mousemove', handleMouseMove) .on('mouseout', handleMouseOut); diff --git a/awx/ui_next/src/screens/ExecutionEnvironment/ExecutionEnvironmentList/ExecutionEnviromentList.test.jsx b/awx/ui_next/src/screens/ExecutionEnvironment/ExecutionEnvironmentList/ExecutionEnvironmentList.test.jsx similarity index 100% rename from awx/ui_next/src/screens/ExecutionEnvironment/ExecutionEnvironmentList/ExecutionEnviromentList.test.jsx rename to awx/ui_next/src/screens/ExecutionEnvironment/ExecutionEnvironmentList/ExecutionEnvironmentList.test.jsx diff --git a/awx/ui_next/src/screens/ExecutionEnvironment/ExecutionEnvironmentList/ExecutionEnvironmentListItem.jsx b/awx/ui_next/src/screens/ExecutionEnvironment/ExecutionEnvironmentList/ExecutionEnvironmentListItem.jsx index ab38b3e00a..05655925f4 100644 --- a/awx/ui_next/src/screens/ExecutionEnvironment/ExecutionEnvironmentList/ExecutionEnvironmentListItem.jsx +++ b/awx/ui_next/src/screens/ExecutionEnvironment/ExecutionEnvironmentList/ExecutionEnvironmentListItem.jsx @@ -43,8 +43,6 @@ function ExecutionEnvironmentListItem({ setIsDisabled(false); }, []); - const labelId = `check-action-${executionEnvironment.id}`; - return ( - + {executionEnvironment.name} - - {executionEnvironment.image} - - + {executionEnvironment.image} + {executionEnvironment.organization ? ( Date: Tue, 13 Apr 2021 13:11:27 -0700 Subject: [PATCH 12/12] update tests to match new ids --- .../FieldWithPrompt/FieldWithPrompt.test.jsx | 6 +++--- .../shared/WorkflowJobTemplateForm.test.jsx | 16 ++++------------ 2 files changed, 7 insertions(+), 15 deletions(-) diff --git a/awx/ui_next/src/components/FieldWithPrompt/FieldWithPrompt.test.jsx b/awx/ui_next/src/components/FieldWithPrompt/FieldWithPrompt.test.jsx index fcc079875f..21d24444b1 100644 --- a/awx/ui_next/src/components/FieldWithPrompt/FieldWithPrompt.test.jsx +++ b/awx/ui_next/src/components/FieldWithPrompt/FieldWithPrompt.test.jsx @@ -61,8 +61,8 @@ describe('FieldWithPrompt', () => { ); expect(wrapper.find('.pf-c-form__label-required')).toHaveLength(1); - expect(wrapper.find('Popover[data-cy="job-template-limit"]').length).toBe( - 1 - ); + expect( + wrapper.find('Popover[data-cy="job-template-limit-tooltip"]').length + ).toBe(1); }); }); diff --git a/awx/ui_next/src/screens/Template/shared/WorkflowJobTemplateForm.test.jsx b/awx/ui_next/src/screens/Template/shared/WorkflowJobTemplateForm.test.jsx index ccea65a8b9..f1e81f2fd6 100644 --- a/awx/ui_next/src/screens/Template/shared/WorkflowJobTemplateForm.test.jsx +++ b/awx/ui_next/src/screens/Template/shared/WorkflowJobTemplateForm.test.jsx @@ -226,22 +226,14 @@ describe('', () => { test('test changes in FieldWithPrompt', async () => { await act(async () => { - wrapper.find('TextInputBase#text-wfjt-scm-branch').prop('onChange')( - 'main' - ); - wrapper.find('TextInputBase#text-wfjt-limit').prop('onChange')( - 1234567890 - ); + wrapper.find('TextInputBase#wfjt-scm-branch').prop('onChange')('main'); + wrapper.find('TextInputBase#wfjt-limit').prop('onChange')(1234567890); }); wrapper.update(); - expect(wrapper.find('input#text-wfjt-scm-branch').prop('value')).toEqual( - 'main' - ); - expect(wrapper.find('input#text-wfjt-limit').prop('value')).toEqual( - 1234567890 - ); + expect(wrapper.find('input#wfjt-scm-branch').prop('value')).toEqual('main'); + expect(wrapper.find('input#wfjt-limit').prop('value')).toEqual(1234567890); }); test('webhooks and enable concurrent jobs functions properly', async () => {