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

Merge pull request #6444 from mabashian/ui-next-accessibility-low-hanging-fruitz

Browse Source 
Adds aria-label to some buttons without text

Reviewed-by: https://github.com/apps/softwarefactory-project-zuul
This commit is contained in:
softwarefactory-project-zuul[bot] 2020-03-27 14:38:05 +00:00 committed by GitHub
commit 21872e7101
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
18 changed files with 68 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
awx/ui_next/src/components/JobList/JobListItem.jsx
View File

@ -81,7 +81,11 @@ function JobListItem({
<Tooltip content={i18n._(t`Relaunch Job`)} position="top">
<LaunchButton resource={job}>
{({ handleRelaunch }) => (
<Button variant="plain" onClick={handleRelaunch}>
<Button
variant="plain"
onClick={handleRelaunch}
aria-label={i18n._(t`Relaunch`)}
>
<RocketIcon />
</Button>
)}

5
awx/ui_next/src/components/PageHeaderToolbar/PageHeaderToolbar.jsx
View File

@ -72,7 +72,10 @@ class PageHeaderToolbar extends Component {
position={DropdownPosition.right}
onSelect={this.handleHelpSelect}
toggle={
<DropdownToggle onToggle={this.handleHelpToggle}>
<DropdownToggle
onToggle={this.handleHelpToggle}
aria-label={i18n._(t`Info`)}
>
<QuestionCircleIcon />
</DropdownToggle>
}

1
awx/ui_next/src/components/Schedule/ScheduleList/ScheduleListItem.jsx
View File

@ -107,6 +107,7 @@ function ScheduleListItem({ i18n, isSelected, onSelect, schedule }) {
{schedule.summary_fields.user_capabilities.edit ? (
<Tooltip content={i18n._(t`Edit Schedule`)} position="top">
<Button
aria-label={i18n._(t`Edit Schedule`)}
css="grid-column: 2"
variant="plain"
component={Link}

5
awx/ui_next/src/components/Sparkline/Sparkline.jsx
View File

@ -38,7 +38,10 @@ const Sparkline = ({ i18n, jobs }) => {
const statusIcons = jobs.map(job => (
<Tooltip position="top" content={generateTooltip(job)} key={job.id}>
<Link to={`/jobs/${JOB_TYPE_URL_SEGMENTS[job.type]}/${job.id}`}>
<Link
aria-label={i18n._(t`View job ${job.id}`)}
to={`/jobs/${JOB_TYPE_URL_SEGMENTS[job.type]}/${job.id}`}
>
<StatusIcon status={job.status} />
</Link>
</Tooltip>

1
awx/ui_next/src/screens/Credential/CredentialList/CredentialListItem.jsx
View File

@ -68,6 +68,7 @@ function CredentialListItem({
{canEdit ? (
<Tooltip content={i18n._(t`Edit Credential`)} position="top">
<Button
aria-label={i18n._(t`Edit Credential`)}
variant="plain"
component={Link}
to={`/credentials/${credential.id}/edit`}

1
awx/ui_next/src/screens/Host/HostList/HostListItem.jsx
View File

@ -81,6 +81,7 @@ function HostListItem({ i18n, host, isSelected, onSelect, detailUrl }) {
{host.summary_fields.user_capabilities.edit ? (
<Tooltip content={i18n._(t`Edit Host`)} position="top">
<Button
aria-label={i18n._(t`Edit Host`)}
variant="plain"
component={Link}
to={`/hosts/${host.id}/edit`}

1
awx/ui_next/src/screens/Inventory/InventoryGroupHosts/InventoryGroupHostListItem.jsx
View File

@ -73,6 +73,7 @@ function InventoryGroupHostListItem({
{host.summary_fields.user_capabilities?.edit && (
<Tooltip content={i18n._(t`Edit Host`)} position="top">
<Button
aria-label={i18n._(t`Edit Host`)}
css="grid-column: 2"
variant="plain"
component={Link}

7
awx/ui_next/src/screens/Inventory/InventoryGroups/InventoryGroupItem.jsx
View File

@ -54,7 +54,12 @@ function InventoryGroupItem({
>
{group.summary_fields.user_capabilities.edit && (
<Tooltip content={i18n._(t`Edit Group`)} position="top">
<Button variant="plain" component={Link} to={editUrl}>
<Button
aria-label={i18n._(t`Edit Group`)}
variant="plain"
component={Link}
to={editUrl}
>
<PencilAltIcon />
</Button>
</Tooltip>

1
awx/ui_next/src/screens/Inventory/InventoryList/InventoryListItem.jsx
View File

@ -72,6 +72,7 @@ class InventoryListItem extends React.Component {
{inventory.summary_fields.user_capabilities.edit ? (
<Tooltip content={i18n._(t`Edit Inventory`)} position="top">
<Button
aria-label={i18n._(t`Edit Inventory`)}
variant="plain"
component={Link}
to={`/inventories/${

6
awx/ui_next/src/screens/Job/JobOutput/JobOutput.test.jsx
View File

@ -23,13 +23,13 @@ async function checkOutput(wrapper, expectedLines) {
async function findScrollButtons(wrapper) {
const pageControls = await waitForElement(wrapper, 'PageControls');
const scrollFirstButton = pageControls.find(
'button[aria-label="scroll first"]'
'button[aria-label="Scroll first"]'
);
const scrollLastButton = pageControls.find(
'button[aria-label="scroll last"]'
'button[aria-label="Scroll last"]'
);
const scrollPreviousButton = pageControls.find(
'button[aria-label="scroll previous"]'
'button[aria-label="Scroll previous"]'
);
return {
scrollFirstButton,

31
awx/ui_next/src/screens/Job/JobOutput/PageControls.jsx
View File

@ -1,4 +1,6 @@
import React from 'react';
import { withI18n } from '@lingui/react';
import { t } from '@lingui/macro';
import { Button as PFButton } from '@patternfly/react-core';
import {
PlusIcon,
@ -22,32 +24,49 @@ const Button = styled(PFButton)`
`;
const PageControls = ({
i18n,
onScrollFirst,
onScrollLast,
onScrollNext,
onScrollPrevious,
}) => (
<Wrapper>
<Button variant="plain" css="margin-right: auto">
<Button
aria-label={i18n._(t`Toggle expand/collapse event lines`)}
variant="plain"
css="margin-right: auto"
>
<PlusIcon />
</Button>
<Button
aria-label="scroll previous"
aria-label={i18n._(t`Scroll previous`)}
onClick={onScrollPrevious}
variant="plain"
>
<AngleUpIcon />
</Button>
<Button aria-label="scroll next" onClick={onScrollNext} variant="plain">
<Button
aria-label={i18n._(t`Scroll next`)}
onClick={onScrollNext}
variant="plain"
>
<AngleDownIcon />
</Button>
<Button aria-label="scroll first" onClick={onScrollFirst} variant="plain">
<Button
aria-label={i18n._(t`Scroll first`)}
onClick={onScrollFirst}
variant="plain"
>
<AngleDoubleUpIcon />
</Button>
<Button aria-label="scroll last" onClick={onScrollLast} variant="plain">
<Button
aria-label={i18n._(t`Scroll last`)}
onClick={onScrollLast}
variant="plain"
>
<AngleDoubleDownIcon />
</Button>
</Wrapper>
);
export default PageControls;
export default withI18n()(PageControls);

6
awx/ui_next/src/screens/Job/JobOutput/PageControls.test.jsx
View File

@ -1,5 +1,5 @@
import React from 'react';
import { mount } from 'enzyme';
import { mountWithContexts } from '@testUtils/enzymeHelpers';
import PageControls from './PageControls';
let wrapper;
@ -19,12 +19,12 @@ const findChildren = () => {
describe('PageControls', () => {
test('should render successfully', () => {
wrapper = mount(<PageControls />);
wrapper = mountWithContexts(<PageControls />);
expect(wrapper).toHaveLength(1);
});
test('should render menu control icons', () => {
wrapper = mount(<PageControls />);
wrapper = mountWithContexts(<PageControls />);
findChildren();
expect(PlusIcon.length).toBe(1);
expect(AngleDoubleUpIcon.length).toBe(1);

8
awx/ui_next/src/screens/Job/JobOutput/shared/OutputToolbar.jsx
View File

@ -127,7 +127,11 @@ const OutputToolbar = ({ i18n, job, onDelete }) => {
<Tooltip content={i18n._(t`Relaunch Job`)}>
<LaunchButton resource={job} aria-label={i18n._(t`Relaunch`)}>
{({ handleRelaunch }) => (
<Button variant="plain" onClick={handleRelaunch}>
<Button
variant="plain"
onClick={handleRelaunch}
aria-label={i18n._(t`Relaunch`)}
>
<RocketIcon />
</Button>
)}
@ -138,7 +142,7 @@ const OutputToolbar = ({ i18n, job, onDelete }) => {
{job.related?.stdout && (
<Tooltip content={i18n._(t`Download Output`)}>
<a href={`${job.related.stdout}?format=txt_download`}>
<Button variant="plain">
<Button variant="plain" aria-label={i18n._(t`Download Output`)}>
<DownloadIcon />
</Button>
</a>

1
awx/ui_next/src/screens/Organization/OrganizationList/OrganizationListItem.jsx
View File

@ -93,6 +93,7 @@ function OrganizationListItem({
{organization.summary_fields.user_capabilities.edit ? (
<Tooltip content={i18n._(t`Edit Organization`)} position="top">
<Button
aria-label={i18n._(t`Edit Organization`)}
variant="plain"
component={Link}
to={`/organizations/${organization.id}/edit`}

2
awx/ui_next/src/screens/Project/ProjectList/ProjectListItem.jsx
View File

@ -132,6 +132,7 @@ class ProjectListItem extends React.Component {
<ProjectSyncButton projectId={project.id}>
{handleSync => (
<Button
aria-label={i18n._(t`Sync Project`)}
css="grid-column: 1"
variant="plain"
onClick={handleSync}
@ -147,6 +148,7 @@ class ProjectListItem extends React.Component {
{project.summary_fields.user_capabilities.edit ? (
<Tooltip content={i18n._(t`Edit Project`)} position="top">
<Button
aria-label={i18n._(t`Edit Project`)}
css="grid-column: 2"
variant="plain"
component={Link}

1
awx/ui_next/src/screens/Team/TeamList/TeamListItem.jsx
View File

@ -76,6 +76,7 @@ class TeamListItem extends React.Component {
{team.summary_fields.user_capabilities.edit ? (
<Tooltip content={i18n._(t`Edit Team`)} position="top">
<Button
aria-label={i18n._(t`Edit Team`)}
variant="plain"
component={Link}
to={`/teams/${team.id}/edit`}

2
awx/ui_next/src/screens/Template/TemplateList/TemplateListItem.jsx
View File

@ -89,6 +89,7 @@ function TemplateListItem({ i18n, template, isSelected, onSelect, detailUrl }) {
<LaunchButton resource={template}>
{({ handleLaunch }) => (
<Button
aria-label={i18n._(t`Launch template`)}
css="grid-column: 1"
variant="plain"
onClick={handleLaunch}
@ -102,6 +103,7 @@ function TemplateListItem({ i18n, template, isSelected, onSelect, detailUrl }) {
{template.summary_fields.user_capabilities.edit ? (
<Tooltip content={i18n._(t`Edit Template`)} position="top">
<Button
aria-label={i18n._(t`Edit Template`)}
css="grid-column: 2"
variant="plain"
component={Link}

1
awx/ui_next/src/screens/User/UserList/UserListItem.jsx
View File

@ -71,6 +71,7 @@ class UserListItem extends React.Component {
{user.summary_fields.user_capabilities.edit && (
<Tooltip content={i18n._(t`Edit User`)} position="top">
<Button
aria-label={i18n._(t`Edit User`)}
variant="plain"
component={Link}
to={`/users/${user.id}/edit`}