Refactor victory-accessible-group to a function component (#2777)

FormidableLabs · Feb 6, 2024 · 3f2da66 · 3f2da66
1 parent d8be277
commit 3f2da66
Show file tree

Hide file tree

Showing 2 changed files with 35 additions and 33 deletions.
diff --git a/.changeset/eleven-dogs-laugh.md 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
@@ -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>
+  );
+};