add typeahead aria labels to all Select boxes

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}

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>

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)

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) => {

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.`
             )}
           >

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}

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) =>

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

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 &&

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"
             >

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}
     >

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);

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);