added animated examples for focus management

src/components/StyleGuide/Filtering/Accessibility.mdx

@@ -1,7 +1,16 @@
 import { Meta } from "@storybook/blocks";
 
+import { Box } from "@chakra-ui/react";
+import Image from "../../Image/Image";
 import Link from "../../Link/Link";
 
+import imageFocusLiveFiltering from "/static/filteringStyleGuide/focusLiveFiltering.gif";
+import imageFocusKeywordSearch from "/static/filteringStyleGuide/focusKeywordSearch.gif";
+import imageFocusClearingFilters from "/static/filteringStyleGuide/focusClearingFilters.gif";
+import imageFocusPagination from "/static/filteringStyleGuide/focusPagination.gif";
+import imageFocusSorting from "/static/filteringStyleGuide/focusSorting.gif";
+import { exampleWrapperStyles } from "./Overview.mdx";
+
 <Meta title="Style Guide/Filtering/Accessibility" />
 
 # Filtering accessibility
@@ -31,39 +40,119 @@ the heading text are announced to screen reader users.
 
 ### Applying search terms
 
-When a search term is applied using the `keyword search` field, focus should be moved
-to the `total results` heading.
+<Box
+  display="grid"
+  gridTemplateColumns={{ base: "1fr", md: "1fr 1fr" }}
+  gap={{ base: "xs", md: "l" }}
+>
+  <Box>
+    When a search term is applied using the `keyword search` field, focus should
+    be moved to the `total results` heading.
+  </Box>
+  <Image
+    alt="Example of full-page filtering app"
+    border="1px solid var(--nypl-colors-ui-border-default)"
+    src={imageFocusKeywordSearch}
+    {...exampleWrapperStyles}
+  />
+</Box>
 
 ### Applying filters
 
 #### Live filtering
 
-For live filtering, as a user makes changes to filtering options, focus should
-be maintained on the filter the user is interacting with.
+<Box
+  display="grid"
+  gridTemplateColumns={{ base: "1fr", md: "1fr 1fr" }}
+  gap={{ base: "xs", md: "l" }}
+>
+  <Box>
+    For live filtering, as a user makes changes to filtering options, focus
+    should be maintained on the filter the user is interacting with.
+  </Box>
+  <Image
+    alt="Example of full-page filtering app"
+    border="1px solid var(--nypl-colors-ui-border-default)"
+    src={imageFocusLiveFiltering}
+    {...exampleWrapperStyles}
+  />
+</Box>
 
 #### Batch filtering
 
-For batch filtering, focus should be moved to the `total results` heading after
-the "Apply filters" button has been clicked.
+<Box
+  display="grid"
+  gridTemplateColumns={{ base: "1fr", md: "1fr 1fr" }}
+  gap={{ base: "xs", md: "l" }}
+>
+  <Box>
+    For batch filtering, focus should be moved to the `total results` heading
+    after the "Apply filters" button has been clicked.
+  </Box>
+  <Box></Box>
+</Box>
 
 ### Clearing filters
 
-When filters are cleared using the methods available in the `active filters`
-list or by clicking the "Clear all filters" button in the `filter bar`, focus
-should be moved to the `total results` heading.
-
-When clearing a filter by manually resetting an individual form input element,
-focus should be maintained on the filter the user is interacting with.
+<Box
+  display="grid"
+  gridTemplateColumns={{ base: "1fr", md: "1fr 1fr" }}
+  gap={{ base: "xs", md: "l" }}
+>
+  <Box>
+    When filters are cleared using the methods available in the `active filters`
+    list or by clicking the "Clear all filters" button in the `filter bar`, focus
+    should be moved to the `total results` heading.
+
+    When clearing a filter by manually resetting an individual form input element,
+    focus should be maintained on the filter the user is interacting with.
+
+  </Box>
+  <Image
+    alt="Example of full-page filtering app"
+    border="1px solid var(--nypl-colors-ui-border-default)"
+    src={imageFocusClearingFilters}
+    {...exampleWrapperStyles}
+  />
+</Box>
 
 ### Pagination
 
-When using the `pagination` menu to update the `results` list, focus should be moved
-to the `total results` heading.
+<Box
+  display="grid"
+  gridTemplateColumns={{ base: "1fr", md: "1fr 1fr" }}
+  gap={{ base: "xs", md: "l" }}
+>
+  <Box>
+    When using the `pagination` menu to update the `results` list, focus should
+    be moved to the `total results` heading.
+  </Box>
+  <Image
+    alt="Example of full-page filtering app"
+    border="1px solid var(--nypl-colors-ui-border-default)"
+    src={imageFocusPagination}
+    {...exampleWrapperStyles}
+  />
+</Box>
 
 ### Sorting
 
