move facets first in tab order (#1751)

Author: ChristopherChudzicki

frontends/main/src/app-pages/ChannelPage/ChannelPage.test.tsx

@@ -316,8 +316,8 @@ describe.each(NON_UNIT_CHANNEL_TYPES)(
         assertHeadings([
           { level: 1, name: channel.title },
           { level: 2, name: `Search within ${channel.title}` },
-          { level: 3, name: "Filter" },
           { level: 3, name: "Search Results" },
+          { level: 3, name: "Filter" },
         ])
       })
     }, 10000)
@@ -436,8 +436,8 @@ describe("Channel Pages, Unit only", () => {
         { level: 2, name: "Featured Courses" },
         { level: 2, name: "What Learners Say" },
         { level: 2, name: `Search within ${channel.title}` },
-        { level: 3, name: "Filter" },
         { level: 3, name: "Search Results" },
+        { level: 3, name: "Filter" },
       ])
     })
   })

frontends/main/src/app-pages/SearchPage/SearchPage.test.tsx

@@ -627,19 +627,27 @@ test("Set sort", async () => {
 test("The professional toggle updates the professional setting", async () => {
   setMockApiResponses({ search: { count: 137 } })
   const { location } = renderWithProviders(<SearchPage />)
-  const professionalToggle = await screen.getAllByText("Professional")[0]
+  const facets = screen.getByTestId("facets-container")
+  const professionalToggle = await within(facets).findByRole("button", {
+    name: "Professional",
+  })
   await user.click(professionalToggle)
   await waitFor(() => {
     const params = new URLSearchParams(location.current.search)
     expect(params.get("professional")).toBe("true")
   })
-  const academicToggle = await screen.getAllByText("Academic")[0]
+  const academicToggle = await within(facets).findByRole("button", {
+    name: "Academic",
+  })
   await user.click(academicToggle)
   await waitFor(() => {
     const params = new URLSearchParams(location.current.search)
     expect(params.get("professional")).toBe("false")
   })
-  const viewAllToggle = await screen.getAllByText("All")[0]
+  const viewAllToggle = await within(facets).findByRole("button", {
+    name: "All",
+  })
+
   await user.click(viewAllToggle)
   await waitFor(() => {
     const params = new URLSearchParams(location.current.search)
@@ -709,8 +717,8 @@ describe("Search Page pagination controls", () => {
 
     assertHeadings([
       { level: 1, name: "Search" },
-      { level: 2, name: "Filter" },
       { level: 2, name: "Search Results" },
+      { level: 2, name: "Filter" },
     ])
   })
 })

frontends/main/src/page-components/SearchDisplay/SearchDisplay.tsx

@@ -15,6 +15,7 @@ import {
   Drawer,
   Checkbox,
   VisuallyHidden,
+  Stack,
 } from "ol-components"
 
 import {
@@ -60,8 +61,6 @@ const StyledResourceTabs = styled(ResourceCategoryTabs.TabList)`
 `
 
 const DesktopSortContainer = styled.div`
-  float: right;
-
   ${({ theme }) => theme.breakpoints.down("md")} {
     display: none;
   }
@@ -439,10 +438,17 @@ const MobileFacetsTitleContainer = styled.div`
   }
 `
 
-const StyledGridContainer = styled(GridContainer)`
+const ReversedGridContainer = styled(GridContainer)`
   max-width: 1272px !important;
   margin-left: 0 !important;
   width: 100% !important;
+
+  /**
+  We want the facets to be visually on left, but occur second in the DOM / tab
+  order. This makes it easier for keyboard navigators to get directly to the
+  search results.
+  */
+  flex-direction: row-reverse;
 `
 
 const ExplanationContainer = styled.div`
@@ -860,33 +866,8 @@ const SearchDisplay: React.FC<SearchDisplayProps> = ({
 
   return (
     <Container>
-      <StyledGridContainer>
+      <ReversedGridContainer>
         <ResourceCategoryTabs.Context activeTabName={activeTab.name}>
-          <DesktopFiltersColumn
-            component="section"
-            variant="sidebar-2"
-            data-testid="facets-container"
-          >
-            <FacetsTitleContainer>
-              <FilterTitle>
-                <Typography component={filterHeadingEl} variant="subtitle1">
-                  Filter
-                </Typography>
-                <RiEqualizerLine fontSize="medium" />
-              </FilterTitle>
-              {hasFacets ? (
-                <Button
-                  variant="text"
-                  color="secondary"
-                  size="small"
-                  onClick={clearAllFacets}
-                >
-                  Clear all
-                </Button>
-              ) : null}
-            </FacetsTitleContainer>
-            {filterContents}
-          </DesktopFiltersColumn>
           <StyledMainColumn component="section" variant="main-2">
             <VisuallyHidden as={resultsHeadingEl}>
               Search Results
@@ -901,13 +882,15 @@ const SearchDisplay: React.FC<SearchDisplayProps> = ({
                */}
               {isFetching || isLoading ? "" : `${data?.count} results`}
             </VisuallyHidden>
-            <DesktopSortContainer>{sortDropdown}</DesktopSortContainer>
-            <StyledResourceTabs
-              setSearchParams={setSearchParams}
-              tabs={TABS}
-              aggregations={data?.metadata.aggregations}
-              onTabChange={() => setPage(1)}
-            />
+            <Stack direction="row" justifyContent="space-between">
+              <StyledResourceTabs
+                setSearchParams={setSearchParams}
+                tabs={TABS}
+                aggregations={data?.metadata.aggregations}
+                onTabChange={() => setPage(1)}
+              />
+              <DesktopSortContainer>{sortDropdown}</DesktopSortContainer>
+            </Stack>
             <ResourceCategoryTabs.TabPanels tabs={TABS}>
               <MobileFilter>
                 <Button variant="text" onClick={toggleMobileDrawer(true)}>
@@ -1011,8 +994,33 @@ const SearchDisplay: React.FC<SearchDisplayProps> = ({
               </PaginationContainer>
             </ResourceCategoryTabs.TabPanels>
           </StyledMainColumn>
+          <DesktopFiltersColumn
+            component="section"
+            variant="sidebar-2"
+            data-testid="facets-container"
+          >
+            <FacetsTitleContainer>
+              <FilterTitle>
+                <Typography component={filterHeadingEl} variant="subtitle1">
+                  Filter
+                </Typography>
+                <RiEqualizerLine fontSize="medium" />
+              </FilterTitle>
+              {hasFacets ? (
+                <Button
+                  variant="text"
+                  color="secondary"
+                  size="small"
+                  onClick={clearAllFacets}
+                >
+                  Clear all
+                </Button>
+              ) : null}
+            </FacetsTitleContainer>
+            {filterContents}
+          </DesktopFiltersColumn>
         </ResourceCategoryTabs.Context>
-      </StyledGridContainer>
+      </ReversedGridContainer>
     </Container>
   )
 }