diff --git a/components/atoms/ToggleGroup/toggle-group.stories.tsx b/components/atoms/ToggleGroup/toggle-group.stories.tsx index 9cbe8a8489..c72e635571 100644 --- 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 index e67ad7f39a..1076f1c087 100644 --- 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 index 226b80c61a..3fa3596cf7 100644 --- a/components/molecules/NivoScatterChart/nivo-scatter-chart.tsx +++ b/components/molecules/NivoScatterChart/nivo-scatter-chart.tsx @@ -122,7 +122,7 @@ const NivoScatterPlot = ({ {title} {metadata ? ( - + <> All PRs diff --git a/e2e/repo-contributor-page.spec.ts b/e2e/repo-contributor-page.spec.ts index 75d0e06a39..5456a94287 100644 --- 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"); });