-After selecting an option in the `sorting` menu, focus should be maintained on
-the `sorting` menu.
+<Box
+  display="grid"
+  gridTemplateColumns={{ base: "1fr", md: "1fr 1fr" }}
+  gap={{ base: "xs", md: "l" }}
+>
+  <Box>
+    After selecting an option in the `sorting` menu, focus should be maintained
+    on the `sorting` menu.
+  </Box>
+  <Image
+    alt="Example of full-page filtering app"
+    border="1px solid var(--nypl-colors-ui-border-default)"
+    src={imageFocusSorting}
+    {...exampleWrapperStyles}
+  />
+</Box>
 
 ### Modal overlay
 

src/components/StyleGuide/Filtering/ApplyingClearing.mdx

@@ -63,9 +63,9 @@ When filters are cleared, the following should be addressed:
 
 ### Keyword search
 
-- All filters that have been applied should be removed any time a keyword search
-  is executed (i.e. a new keyword search always produces a new unfiltered
-  results list)
+- All filters that have been applied should be programmatically removed any time
+  a keyword search is executed (i.e. a new keyword search should always produce
+  a new unfiltered results list)
 
 ### Filter bar
 

src/components/StyleGuide/Filtering/PageComposition.mdx

@@ -3,7 +3,7 @@ import { Meta } from "@storybook/blocks";
 import Image from "../../Image/Image";
 import Link from "../../Link/Link";
 
-import imageFilteringFullPageExample from "/static/filteringStyleGuide/filteringFullPageExample.png";
+import imageFullPageExample from "/static/filteringStyleGuide/fullPageExample.png";
 import { exampleWrapperStyles } from "./Overview.mdx";
 
 <Meta title="Style Guide/Filtering/Page composition" />
@@ -24,6 +24,6 @@ UI elements:
 <Image
   alt="Example of full-page filtering app"
   border="1px solid var(--nypl-colors-ui-border-default)"
-  src={imageFilteringFullPageExample}
+  src={imageFullPageExample}
   {...exampleWrapperStyles}
 />

src/components/StyleGuide/Filtering/PageCompositionElements/ActiveFilters.mdx

@@ -3,7 +3,7 @@ import { Meta } from "@storybook/blocks";
 import Image from "../../../Image/Image";
 import Link from "../../../Link/Link";
 
-import imageFilteringActiveFiltersList from "/static/filteringStyleGuide/filteringActiveFiltersList.png";
+import imageActiveFiltersList from "/static/filteringStyleGuide/activeFiltersList.png";
 import { exampleWrapperStyles } from "../Overview.mdx";
 
 <Meta title="Style Guide/Filtering/Page elements/Active filters list" />
@@ -14,7 +14,7 @@ The `active filters` list is used to display filters that have been applied.
 
 <Image
   alt="Example of active filters list"
-  src={imageFilteringActiveFiltersList}
+  src={imageActiveFiltersList}
   {...exampleWrapperStyles}
 />
 

src/components/StyleGuide/Filtering/PageCompositionElements/FilterBar.mdx

@@ -5,10 +5,10 @@ import Banner from "../../../Banner/Banner";
 import Image from "../../../Image/Image";
 import Link from "../../../Link/Link";
 
-import imageFilteringExampleColumn from "/static/filteringStyleGuide/filteringExampleColumn.png";
-import imageFilteringExamplePopup from "/static/filteringStyleGuide/filteringExamplePopup.png";
-import imageFilteringExampleRow from "/static/filteringStyleGuide/filteringExampleRow.png";
-import imageFilteringFilterBar from "/static/filteringStyleGuide/filteringFilterBar.png";
+import imageExampleColumn from "/static/filteringStyleGuide/exampleColumn.png";
+import imageExamplePopup from "/static/filteringStyleGuide/examplePopup.png";
+import imageExampleRow from "/static/filteringStyleGuide/exampleRow.png";
+import imageFilterBar from "/static/filteringStyleGuide/filterBar.png";
 import { exampleWrapperStyles } from "../Overview.mdx";
 
 <Meta title="Style Guide/Filtering/Page elements/Filter bar" />
@@ -22,7 +22,7 @@ following DS components: `CheckboxGroup`, `MultiSelectGroup`, `RadioGroup`,
 
 <Image
   alt="Example of filter bar"
-  src={imageFilteringFilterBar}
+  src={imageFilterBar}
   {...exampleWrapperStyles}
 />
 
@@ -86,7 +86,7 @@ or row (horizontal).
     alt="Example of column filter bar"
     border="1px solid var(--nypl-colors-ui-border-default)"
     caption="Example of column filter bar"
-    src={imageFilteringExampleColumn}
+    src={imageExampleColumn}
     {...exampleWrapperStyles}
   />
 </Box>
@@ -118,7 +118,7 @@ or row (horizontal).
     alt="Example of row filter bar"
     border="1px solid var(--nypl-colors-ui-border-default)"
     caption="Example of row filter bar"
-    src={imageFilteringExampleRow}
+    src={imageExampleRow}
     {...exampleWrapperStyles}
   />
 </Box>
