mirror of
https://github.com/ansible/awx.git
synced 2026-01-14 19:30:39 -03:30
add typeahead aria labels to all Select boxes
This commit is contained in:
parent
f807b76044
commit
77cc3306a5
@ -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}
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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)
|
||||
|
||||
@ -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) => {
|
||||
|
||||
@ -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.`
|
||||
)}
|
||||
>
|
||||
|
||||
@ -43,6 +43,7 @@ function BecomeMethodField({ fieldOptions, isRequired }) {
|
||||
>
|
||||
<Select
|
||||
ouiaId={`CredentialForm-${fieldOptions.id}`}
|
||||
typeAheadAriaLabel={fieldOptions.label}
|
||||
maxHeight={200}
|
||||
variant={SelectVariant.typeahead}
|
||||
onToggle={setIsOpen}
|
||||
|
||||
@ -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) =>
|
||||
|
||||
@ -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
|
||||
|
||||
@ -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 &&
|
||||
|
||||
@ -239,6 +239,7 @@ function NodeTypeStep({ i18n }) {
|
||||
setIsConvergenceOpen(false);
|
||||
}}
|
||||
aria-label={i18n._(t`Convergence select`)}
|
||||
typeAheadAriaLabel={i18n._(t`Convergence select`)}
|
||||
className="convergenceSelect"
|
||||
ouiaId="convergenceSelect"
|
||||
>
|
||||
|
||||
@ -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}
|
||||
>
|
||||
|
||||
@ -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);
|
||||
|
||||
@ -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);
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user