From 3f2da66e320ee0512109fd460d863a16f25bca8f Mon Sep 17 00:00:00 2001
From: Kenan Yusuf <kenan.m.yusuf@gmail.com>
Date: Tue, 6 Feb 2024 16:07:30 +0000
Subject: [PATCH] Refactor victory-accessible-group to a function component
 (#2777)

---
 .changeset/eleven-dogs-laugh.md               |  5 ++
 .../victory-accessible-group.tsx              | 63 +++++++++----------
 2 files changed, 35 insertions(+), 33 deletions(-)
 create mode 100644 .changeset/eleven-dogs-laugh.md

diff --git a/.changeset/eleven-dogs-laugh.md b/.changeset/eleven-dogs-laugh.md
new file mode 100644
index 000000000..e3026b79d
--- /dev/null
+++ b/.changeset/eleven-dogs-laugh.md
@@ -0,0 +1,5 @@
+---
+"victory-core": patch
+---
+
+Refactor victory-accessible-group to a function component
diff --git a/packages/victory-core/src/victory-accessible-group/victory-accessible-group.tsx b/packages/victory-core/src/victory-accessible-group/victory-accessible-group.tsx
index 74ee25c25..aa754c09e 100644
--- a/packages/victory-core/src/victory-accessible-group/victory-accessible-group.tsx
+++ b/packages/victory-core/src/victory-accessible-group/victory-accessible-group.tsx
@@ -9,37 +9,34 @@ export interface VictoryAccessibleGroupProps {
   tabIndex?: number;
 }
 
-export class VictoryAccessibleGroup extends React.Component<VictoryAccessibleGroupProps> {
-  static displayName = "VictoryAccessibleGroup";
+export const VictoryAccessibleGroup = ({
+  desc,
+  children,
+  tabIndex,
+  className = "VictoryAccessibleGroup",
+  ...props
+}: VictoryAccessibleGroupProps) => {
+  const descId =
+    desc && (props["aria-describedby"] || desc.split(" ").join("-"));
 
-  static defaultProps = {
-    className: "VictoryAccessibleGroup",
-  };
-
-  render() {
-    const { desc, children, className, tabIndex } = this.props;
-    const descId =
-      desc && (this.props["aria-describedby"] || desc.split(" ").join("-"));
-
-    return desc ? (
-      <g
-        aria-label={this.props["aria-label"]}
-        aria-describedby={descId}
-        className={className}
-        tabIndex={tabIndex}
-      >
-        <desc id={descId}>{desc}</desc>
-        {children}
-      </g>
-    ) : (
-      <g
-        aria-label={this.props["aria-label"]}
-        aria-describedby={this.props["aria-describedby"]}
-        className={className}
-        tabIndex={tabIndex}
-      >
-        {children}
-      </g>
-    );
-  }
-}
+  return desc ? (
+    <g
+      aria-label={props["aria-label"]}
+      aria-describedby={descId}
+      className={className}
+      tabIndex={tabIndex}
+    >
+      <desc id={descId}>{desc}</desc>
+      {children}
+    </g>
+  ) : (
+    <g
+      aria-label={props["aria-label"]}
+      aria-describedby={props["aria-describedby"]}
+      className={className}
+      tabIndex={tabIndex}
+    >
+      {children}
+    </g>
+  );
+};