From a22e2f9159eec1820827d9551f817956081aafaa Mon Sep 17 00:00:00 2001
From: "francisco.costa" <francisco.costa@clickhouse.com>
Date: Thu, 4 Jan 2024 12:23:36 +0000
Subject: [PATCH] Add aria-pressed attribute to ButtonGroup component.

---
 src/components/ButtonGroup/ButtonGroup.test.tsx | 8 +++++---
 src/components/ButtonGroup/ButtonGroup.tsx      | 4 +++-
 2 files changed, 8 insertions(+), 4 deletions(-)

diff --git a/src/components/ButtonGroup/ButtonGroup.test.tsx b/src/components/ButtonGroup/ButtonGroup.test.tsx
index 1eea66cc..c5be4fdf 100644
--- a/src/components/ButtonGroup/ButtonGroup.test.tsx
+++ b/src/components/ButtonGroup/ButtonGroup.test.tsx
@@ -1,6 +1,7 @@
 import { fireEvent } from "@testing-library/react";
 import { ButtonGroup, ButtonGroupProps } from "./ButtonGroup";
 import { renderCUI } from "@/utils/test-utils";
+import "@testing-library/jest-dom";
 
 describe("ButtonGroup", () => {
   const renderButtonGroup = (props: ButtonGroupProps) =>
@@ -33,14 +34,15 @@ describe("ButtonGroup", () => {
     expect(counter).toEqual(1);
   });
 
-  it("adds 'active' class to the active button", () => {
+  it("adds 'aria-pressed' attr to the active/pressed button", () => {
     const { getByText } = renderButtonGroup({
       options,
       selected: "option2",
     });
 
     const activeButton = getByText("Option 2");
-
-    expect(activeButton).active == true;
+    expect(activeButton).toHaveAttribute("aria-pressed", "true");
+    const inactiveButton = getByText("Option 1");
+    expect(inactiveButton).toHaveAttribute("aria-pressed", "false");
   });
 });
diff --git a/src/components/ButtonGroup/ButtonGroup.tsx b/src/components/ButtonGroup/ButtonGroup.tsx
index e7b74e0d..0e6a21bb 100644
--- a/src/components/ButtonGroup/ButtonGroup.tsx
+++ b/src/components/ButtonGroup/ButtonGroup.tsx
@@ -87,7 +87,9 @@ const leftBorderRadius = `${endRadii} 0px 0px ${endRadii}`;
 const rightBorderRadius = `0px ${endRadii} ${endRadii} 0px`;
 const centerBorderRadius = "var(--click-button-button-group-radii-center)";
 
-const Button = styled.button<ButtonProps>`
+const Button = styled.button.attrs<ButtonProps>(
+  (props: ButtonProps) => ({"aria-pressed": props.$active})
+)`
   box-sizing: border-box;
   display: flex;
   flex-direction: row;