@@ -141,11 +141,11 @@ or row (horizontal).
     components to be opened at the same time
 
   </Box>
-    <Image
+  <Image
     alt="Example of popup filters on mobile"
     border="1px solid var(--nypl-colors-ui-border-default)"
     caption="Example of popup filters on mobile"
-    src={imageFilteringExamplePopup}
+    src={imageExamplePopup}
     {...exampleWrapperStyles}
   />
 </Box>

src/components/StyleGuide/Filtering/PageCompositionElements/KeywordSearch.mdx

@@ -3,7 +3,7 @@ import { Meta } from "@storybook/blocks";
 import Image from "../../../Image/Image";
 import Link from "../../../Link/Link";
 
-import imageFilteringKeywordSearchField from "/static/filteringStyleGuide/filteringKeywordSearchField.png";
+import imageKeywordSearchField from "/static/filteringStyleGuide/keywordSearchField.png";
 import { exampleWrapperStyles } from "../Overview.mdx";
 
 <Meta title="Style Guide/Filtering/Page elements/Keyword search field" />
@@ -20,7 +20,7 @@ produced with a keyword search.
 
 <Image
   alt="Example of keyword search field"
-  src={imageFilteringKeywordSearchField}
+  src={imageKeywordSearchField}
   {...exampleWrapperStyles}
 />
 

src/components/StyleGuide/Filtering/PageCompositionElements/Pagination.mdx

@@ -3,7 +3,7 @@ import { Meta } from "@storybook/blocks";
 import Image from "../../../Image/Image";
 import Link from "../../../Link/Link";
 
-import imageFilteringPaginationMenu from "/static/filteringStyleGuide/filteringPaginationMenu.png";
+import imagePaginationMenu from "/static/filteringStyleGuide/paginationMenu.png";
 import { exampleWrapperStyles } from "../Overview.mdx";
 
 <Meta title="Style Guide/Filtering/Page elements/Pagination menu" />
@@ -15,7 +15,7 @@ multiple pages.
 
 <Image
   alt="Example of pagination menu"
-  src={imageFilteringPaginationMenu}
+  src={imagePaginationMenu}
   {...exampleWrapperStyles}
 />
 

src/components/StyleGuide/Filtering/PageCompositionElements/ResultsList.mdx

@@ -3,7 +3,7 @@ import { Meta } from "@storybook/blocks";
 import Image from "../../../Image/Image";
 import Link from "../../../Link/Link";
 
-import imageFilteringResultsList from "/static/filteringStyleGuide/filteringResultsList.png";
+import imageResultsList from "/static/filteringStyleGuide/resultsList.png";
 import { exampleWrapperStyles } from "../Overview.mdx";
 
 <Meta title="Style Guide/Filtering/Page elements/Results list" />
@@ -14,7 +14,7 @@ The `results list` represents the items that are being filtered.
 
 <Image
   alt="Example of results list"
-  src={imageFilteringResultsList}
+  src={imageResultsList}
   {...exampleWrapperStyles}
 />
 

src/components/StyleGuide/Filtering/PageCompositionElements/SortingMenu.mdx

@@ -3,7 +3,7 @@ import { Meta } from "@storybook/blocks";
 import Image from "../../../Image/Image";
 import Link from "../../../Link/Link";
 
-import imageFilteringSortingMenu from "/static/filteringStyleGuide/filteringSortingMenu.png";
+import imageSortingMenu from "/static/filteringStyleGuide/sortingMenu.png";
 import { exampleWrapperStyles } from "../Overview.mdx";
 
 <Meta title="Style Guide/Filtering/Page elements/Sorting menu" />
@@ -14,7 +14,7 @@ The `sorting` menu updates how records a ordered in a results set.
 
 <Image
   alt="Example of sorting menu"
-  src={imageFilteringSortingMenu}
+  src={imageSortingMenu}
   {...exampleWrapperStyles}
 />
 

src/components/StyleGuide/Filtering/PageCompositionElements/TotalResultsHeading.mdx

@@ -3,7 +3,7 @@ import { Meta } from "@storybook/blocks";
 import Image from "../../../Image/Image";
 import Link from "../../../Link/Link";
 
-import imageFilteringTotalResultsHeading from "/static/filteringStyleGuide/filteringTotalResultsHeading.png";
+import imageTotalResultsHeading from "/static/filteringStyleGuide/totalResultsHeading.png";
 import { exampleWrapperStyles } from "../Overview.mdx";
 
 <Meta title="Style Guide/Filtering/Page elements/Total results heading" />
@@ -16,7 +16,7 @@ results set, and, if applicable, the search term used to generate a results set.
 
 <Image
   alt="Example of total results heading"
-  src={imageFilteringTotalResultsHeading}
+  src={imageTotalResultsHeading}
   {...exampleWrapperStyles}
 />