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

Adds aria-label to some buttons without text

Reviewed-by: https://github.com/apps/softwarefactory-project-zuul

awx/ui_next/src/components/JobList/JobListItem.jsx

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

awx/ui_next/src/components/PageHeaderToolbar/PageHeaderToolbar.jsx

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

awx/ui_next/src/components/Schedule/ScheduleList/ScheduleListItem.jsx

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

awx/ui_next/src/components/Sparkline/Sparkline.jsx

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

awx/ui_next/src/screens/Credential/CredentialList/CredentialListItem.jsx

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

awx/ui_next/src/screens/Host/HostList/HostListItem.jsx

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

awx/ui_next/src/screens/Inventory/InventoryGroupHosts/InventoryGroupHostListItem.jsx

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

awx/ui_next/src/screens/Inventory/InventoryGroups/InventoryGroupItem.jsx

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

awx/ui_next/src/screens/Inventory/InventoryList/InventoryListItem.jsx

@@ -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/${

awx/ui_next/src/screens/Job/JobOutput/JobOutput.test.jsx

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

awx/ui_next/src/screens/Job/JobOutput/PageControls.jsx

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

awx/ui_next/src/screens/Job/JobOutput/PageControls.test.jsx

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

awx/ui_next/src/screens/Job/JobOutput/shared/OutputToolbar.jsx

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

awx/ui_next/src/screens/Organization/OrganizationList/OrganizationListItem.jsx

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

awx/ui_next/src/screens/Project/ProjectList/ProjectListItem.jsx

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

awx/ui_next/src/screens/Team/TeamList/TeamListItem.jsx

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

awx/ui_next/src/screens/Template/TemplateList/TemplateListItem.jsx

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

awx/ui_next/src/screens/User/UserList/UserListItem.jsx

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