External-Mirrors/awx
2
0
Fork 0
mirror of https://github.com/ansible/awx.git synced 2026-03-28 14:25:05 -02:30
Code Issues Packages Projects Releases Wiki Activity

fix a11y labels on dashboard tabs

Browse Source
This commit is contained in:
Keith J. Grant
2021-04-08 11:32:53 -07:00
parent 30f08582ed
commit 03fbeb2a27
1 changed files with 76 additions and 69 deletions
Download Patch File Download Diff File Expand all files Collapse all files

145
awx/ui_next/src/screens/Dashboard/Dashboard.jsx
View File

@@ -170,86 +170,93 @@ function Dashboard({ i18n }) {
aria-label={i18n._(t`Job status graph tab`)} aria-label={i18n._(t`Job status graph tab`)}
eventKey={0} eventKey={0}
title={<TabTitleText>{i18n._(t`Job status`)}</TabTitleText>} title={<TabTitleText>{i18n._(t`Job status`)}</TabTitleText>}
/> >
<Fragment>
<GraphCardHeader>
<GraphCardActions>
<Select
variant={SelectVariant.single}
placeholderText={i18n._(t`Select period`)}
aria-label={i18n._(t`Select period`)}
className="periodSelect"
onToggle={setIsPeriodDropdownOpen}
onSelect={(event, selection) =>
setPeriodSelection(selection)
}
selections={periodSelection}
isOpen={isPeriodDropdownOpen}
>
<SelectOption key="month" value="month">
{i18n._(t`Past month`)}
</SelectOption>
<SelectOption key="two_weeks" value="two_weeks">
{i18n._(t`Past two weeks`)}
</SelectOption>
<SelectOption key="week" value="week">
{i18n._(t`Past week`)}
</SelectOption>
</Select>
<Select
variant={SelectVariant.single}
placeholderText={i18n._(t`Select job type`)}
aria-label={i18n._(t`Select job type`)}
className="jobTypeSelect"
onToggle={setIsJobTypeDropdownOpen}
onSelect={(event, selection) =>
setJobTypeSelection(selection)
}
selections={jobTypeSelection}
isOpen={isJobTypeDropdownOpen}
>
<SelectOption key="all" value="all">
{i18n._(t`All job types`)}
</SelectOption>
<SelectOption key="inv_sync" value="inv_sync">
{i18n._(t`Inventory sync`)}
</SelectOption>
<SelectOption key="scm_update" value="scm_update">
{i18n._(t`SCM update`)}
</SelectOption>
<SelectOption key="playbook_run" value="playbook_run">
{i18n._(t`Playbook run`)}
</SelectOption>
</Select>
</GraphCardActions>
</GraphCardHeader>
<CardBody>
<LineChart
height={390}
id="d3-line-chart-root"
data={jobGraphData}
/>
</CardBody>
</Fragment>
</Tab>
<Tab <Tab
aria-label={i18n._(t`Recent Jobs list tab`)} aria-label={i18n._(t`Recent Jobs list tab`)}
eventKey={1} eventKey={1}
title={<TabTitleText>{i18n._(t`Recent Jobs`)}</TabTitleText>} title={<TabTitleText>{i18n._(t`Recent Jobs`)}</TabTitleText>}
/> >
<div>
{activeTabId === 1 && (
<JobList defaultParams={{ page_size: 5 }} />
)}
</div>
</Tab>
<Tab <Tab
aria-label={i18n._(t`Recent Templates list tab`)} aria-label={i18n._(t`Recent Templates list tab`)}
eventKey={2} eventKey={2}
title={ title={
<TabTitleText>{i18n._(t`Recent Templates`)}</TabTitleText> <TabTitleText>{i18n._(t`Recent Templates`)}</TabTitleText>
} }
/> >
<div>
{activeTabId === 2 && (
<TemplateList defaultParams={{ page_size: 5 }} />
)}
</div>
</Tab>
</Tabs> </Tabs>
{activeTabId === 0 && (
<Fragment>
<GraphCardHeader>
<GraphCardActions>
<Select
variant={SelectVariant.single}
placeholderText={i18n._(t`Select period`)}
aria-label={i18n._(t`Select period`)}
className="periodSelect"
onToggle={setIsPeriodDropdownOpen}
onSelect={(event, selection) =>
setPeriodSelection(selection)
}
selections={periodSelection}
isOpen={isPeriodDropdownOpen}
>
<SelectOption key="month" value="month">
{i18n._(t`Past month`)}
</SelectOption>
<SelectOption key="two_weeks" value="two_weeks">
{i18n._(t`Past two weeks`)}
</SelectOption>
<SelectOption key="week" value="week">
{i18n._(t`Past week`)}
</SelectOption>
</Select>
<Select
variant={SelectVariant.single}
placeholderText={i18n._(t`Select job type`)}
aria-label={i18n._(t`Select job type`)}
className="jobTypeSelect"
onToggle={setIsJobTypeDropdownOpen}
onSelect={(event, selection) =>
setJobTypeSelection(selection)
}
selections={jobTypeSelection}
isOpen={isJobTypeDropdownOpen}
>
<SelectOption key="all" value="all">
{i18n._(t`All job types`)}
</SelectOption>
<SelectOption key="inv_sync" value="inv_sync">
{i18n._(t`Inventory sync`)}
</SelectOption>
<SelectOption key="scm_update" value="scm_update">
{i18n._(t`SCM update`)}
</SelectOption>
<SelectOption key="playbook_run" value="playbook_run">
{i18n._(t`Playbook run`)}
</SelectOption>
</Select>
</GraphCardActions>
</GraphCardHeader>
<CardBody>
<LineChart
height={390}
id="d3-line-chart-root"
data={jobGraphData}
/>
</CardBody>
</Fragment>
)}
{activeTabId === 1 && <JobList defaultParams={{ page_size: 5 }} />}
{activeTabId === 2 && (
<TemplateList defaultParams={{ page_size: 5 }} />
)}
</Card> </Card>
</div> </div>
</MainPageSection> </MainPageSection>