fix: storybook runner tests and vrt

twilio-labs · Oct 17, 2023 · 6ae0c62 · 6ae0c62
1 parent 25ebf5e
commit 6ae0c62
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 5 deletions.
diff --git a/packages/paste-website/src/components/site-wrapper/site-header/SiteHeaderSearch.tsx b/packages/paste-website/src/components/site-wrapper/site-header/SiteHeaderSearch.tsx
@@ -6,6 +6,7 @@ import { Text } from "@twilio-paste/text";
 import * as React from "react";
 import { useHotkeys } from "react-hotkeys-hook";
 
+import { ScreenReaderOnly } from "@twilio-paste/screen-reader-only";
 import { SiteSearch } from "../../site-search";
 
 const SiteHeaderSearch: React.FC = () => {
@@ -58,10 +59,11 @@ const SiteHeaderSearch: React.FC = () => {
               Search
             </Text>
           </Box>
-          <Box as="span">
+          <Box as="span" aria-hidden="true">
             <InlineCode>⌘</InlineCode>
             <InlineCode>K</InlineCode>
           </Box>
+          <ScreenReaderOnly>Keyboard shortcut: Command / Control K</ScreenReaderOnly>
         </Box>
       </Button>
       <SiteSearch isOpen={isOpen} onDismiss={onClose} />

diff --git a/packages/paste-website/stories/SiteSearch.stories.tsx b/packages/paste-website/stories/SiteSearch.stories.tsx
@@ -1,10 +1,10 @@
 import { type StoryFn } from "@storybook/react";
+import { Box } from "@twilio-paste/box";
 import { useUID } from "@twilio-paste/uid-library";
 import * as React from "react";
 
 import { SearchEmptyState } from "../src/components/site-search/SearchEmptyState";
 import { SearchForm } from "../src/components/site-search/SearchForm";
-import { SearchModal } from "../src/components/site-search/SearchModal";
 import { SearchResultsList } from "../src/components/site-search/SearchResults";
 import { SearchResultsLoading } from "../src/components/site-search/SearchResultsLoading";
 import { type GroupedSearchResults } from "../src/components/site-search/types";
@@ -20,7 +20,8 @@ const MockSearchModal: React.FC<{
   const modalHeadingId = useUID();
   const inputRef = React.useRef<HTMLInputElement>(null);
   return (
-    <SearchModal isOpen={true} ariaLabelledby={modalHeadingId} onDismiss={() => {}} initialFocusRef={inputRef}>
+    // we don't need to VRT a modal, we know what they look like else where, we only care about the content
+    <Box>
       <SearchForm
         onSubmit={() => {}}
         hasResults={Object.keys(results).length > 0}
@@ -33,12 +34,25 @@ const MockSearchModal: React.FC<{
       {loading && Object.keys(results).length === 0 && <SearchResultsLoading />}
       {showEmptyState && Object.keys(results).length === 0 && <SearchEmptyState searchQuery={searchQuery} />}
       <SearchResultsList results={results} />
-    </SearchModal>
+    </Box>
   );
 };
 export const SiteSearchTrigger: StoryFn = () => {
   return <SiteHeaderSearch />;
 };
+SiteSearchTrigger.parameters = {
+  a11y: {
+    config: {
+      rules: [
+        {
+          id: "color-contrast",
+          // This uses a symbol as text content and even though it's ignored aXe can't cope with figuring out if it's accessible or not
+          enabled: false,
+        },
+      ],
+    },
+  },
+};
 
 export const SiteSearchModalInitialState: StoryFn = () => {
   return <MockSearchModal results={{}} searchQuery="" />;

diff --git a/packages/paste-website/stories/__fixtures__/searchresults.fixture.ts b/packages/paste-website/stories/__fixtures__/searchresults.fixture.ts
@@ -1,3 +1,5 @@
+import type { GroupedSearchResults } from "../../src/components/site-search/types";
+
 export const mockResults = {
   "src/pages/components/in-page-navigation/index": [
     {
@@ -150,4 +152,4 @@ export const mockResults = {
       slug: "discussion-5372221",
     },
   ],
-};
+} as GroupedSearchResults;