add typeahead aria labels to all Select boxes

This commit is contained in:
Keith J. Grant 2021-04-13 09:37:37 -07:00
parent f807b76044
commit 77cc3306a5
13 changed files with 20 additions and 7 deletions

View File

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

View File

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

View File

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

View File

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

View File

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

View File

@ -43,6 +43,7 @@ function BecomeMethodField({ fieldOptions, isRequired }) {
>
<Select
ouiaId={`CredentialForm-${fieldOptions.id}`}
typeAheadAriaLabel={fieldOptions.label}
maxHeight={200}
variant={SelectVariant.typeahead}
onToggle={setIsOpen}

View File

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

View File

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

View File

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

View File

@ -239,6 +239,7 @@ function NodeTypeStep({ i18n }) {
setIsConvergenceOpen(false);
}}
aria-label={i18n._(t`Convergence select`)}
typeAheadAriaLabel={i18n._(t`Convergence select`)}
className="convergenceSelect"
ouiaId="convergenceSelect"
>

View File

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

View File

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

View File

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