@awesomephant/reactcake 1.1.1 → 1.1.2

package/lib/Html/index.tsx

@@ -6,12 +6,15 @@ interface HtmlProps extends LayoutProps {
   children?: ReactNode;
 }
 
-const Html = ({ overflow = "visible", children }: HtmlProps) => {
+const Html = ({ overflow = "visible", label, labelledBy, describedBy, children }: HtmlProps) => {
   const { padding } = useReactCake();
 
   return (
     <div
       className="reactcake-html"
+      aria-label={labelledBy}
+      aria-describedby={describedBy}
+      role={label ? "figure" : "none"}
       style={{
         position: "absolute",
         top: `${padding.top}px`,

package/lib/ScaledSvg/index.tsx

@@ -3,16 +3,27 @@ import { useReactCake } from "../ReactCake";
 import { LayoutProps } from "../types";
 
 interface SvgProps extends LayoutProps {
+  title?: string;
   children?: ReactNode;
 }
 
-const ScaledSvg = ({ children, overflow = "visible" }: SvgProps) => {
+const ScaledSvg = ({
+  children,
+  label,
+  labelledBy,
+  describedBy,
+  title,
+  overflow = "visible",
+}: SvgProps) => {
   const { padding } = useReactCake();
   return (
     <>
       <style>{`svg * { vector-effect: non-scaling-stroke;}`}</style>
       <svg
         className="reactcake-svg"
+        aria-label={labelledBy}
+        aria-describedby={describedBy}
+        role={label ? "figure" : "none"}
         preserveAspectRatio="none"
         height={`calc(100% - ${padding.top}px - ${padding.bottom}px`}
         width={`calc(100% - ${padding.left}px - ${padding.right}px`}
@@ -24,6 +35,7 @@ const ScaledSvg = ({ children, overflow = "visible" }: SvgProps) => {
           overflow: overflow,
         }}
       >
+        {title && <title>{title}</title>}
         {children}
       </svg>
     </>

package/lib/Svg/index.tsx

@@ -3,10 +3,11 @@ import { useReactCake } from "../ReactCake";
 import { LayoutProps } from "../types";
 
 interface SvgProps extends LayoutProps {
+  title?: string;
   children?: ReactNode;
 }
 
-const Svg = ({ children, overflow = "hidden" }: SvgProps) => {
+const Svg = ({ children, title, overflow = "hidden" }: SvgProps) => {
   const { padding } = useReactCake();
   return (
     <svg
@@ -24,6 +25,7 @@ const Svg = ({ children, overflow = "hidden" }: SvgProps) => {
         overflow: overflow,
       }}
     >
+      {title && <title>{title}</title>}
       <g transform={`translate(${padding.left} ${padding.top})`}>{children}</g>
     </svg>
   );

package/lib/types.ts

@@ -39,5 +39,8 @@ export interface ContextValue {
 }
 
 export interface LayoutProps {
-  overflow?: "hidden" | "visible"
+  overflow?: "hidden" | "visible",
+  label?: string;
+  labelledBy?: string;
+  describedBy?: string;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@awesomephant/reactcake",
-  "version": "1.1.1",
+  "version": "1.1.2",
   "description": "A headless chart framework for React inspired by Layercake",
   "keywords": [
     "react",