From 03fbeb2a271b9e3c40339ed237175e2b15bbd16c Mon Sep 17 00:00:00 2001
From: "Keith J. Grant" <barkeep@keithjgrant.com>
Date: Thu, 8 Apr 2021 11:32:53 -0700
Subject: [PATCH] fix a11y labels on dashboard tabs

---
 .../src/screens/Dashboard/Dashboard.jsx       | 145 +++++++++---------
 1 file changed, 76 insertions(+), 69 deletions(-)

diff --git a/awx/ui_next/src/screens/Dashboard/Dashboard.jsx b/awx/ui_next/src/screens/Dashboard/Dashboard.jsx
index c6d029cb67..78fea22c7d 100644
--- a/awx/ui_next/src/screens/Dashboard/Dashboard.jsx
+++ b/awx/ui_next/src/screens/Dashboard/Dashboard.jsx
@@ -170,86 +170,93 @@ function Dashboard({ i18n }) {
                 aria-label={i18n._(t`Job status graph tab`)}
                 eventKey={0}
                 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
                 aria-label={i18n._(t`Recent Jobs list tab`)}
                 eventKey={1}
                 title={<TabTitleText>{i18n._(t`Recent Jobs`)}</TabTitleText>}
-              />
+              >
+                <div>
+                  {activeTabId === 1 && (
+                    <JobList defaultParams={{ page_size: 5 }} />
+                  )}
+                </div>
+              </Tab>
               <Tab
                 aria-label={i18n._(t`Recent Templates list tab`)}
                 eventKey={2}
                 title={
                   <TabTitleText>{i18n._(t`Recent Templates`)}</TabTitleText>
                 }
-              />
+              >
+                <div>
+                  {activeTabId === 2 && (
+                    <TemplateList defaultParams={{ page_size: 5 }} />
+                  )}
+                </div>
+              </Tab>
             </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>
         </div>
       </MainPageSection>