fix: now the contributor scatter chart toggle group has a label (#3882)

open-sauced · Aug 8, 2024 · adf5c6c · adf5c6c
1 parent 7aad5da
commit adf5c6c
Show file tree

Hide file tree

Showing 4 changed files with 21 additions and 1 deletion.
diff --git a/components/atoms/ToggleGroup/toggle-group.stories.tsx b/components/atoms/ToggleGroup/toggle-group.stories.tsx
@@ -16,6 +16,7 @@ Default.args = {
   children: [<>Option 1</>, <>Option 2</>, <>Option 3</>],
   defaultSelection: "0",
   className: "w-max",
+  label: "Toggle Group",
 };
 AllowNone.args = {
   children: [<>Option 1</>, <>Option 2</>, <>Option 3</>],

diff --git a/components/atoms/ToggleGroup/toggle-group.tsx b/components/atoms/ToggleGroup/toggle-group.tsx
@@ -11,6 +11,7 @@ interface ToggleGroupProps {
   /** Callback function that is called when the user selects an option, and the position of the selected element is passed into as string, starting with '0'. */
   handleChange?: (value: string) => void;
   className?: string;
+  label: string;
 }
 
 /** A ToggleGroup component that allows the user to select one option from a list of options.
@@ -29,6 +30,7 @@ const ToggleGroup = ({
   defaultSelection = "0",
   handleChange,
   className,
+  label,
 }: ToggleGroupProps) => {
   const [value, setValue] = useState(defaultSelection + "");
 
@@ -47,6 +49,7 @@ const ToggleGroup = ({
       value={value}
       onValueChange={handleValueChange}
       className={`bg-light-slate-6 rounded-lg p-0.25 ${className && className}`}
+      aria-label={label}
     >
       {Array.isArray(children) ? (
         children.map((child, index) => (

diff --git a/components/molecules/NivoScatterChart/nivo-scatter-chart.tsx b/components/molecules/NivoScatterChart/nivo-scatter-chart.tsx
@@ -122,7 +122,7 @@ const NivoScatterPlot = ({
           {title}
         </Title>
         {metadata ? (
-          <ToggleGroup handleChange={handleTogglePrFilter} className="hidden lg:flex">
+          <ToggleGroup handleChange={handleTogglePrFilter} className="hidden lg:flex" label="Pull Request State">
             <>
               All PRs
               <span className="ml-2 py-0.5 px-1.5 h-fit bg-slate-200 text-slate-500 border rounded-full text-xs font-semibold">

diff --git a/e2e/repo-contributor-page.spec.ts b/e2e/repo-contributor-page.spec.ts
@@ -17,4 +17,20 @@ test("Loads a repository contributor page", async ({ page }) => {
   const showBotsSwitch = page.getByRole("switch", { name: "Show Bots", exact: true });
   await expect(showBotsSwitch).toBeVisible();
   await expect(showBotsSwitch).toHaveAttribute("aria-checked", "false");
+
+  const prToggleGroup = page.getByRole("group", { name: "Pull Request State", exact: true });
+  await expect(prToggleGroup).toBeVisible();
+
+  // All PRs should be selected by default.
+  const allPrsRadio = prToggleGroup.getByRole("radio", { name: /All PRs\d+/, exact: true });
+  await expect(allPrsRadio).toBeVisible();
+  await expect(allPrsRadio).toHaveAttribute("aria-checked", "true");
+
+  const openPrsRadio = prToggleGroup.getByRole("radio", { name: /Open\d+/, exact: true });
+  await expect(openPrsRadio).toBeVisible();
+  await expect(openPrsRadio).toHaveAttribute("aria-checked", "false");
+
+  const closePRsRadio = prToggleGroup.getByRole("radio", { name: /Closed\d+/, exact: true });
+  await expect(closePRsRadio).toBeVisible();
+  await expect(closePRsRadio).toHaveAttribute("aria-checked", "false");
 });