External-Mirrors/awx
2
0
Fork 0
mirror of https://github.com/ansible/awx.git synced 2026-01-22 23:18:03 -03:30
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #10713 from keithjgrant/10563-a11y-fixes

Browse Source 
Fix multiple accessibility violations
This commit is contained in:
Keith Grant 2021-07-23 10:36:21 -07:00 committed by GitHub
commit e9b7f9ac40
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
16 changed files with 41 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
awx/ui_next/src/components/DetailList/CodeDetail.js
View File

@ -17,6 +17,7 @@ import Popover from '../Popover';
function CodeDetail({ value, label, mode, rows, helpText, dataCy }) {
const labelCy = dataCy ? `${dataCy}-label` : null;
const valueCy = dataCy ? `${dataCy}-value` : null;
const editorId = dataCy ? `${dataCy}-editor` : 'code-editor';
return (
<>
@ -27,12 +28,13 @@ function CodeDetail({ value, label, mode, rows, helpText, dataCy }) {
data-cy={labelCy}
>
<div className="pf-c-form__label">
<span
<label
htmlFor={editorId}
className="pf-c-form__label-text"
css="font-weight: var(--pf-global--FontWeight--bold)"
>
{label}
</span>
</label>
{helpText && (
<Popover header={label} content={helpText} id={dataCy} />
)}
@ -45,6 +47,7 @@ function CodeDetail({ value, label, mode, rows, helpText, dataCy }) {
data-cy={valueCy}
>
<CodeEditor
id={editorId}
mode={mode}
value={value}
readOnly

2
awx/ui_next/src/components/DetailList/Detail.js
View File

@ -29,7 +29,7 @@ const DetailValue = styled(
${(props) =>
(props.isEncrypted || props.isNotConfigured) &&
`
color: var(--pf-global--Color--400);
color: var(--pf-global--disabled-color--100);
`}
`;

9
awx/ui_next/src/components/ExecutionEnvironmentDetail/ExecutionEnvironmentDetail.js
View File

@ -30,6 +30,7 @@ function ExecutionEnvironmentDetail({
virtualEnvironment,
verifyMissingVirtualEnv,
helpText,
dataCy,
}) {
const config = useConfig();
const docsLink = `${getDocsBaseUrl(
@ -51,7 +52,7 @@ function ExecutionEnvironmentDetail({
</Link>
}
helpText={helpText}
dataCy="execution-environment-detail"
dataCy={dataCy}
/>
);
}
@ -89,7 +90,7 @@ function ExecutionEnvironmentDetail({
</span>
</>
}
dataCy="missing-execution-environment-detail"
dataCy={`missing-${dataCy}`}
/>
);
}
@ -113,7 +114,7 @@ function ExecutionEnvironmentDetail({
</span>
</>
}
dataCy="execution-environment-detail"
dataCy={dataCy}
/>
);
}
@ -127,6 +128,7 @@ ExecutionEnvironmentDetail.propTypes = {
virtualEnvironment: string,
verifyMissingVirtualEnv: bool,
helpText: string,
dataCy: string,
};
ExecutionEnvironmentDetail.defaultProps = {
@ -135,6 +137,7 @@ ExecutionEnvironmentDetail.defaultProps = {
virtualEnvironment: '',
verifyMissingVirtualEnv: true,
helpText: '',
dataCy: 'execution-environment-detail',
};
export default ExecutionEnvironmentDetail;

2
awx/ui_next/src/components/JobList/JobListItem.js
View File

@ -124,6 +124,7 @@ function JobListItem({
<ReLaunchDropDown
handleRelaunch={handleRelaunch}
isLaunching={isLaunching}
id={`relaunch-job-${job.id}`}
/>
)}
</LaunchButton>
@ -214,6 +215,7 @@ function JobListItem({
<ExecutionEnvironmentDetail
executionEnvironment={execution_environment}
verifyMissingVirtualEnv={false}
dataCy={`execution-environment-detail-${job.id}`}
/>
)}
{credentials && credentials.length > 0 && (

6
awx/ui_next/src/components/LaunchButton/ReLaunchDropDown.js
View File

@ -15,7 +15,7 @@ function ReLaunchDropDown({
isPrimary = false,
handleRelaunch,
isLaunching,
id = 'relaunch-job',
ouiaId,
}) {
const [isOpen, setIsOpen] = useState(false);
@ -75,7 +75,7 @@ function ReLaunchDropDown({
toggleIndicator={null}
onToggle={onToggle}
aria-label={t`relaunch jobs`}
id="relaunch_jobs"
id={id}
isPrimary
>
{t`Relaunch`}
@ -97,7 +97,7 @@ function ReLaunchDropDown({
toggleIndicator={null}
onToggle={onToggle}
aria-label={t`relaunch jobs`}
id="relaunch_jobs"
id={id}
>
<RocketIcon />
</DropdownToggle>

7
awx/ui_next/src/components/Lookup/ExecutionEnvironmentLookup.js
View File

@ -20,6 +20,7 @@ const QS_CONFIG = getQSConfig('execution_environments', {
});
function ExecutionEnvironmentLookup({
id,
globallyAvailable,
helperTextInvalid,
isDefaultEnvironment,
@ -154,7 +155,7 @@ function ExecutionEnvironmentLookup({
const renderLookup = () => (
<>
<Lookup
id="execution-environments"
id={id}
header={t`Execution Environment`}
value={value}
onBlur={onBlur}
@ -213,7 +214,7 @@ function ExecutionEnvironmentLookup({
return (
<FormGroup
fieldId="execution-environment-lookup"
fieldId={id}
label={renderLabel(isGlobalDefaultEnvironment, isDefaultEnvironment)}
labelIcon={popoverContent && <Popover content={popoverContent} />}
helperTextInvalid={helperTextInvalid}
@ -231,6 +232,7 @@ function ExecutionEnvironmentLookup({
}
ExecutionEnvironmentLookup.propTypes = {
id: string,
value: ExecutionEnvironment,
popoverContent: string,
onChange: func.isRequired,
@ -243,6 +245,7 @@ ExecutionEnvironmentLookup.propTypes = {
};
ExecutionEnvironmentLookup.defaultProps = {
id: 'execution-environments',
popoverContent: '',
isDefaultEnvironment: false,
isGlobalDefaultEnvironment: false,

2
awx/ui_next/src/components/Lookup/InventoryLookup.js
View File

@ -236,6 +236,7 @@ function InventoryLookup({
}
InventoryLookup.propTypes = {
fieldId: string,
value: Inventory,
onChange: func.isRequired,
required: bool,
@ -247,6 +248,7 @@ InventoryLookup.propTypes = {
};
InventoryLookup.defaultProps = {
fieldId: 'inventory',
value: null,
required: false,
isOverrideDisabled: false,

4
awx/ui_next/src/components/Lookup/Lookup.js
View File

@ -128,7 +128,7 @@ function Lookup(props) {
<InputGroup onBlur={onBlur}>
<Button
aria-label={t`Search`}
id={id}
id={`${id}-open`}
onClick={() => dispatch({ type: 'TOGGLE_MODAL' })}
variant={ButtonVariant.control}
isDisabled={isLoading || isDisabled}
@ -149,7 +149,7 @@ function Lookup(props) {
</ChipHolder>
) : (
<TextInput
id={`${id}-input`}
id={id}
value={typedText}
onChange={(inputValue) => {
setTypedText(inputValue);

7
awx/ui_next/src/components/Lookup/OrganizationLookup.js
View File

@ -19,6 +19,7 @@ const QS_CONFIG = getQSConfig('organizations', {
});
function OrganizationLookup({
id,
helperTextInvalid,
isValid,
onBlur,
@ -94,7 +95,7 @@ function OrganizationLookup({
return (
<FormGroup
fieldId="organization"
fieldId={id}
helperTextInvalid={helperTextInvalid}
isRequired={required}
validated={isValid ? 'default' : 'error'}
@ -103,7 +104,7 @@ function OrganizationLookup({
>
<Lookup
isDisabled={isDisabled}
id="organization"
id={id}
header={t`Organization`}
value={value}
onBlur={onBlur}
@ -158,6 +159,7 @@ function OrganizationLookup({
}
OrganizationLookup.propTypes = {
id: string,
helperTextInvalid: node,
isValid: bool,
onBlur: func,
@ -171,6 +173,7 @@ OrganizationLookup.propTypes = {
};
OrganizationLookup.defaultProps = {
id: 'organization',
helperTextInvalid: '',
isValid: true,
onBlur: () => {},

2
awx/ui_next/src/screens/Application/ApplicationAdd/ApplicationAdd.test.js
View File

@ -98,7 +98,7 @@ describe('<ApplicationAdd/>', () => {
wrapper.update();
expect(wrapper.find('input#name').prop('value')).toBe('new foo');
expect(wrapper.find('input#description').prop('value')).toBe('new bar');
expect(wrapper.find('input#organization-input').prop('value')).toBe(
expect(wrapper.find('input#organization').prop('value')).toBe(
'organization'
);
expect(

5
awx/ui_next/src/screens/Application/ApplicationEdit/ApplicationEdit.test.js
View File

@ -88,6 +88,7 @@ describe('<ApplicationEdit/>', () => {
});
expect(wrapper.find('ApplicationEdit').length).toBe(1);
});
test('should cancel form properly', async () => {
const history = createMemoryHistory({
initialEntries: ['/applications/1/edit'],
@ -110,6 +111,7 @@ describe('<ApplicationEdit/>', () => {
expect(history.location.pathname).toBe('/applications/1/details');
});
});
test('should throw error on submit', async () => {
const error = {
response: {
@ -147,6 +149,7 @@ describe('<ApplicationEdit/>', () => {
wrapper.update();
expect(wrapper.find('FormSubmitError').length).toBe(1);
});
test('expect values to be updated and submitted properly', async () => {
const history = createMemoryHistory({
initialEntries: ['/applications/1/edit'],
@ -188,7 +191,7 @@ describe('<ApplicationEdit/>', () => {
wrapper.update();
expect(wrapper.find('input#name').prop('value')).toBe('new foo');
expect(wrapper.find('input#description').prop('value')).toBe('new bar');
expect(wrapper.find('input#organization-input').prop('value')).toBe(
expect(wrapper.find('input#organization').prop('value')).toBe(
'organization'
);
expect(

2
awx/ui_next/src/screens/Application/shared/ApplicationForm.test.js
View File

@ -107,7 +107,7 @@ describe('<ApplicationForm', () => {
wrapper.update();
expect(wrapper.find('input#name').prop('value')).toBe('new foo');
expect(wrapper.find('input#description').prop('value')).toBe('new bar');
expect(wrapper.find('input#organization-input').prop('value')).toBe(
expect(wrapper.find('input#organization').prop('value')).toBe(
'organization'
);
expect(

2
awx/ui_next/src/screens/Team/TeamList/TeamListItem.js
View File

@ -31,7 +31,7 @@ function TeamListItem({ team, isSelected, onSelect, detailUrl, rowIndex }) {
dataLabel={t`Selected`}
/>
<Td id={labelId} dataLabel={t`Name`}>
<Link id={labelId} to={`${detailUrl}`}>
<Link to={`${detailUrl}`}>
<b>{team.name}</b>
</Link>
</Td>

4
awx/ui_next/src/screens/Template/JobTemplateEdit/JobTemplateEdit.test.js
View File

@ -339,9 +339,7 @@ describe('<JobTemplateEdit />', () => {
name: 'Other Inventory',
});
wrapper.find('TextInput#execution-environments-input').invoke('onChange')(
''
);
wrapper.find('TextInput#execution-environments').invoke('onChange')('');
});
wrapper.update();

2
awx/ui_next/src/screens/Template/shared/JobTemplateForm.js
View File

@ -266,7 +266,7 @@ function JobTemplateForm({
/>
</FieldWithPrompt>
<FormGroup
fieldId="inventory-lookup"
fieldId="template-inventory"
validated={
!(inventoryMeta.touched || askInventoryOnLaunchField.value) ||
!inventoryMeta.error

2
awx/ui_next/src/screens/Template/shared/WebhookSubForm.test.js
View File

@ -68,7 +68,7 @@ describe('<WebhookSubForm />', () => {
.find('TextInputBase[aria-label="workflow job template webhook key"]')
.prop('value')
).toBe('webhook key');
expect(wrapper.find('input#credential-input').prop('value')).toBe(
expect(wrapper.find('input#credential').prop('value')).toBe(
'Github credential'
);
});