Make it accessible

BrunoQuaresma · BrunoQuaresma · commit 47fd44b09b67 · 2024-05-15T14:56:19.000Z
diff --git a/site/src/components/NewFilter/NewFilter.stories.tsx b/site/src/components/NewFilter/NewFilter.stories.tsx
@@ -3,9 +3,15 @@ import { userEvent, within, expect } from "@storybook/test";
 import { useState } from "react";
 import { NewFilter } from "./NewFilter";
 
+const searchLabel = "Search for something";
+
 const meta: Meta<typeof NewFilter> = {
   title: "components/NewFilter",
   component: NewFilter,
+  args: {
+    id: "search",
+    label: searchLabel,
+  },
   render: function NewFilterWithState(args) {
     const [value, setValue] = useState<string>(args.value);
     return <NewFilter {...args} value={value} onChange={setValue} />;
@@ -40,8 +46,9 @@ export const Focused: Story = {
   },
   play: async ({ canvasElement }) => {
     const canvas = within(canvasElement);
-    await userEvent.click(canvas.getByRole("textbox"));
-    await expect(canvas.getByRole("textbox")).toHaveFocus();
+    const input = canvas.getByLabelText(searchLabel);
+    await userEvent.click(input);
+    await expect(input).toHaveFocus();
   },
 };
 
@@ -52,8 +59,9 @@ export const Typing: Story = {
   play: async ({ canvasElement }) => {
     const text = "owner:SomeSearchString";
     const canvas = within(canvasElement);
-    await userEvent.type(canvas.getByRole("textbox"), text);
-    await expect(canvas.getByRole("textbox")).toHaveValue(text);
+    const input = canvas.getByLabelText(searchLabel);
+    await userEvent.type(input, text);
+    await expect(input).toHaveValue(text);
   },
 };
 
@@ -63,7 +71,8 @@ export const ClearInput: Story = {
   },
   play: async ({ canvasElement }) => {
     const canvas = within(canvasElement);
+    const input = canvas.getByLabelText(searchLabel);
     await userEvent.click(canvas.getByRole("button", { name: "Clear filter" }));
-    await expect(canvas.getByRole("textbox")).toHaveValue("");
+    await expect(input).toHaveValue("");
   },
 };
diff --git a/site/src/components/NewFilter/NewFilter.tsx b/site/src/components/NewFilter/NewFilter.tsx
@@ -9,60 +9,68 @@ import { visuallyHidden } from "@mui/utils";
 import type { FC } from "react";
 
 type NewFilterProps = {
+  id: string;
+  label: string;
   value: string;
   error?: string;
   onChange: (value: string) => void;
 };
 
 export const NewFilter: FC<NewFilterProps> = (props) => {
   const theme = useTheme();
-  const { value, error, onChange } = props;
+  const { value, label, id, error, onChange } = props;
   const isEmpty = value.length === 0;
 
   return (
-    <TextField
-      error={Boolean(error)}
-      helperText={error}
-      type="text"
-      InputProps={{
-        size: "small",
-        startAdornment: (
-          <InputAdornment position="start">
-            <SearchOutlined
-              role="presentation"
-              css={{
-                fontSize: 14,
-                color: theme.palette.text.secondary,
-              }}
-            />
-          </InputAdornment>
-        ),
-        endAdornment: !isEmpty && (
-          <Tooltip title="Clear filter">
-            <IconButton
-              size="small"
-              onClick={() => {
-                onChange("");
-              }}
-            >
-              <CloseOutlined
+    <>
+      <label htmlFor={id} css={{ ...visuallyHidden }}>
+        {label}
+      </label>
+      <TextField
+        error={Boolean(error)}
+        helperText={error}
+        type="text"
+        InputProps={{
+          id,
+          size: "small",
+          startAdornment: (
+            <InputAdornment position="start">
+              <SearchOutlined
+                role="presentation"
                 css={{
                   fontSize: 14,
                   color: theme.palette.text.secondary,
                 }}
               />
-              <span css={{ ...visuallyHidden }}>Clear filter</span>
-            </IconButton>
-          </Tooltip>
-        ),
-      }}
-      fullWidth
-      placeholder="Search..."
-      css={{ fontSize: 14, height: "100%" }}
-      value={value}
-      onChange={(e) => {
-        onChange(e.currentTarget.value);
-      }}
-    />
+            </InputAdornment>
+          ),
+          endAdornment: !isEmpty && (
+            <Tooltip title="Clear filter">
+              <IconButton
+                size="small"
+                onClick={() => {
+                  onChange("");
+                }}
+              >
+                <CloseOutlined
+                  css={{
+                    fontSize: 14,
+                    color: theme.palette.text.secondary,
+                  }}
+                />
+                <span css={{ ...visuallyHidden }}>Clear filter</span>
+              </IconButton>
+            </Tooltip>
+          ),
+        }}
+        fullWidth
+        placeholder="Search..."
+        css={{ fontSize: 14, height: "100%" }}
+        value={value}
+        onChange={(e) => {
+          onChange(e.currentTarget.value);
+        }}
+      />
+    </>
   );
 };
