From 77cc3306a5d204c496255637637dba034bb6f8f0 Mon Sep 17 00:00:00 2001
From: "Keith J. Grant" <barkeep@keithjgrant.com>
Date: Tue, 13 Apr 2021 09:37:37 -0700
Subject: [PATCH] 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({
               </span>
             )}
           </label>
-          {tooltip && <Popover content={tooltip} id={fieldId} />}
+          {tooltip && <Popover content={tooltip} id={`${fieldId}-tooltip`} />}
         </div>
         <StyledCheckboxField
           isDisabled={isDisabled}
diff --git a/awx/ui_next/src/components/MultiSelect/TagMultiSelect.jsx b/awx/ui_next/src/components/MultiSelect/TagMultiSelect.jsx
index 473db38932..f75841f40b 100644
--- a/awx/ui_next/src/components/MultiSelect/TagMultiSelect.jsx
+++ b/awx/ui_next/src/components/MultiSelect/TagMultiSelect.jsx
@@ -1,5 +1,6 @@
 import React, { useState } from 'react';
 import { func, string } from 'prop-types';
+import { t } from '@lingui/macro';
 import { Select, SelectOption, SelectVariant } from '@patternfly/react-core';
 import { arrayToString, stringToArray } from '../../util/strings';
 
@@ -51,7 +52,7 @@ function TagMultiSelect({ onChange, value }) {
       }}
       selections={selections}
       isOpen={isExpanded}
-      aria-labelledby="tag-select"
+      typeAheadAriaLabel={t`Select tags`}
     >
       {renderOptions(options)}
     </Select>
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({
                 <Select
                   variant={SelectVariant.checkbox}
                   aria-label={name}
+                  typeAheadAriaLabel={name}
                   onToggle={setIsFilterDropdownOpen}
                   onSelect={(event, selection) =>
                     handleFilterDropdownSelect(key, event, selection)
diff --git a/awx/ui_next/src/screens/ActivityStream/ActivityStream.jsx b/awx/ui_next/src/screens/ActivityStream/ActivityStream.jsx
index 266dc067cc..f67970ff90 100644
--- a/awx/ui_next/src/screens/ActivityStream/ActivityStream.jsx
+++ b/awx/ui_next/src/screens/ActivityStream/ActivityStream.jsx
@@ -126,6 +126,7 @@ function ActivityStream({ i18n }) {
           maxHeight="480px"
           variant={SelectVariant.single}
           aria-labelledby="grouped-type-select-id"
+          typeAheadAriaLabel={t`Select an activity type`}
           className="activityTypeSelect"
           onToggle={setIsTypeDropdownOpen}
           onSelect={(event, selection) => {
diff --git a/awx/ui_next/src/screens/Credential/shared/CredentialForm.jsx b/awx/ui_next/src/screens/Credential/shared/CredentialForm.jsx
index 9d69aa7d13..fa24a5ffd4 100644
--- a/awx/ui_next/src/screens/Credential/shared/CredentialForm.jsx
+++ b/awx/ui_next/src/screens/Credential/shared/CredentialForm.jsx
@@ -138,6 +138,7 @@ function CredentialFormFields({ i18n, initialTypeId, credentialTypes }) {
       isDisabled={isCredentialTypeDisabled}
       ouiaId="CredentialForm-credential_type"
       aria-label={i18n._(t`Credential Type`)}
+      typeAheadAriaLabel={i18n._(t`Select Credential Type`)}
       isOpen={isSelectOpen}
       variant={SelectVariant.typeahead}
       onToggle={setIsSelectOpen}
@@ -203,7 +204,7 @@ function CredentialFormFields({ i18n, initialTypeId, credentialTypes }) {
         {isCredentialTypeDisabled ? (
           <Tooltip
             content={i18n._(
-              `You cannot change the credential type of a credential, 
+              `You cannot change the credential type of a credential,
               as it may break the functionality of the resources using it.`
             )}
           >
diff --git a/awx/ui_next/src/screens/Credential/shared/CredentialFormFields/BecomeMethodField.jsx b/awx/ui_next/src/screens/Credential/shared/CredentialFormFields/BecomeMethodField.jsx
index fb65816888..57b346497b 100644
--- a/awx/ui_next/src/screens/Credential/shared/CredentialFormFields/BecomeMethodField.jsx
+++ b/awx/ui_next/src/screens/Credential/shared/CredentialFormFields/BecomeMethodField.jsx
@@ -43,6 +43,7 @@ function BecomeMethodField({ fieldOptions, isRequired }) {
     >
       <Select
         ouiaId={`CredentialForm-${fieldOptions.id}`}
+        typeAheadAriaLabel={fieldOptions.label}
         maxHeight={200}
         variant={SelectVariant.typeahead}
         onToggle={setIsOpen}
diff --git a/awx/ui_next/src/screens/Dashboard/Dashboard.jsx b/awx/ui_next/src/screens/Dashboard/Dashboard.jsx
index 78fea22c7d..d135a813f1 100644
--- a/awx/ui_next/src/screens/Dashboard/Dashboard.jsx
+++ b/awx/ui_next/src/screens/Dashboard/Dashboard.jsx
@@ -178,6 +178,7 @@ function Dashboard({ i18n }) {
                         variant={SelectVariant.single}
                         placeholderText={i18n._(t`Select period`)}
                         aria-label={i18n._(t`Select period`)}
+                        typeAheadAriaLabel={i18n._(t`Select period`)}
                         className="periodSelect"
                         onToggle={setIsPeriodDropdownOpen}
                         onSelect={(event, selection) =>
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({
             )}
         </>
         <FieldWithPrompt
-          fieldId="wjft-limit"
+          fieldId="wfjt-limit"
           label={i18n._(t`Limit`)}
           promptId="template-ask-limit-on-launch"
           promptName="ask_limit_on_launch"
@@ -169,7 +169,7 @@ function WorkflowJobTemplateForm({
                   documentation for more information and examples on patterns.`)}
         >
           <TextInput
-            id="text-wfjt-limit"
+            id="wfjt-limit"
             {...limitField}
             validated={
               !limitMeta.touched || !limitMeta.error ? 'default' : 'error'
@@ -190,7 +190,7 @@ function WorkflowJobTemplateForm({
           )}
         >
           <TextInput
-            id="text-wfjt-scm-branch"
+            id="wfjt-scm-branch"
             {...scmField}
             onChange={value => {
               scmHelpers.setValue(value);