@duskmoon-dev/art-components 0.3.3 → 0.4.1

package/README.md

@@ -50,6 +50,19 @@ export function Demo() {
 `ArtCircularGalleryItem` is exported as the item type for
 `ArtCircularGallery`.
 
+`ArtCircularGallery` keeps its image links accessible by default. Use
+`decorative` only when the gallery is purely visual; its links are then removed
+from keyboard tab order. An explicit `aria-hidden` value on the root takes
+precedence.
+
+`ArtCsswitch` buttons are keyboard accessible and named by default. Set
+`decorative` when the console is only an illustration; its buttons then leave
+the tab order. An explicit root `aria-hidden` value takes precedence.
+
+`ArtGeminiInput` names its default `+` and `>` buttons Add and Send. When
+replacing either glyph with custom icon content, provide an accessible button
+name through `beforeButtonProps` or `afterButtonProps` if the content has none.
+
 Most decorative components accept `size="sm" | "default" | "lg"`; `ArtMoon`
 and `ArtSun` also accept `size="xl"`. Components forward refs to their root
 element, accept `className`, `style`, and DuskMoon CSS custom properties through

package/dist/index.js

@@ -81,12 +81,18 @@ var ArtMountain = forwardRef(({ size = "default", decorative, className, ...prop
   ...getDecorativeProps(decorative, props),
   ...props,
   children: [
-    Array.from({ length: 4 }, (_, index) => /* @__PURE__ */ jsx("div", {
-      className: "mountain"
-    }, `mountain-${index}`)),
-    Array.from({ length: 3 }, (_, index) => /* @__PURE__ */ jsx("div", {
-      className: "tree"
-    }, `tree-${index}`)),
+    /* @__PURE__ */ jsx("div", {
+      className: "mountains",
+      children: Array.from({ length: 4 }, (_, index) => /* @__PURE__ */ jsx("div", {
+        className: "mountain"
+      }, `mountain-${index}`))
+    }),
+    /* @__PURE__ */ jsx("div", {
+      className: "trees",
+      children: Array.from({ length: 3 }, (_, index) => /* @__PURE__ */ jsx("div", {
+        className: "tree"
+      }, `tree-${index}`))
+    }),
     /* @__PURE__ */ jsx("div", {
       className: "lights",
       children: Array.from({ length: 9 }, (_, index) => /* @__PURE__ */ jsx("div", {
@@ -187,20 +193,20 @@ var ArtCircularGallery = forwardRef(({
   title = "Gallery",
   items,
   size = "default",
-  decorative,
+  decorative = false,
   className,
   ...props
 }, ref) => {
   const reactId = useId().replaceAll(":", "");
+  const decorativeProps = getDecorativeProps(decorative, props);
+  const rootAriaHidden = props["aria-hidden"] ?? ("aria-hidden" in decorativeProps ? decorativeProps["aria-hidden"] : undefined);
+  const linksAreHidden = rootAriaHidden === true || rootAriaHidden === "true";
   return /* @__PURE__ */ jsxs("div", {
     ref,
     className: cn("art-circular-gallery", sizeClass("art-circular-gallery", size), className),
-    ...getDecorativeProps(decorative, props),
+    ...decorativeProps,
     ...props,
     children: [
-      title ? /* @__PURE__ */ jsx("h1", {
-        children: title
-      }) : null,
       items.map((item, index) => {
         const id = item.id ?? `${reactId}-gallery-item-${index + 1}`;
         const itemStyle = {
@@ -215,13 +221,17 @@ var ArtCircularGallery = forwardRef(({
             href: item.href ?? `#${id}`,
             target: item.target,
             rel: item.rel,
+            tabIndex: linksAreHidden ? -1 : undefined,
             children: /* @__PURE__ */ jsx("img", {
               src: item.src,
               alt: item.alt ?? item.title
             })
           })
         }, id);
-      })
+      }),
+      title ? /* @__PURE__ */ jsx("h1", {
+        children: title
+      }) : null
     ]
   });
 });
@@ -302,7 +312,10 @@ function Flower({ index }) {
           }, leafIndex)),
           /* @__PURE__ */ jsx("div", {
             className: "flower__white-circle"
-          })
+          }),
+          Array.from({ length: 8 }, (_, lightIndex) => /* @__PURE__ */ jsx("div", {
+            className: cn("flower__light", `flower__light--${lightIndex + 1}`)
+          }, lightIndex))
         ]
       }),
       /* @__PURE__ */ jsx("div", {
@@ -310,10 +323,7 @@ function Flower({ index }) {
         children: Array.from({ length: leafCount }, (_, leafIndex) => /* @__PURE__ */ jsx("div", {
           className: cn("flower__line__leaf", `flower__line__leaf--${leafIndex + 1}`)
         }, leafIndex))
-      }),
-      Array.from({ length: 8 }, (_, lightIndex) => /* @__PURE__ */ jsx("div", {
-        className: cn("flower__light", `flower__light--${lightIndex + 1}`)
-      }, lightIndex))
+      })
     ]
   });
 }
@@ -463,7 +473,7 @@ var ArtColorSpin = forwardRef(({ size = "default", decorative, className, ...pro
   ...props,
   children: /* @__PURE__ */ jsx("ul", {
     children: Array.from({ length: 4 }, (_, index) => /* @__PURE__ */ jsx("li", {
-      style: { "--i": index }
+      style: { "--i": index + 1 }
     }, index))
   })
 }));
@@ -489,23 +499,35 @@ var ArtSynthwaveStarfield = forwardRef(({ size = "default", paused = false, deco
   ]
 }));
 ArtSynthwaveStarfield.displayName = "ArtSynthwaveStarfield";
-function SwitchButton({ className }) {
+function SwitchButton({
+  className,
+  label,
+  hidden
+}) {
   return /* @__PURE__ */ jsx("button", {
     type: "button",
     className,
-    tabIndex: -1,
-    "aria-hidden": "true"
+    "aria-label": label,
+    tabIndex: hidden ? -1 : undefined,
+    "aria-hidden": hidden || undefined
   });
 }
-function SwitchBar() {
+function SwitchBar({
+  side,
+  hidden
+}) {
   return /* @__PURE__ */ jsxs("div", {
     className: "bar",
     children: [
       /* @__PURE__ */ jsx(SwitchButton, {
-        className: "sub-lr"
+        className: "sub-lr",
+        label: `${side} SL`,
+        hidden
       }),
       /* @__PURE__ */ jsx(SwitchButton, {
-        className: "sub-rr"
+        className: "sub-rr",
+        label: `${side} SR`,
+        hidden
       }),
       /* @__PURE__ */ jsx("span", {
         className: "minus-sign"
@@ -538,62 +560,96 @@ function SwitchConnector() {
     ]
   });
 }
-function LeftJoycon() {
+function LeftJoycon({ hidden }) {
   return /* @__PURE__ */ jsxs("div", {
     className: "controller",
     children: [
-      /* @__PURE__ */ jsx(SwitchBar, {}),
+      /* @__PURE__ */ jsx(SwitchBar, {
+        side: "Left",
+        hidden
+      }),
       /* @__PURE__ */ jsx(SwitchConnector, {}),
       /* @__PURE__ */ jsx(SwitchButton, {
-        className: "minus"
+        className: "minus",
+        label: "Minus",
+        hidden
       }),
       /* @__PURE__ */ jsx(SwitchButton, {
-        className: "mushroom round"
+        className: "mushroom round",
+        label: "Left stick",
+        hidden
       }),
       /* @__PURE__ */ jsx(SwitchButton, {
-        className: "direction arrow up round"
+        className: "direction arrow up round",
+        label: "Up",
+        hidden
       }),
       /* @__PURE__ */ jsx(SwitchButton, {
-        className: "direction arrow down round"
+        className: "direction arrow down round",
+        label: "Down",
+        hidden
       }),
       /* @__PURE__ */ jsx(SwitchButton, {
-        className: "direction arrow left round"
+        className: "direction arrow left round",
+        label: "Left",
+        hidden
       }),
       /* @__PURE__ */ jsx(SwitchButton, {
-        className: "direction arrow right round"
+        className: "direction arrow right round",
+        label: "Right",
+        hidden
       }),
       /* @__PURE__ */ jsx(SwitchButton, {
-        className: "menu"
+        className: "menu",
+        label: "Capture",
+        hidden
       })
     ]
   });
 }
-function RightJoycon() {
+function RightJoycon({ hidden }) {
   return /* @__PURE__ */ jsxs("div", {
     className: "controller right",
     children: [
-      /* @__PURE__ */ jsx(SwitchBar, {}),
+      /* @__PURE__ */ jsx(SwitchBar, {
+        side: "Right",
+        hidden
+      }),
       /* @__PURE__ */ jsx(SwitchConnector, {}),
       /* @__PURE__ */ jsx(SwitchButton, {
-        className: "minus plus"
+        className: "minus plus",
+        label: "Plus",
+        hidden
       }),
       /* @__PURE__ */ jsx(SwitchButton, {
-        className: "mushroom round"
+        className: "mushroom round",
+        label: "Right stick",
+        hidden
       }),
       /* @__PURE__ */ jsx(SwitchButton, {
-        className: "direction x round"
+        className: "direction x round",
+        label: "X",
+        hidden
       }),
       /* @__PURE__ */ jsx(SwitchButton, {
-        className: "direction y round"
+        className: "direction y round",
+        label: "Y",
+        hidden
       }),
       /* @__PURE__ */ jsx(SwitchButton, {
-        className: "direction a round"
+        className: "direction a round",
+        label: "A",
+        hidden
       }),
       /* @__PURE__ */ jsx(SwitchButton, {
-        className: "direction b round"
+        className: "direction b round",
+        label: "B",
+        hidden
       }),
       /* @__PURE__ */ jsx(SwitchButton, {
-        className: "home round"
+        className: "home round",
+        label: "Home",
+        hidden
       })
     ]
   });
@@ -658,18 +714,27 @@ function ComfortGrip() {
     ]
   });
 }
-var ArtCsswitch = forwardRef(({ size = "default", decorative, className, ...props }, ref) => /* @__PURE__ */ jsxs("div", {
-  ref,
-  className: cn("art-csswitch", sizeClass("art-csswitch", size), className),
-  ...getDecorativeProps(decorative, props),
-  ...props,
-  children: [
-    /* @__PURE__ */ jsx(SwitchBody, {}),
-    /* @__PURE__ */ jsx(ComfortGrip, {}),
-    /* @__PURE__ */ jsx(LeftJoycon, {}),
-    /* @__PURE__ */ jsx(RightJoycon, {})
-  ]
-}));
+var ArtCsswitch = forwardRef(({ size = "default", decorative = false, className, ...props }, ref) => {
+  const decorativeProps = getDecorativeProps(decorative, props);
+  const rootAriaHidden = props["aria-hidden"] ?? ("aria-hidden" in decorativeProps ? decorativeProps["aria-hidden"] : undefined);
+  const controlsAreHidden = rootAriaHidden === true || rootAriaHidden === "true";
+  return /* @__PURE__ */ jsxs("div", {
+    ref,
+    className: cn("art-csswitch", sizeClass("art-csswitch", size), className),
+    ...decorativeProps,
+    ...props,
+    children: [
+      /* @__PURE__ */ jsx(SwitchBody, {}),
+      /* @__PURE__ */ jsx(ComfortGrip, {}),
+      /* @__PURE__ */ jsx(LeftJoycon, {
+        hidden: controlsAreHidden
+      }),
+      /* @__PURE__ */ jsx(RightJoycon, {
+        hidden: controlsAreHidden
+      })
+    ]
+  });
+});
 ArtCsswitch.displayName = "ArtCsswitch";
 var ArtCSSwitch = ArtCsswitch;
 var ArtSnowballPreloader = forwardRef(({ size = "default", decorative, className, ...props }, ref) => /* @__PURE__ */ jsxs("div", {
@@ -694,10 +759,10 @@ var ArtSnowballPreloader = forwardRef(({ size = "default", decorative, className
           className: "art-snowball-preloader-ball-texture"
         }),
         /* @__PURE__ */ jsx("div", {
-          className: "art-snowball-preloader-ball-inner-shadow"
+          className: "art-snowball-preloader-ball-outer-shadow"
         }),
         /* @__PURE__ */ jsx("div", {
-          className: "art-snowball-preloader-ball-outer-shadow"
+          className: "art-snowball-preloader-ball-inner-shadow"
         }),
         /* @__PURE__ */ jsx("div", {
           className: "art-snowball-preloader-ball-side-shadows"
@@ -737,6 +802,8 @@ var ArtGeminiInput = forwardRef(({
     type: afterButtonType = "button",
     ...restAfterButtonProps
   } = afterButtonProps ?? {};
+  const beforeLabel = beforeButtonProps?.["aria-label"] ?? (before === "+" && beforeButtonProps?.["aria-labelledby"] === undefined ? "Add" : undefined);
+  const afterLabel = afterButtonProps?.["aria-label"] ?? (after === ">" && afterButtonProps?.["aria-labelledby"] === undefined ? "Send" : undefined);
   return /* @__PURE__ */ jsxs("div", {
     ref,
     className: cn("art-gemini-input", sizeClass("art-gemini-input", size), className),
@@ -751,8 +818,9 @@ var ArtGeminiInput = forwardRef(({
           before !== null ? /* @__PURE__ */ jsx("button", {
             type: beforeButtonType,
             className: cn("art-gemini-input-btn", beforeButtonClassName),
-            disabled: disabled || beforeButtonProps?.disabled,
             ...restBeforeButtonProps,
+            disabled: disabled || beforeButtonProps?.disabled,
+            "aria-label": beforeLabel,
             children: before
           }) : null,
           /* @__PURE__ */ jsx("textarea", {
@@ -762,7 +830,7 @@ var ArtGeminiInput = forwardRef(({
             onChange,
             placeholder,
             name,
-            rows,
+            rows: rows ?? 1,
             disabled,
             readOnly,
             required,
@@ -771,8 +839,9 @@ var ArtGeminiInput = forwardRef(({
           after !== null ? /* @__PURE__ */ jsx("button", {
             type: afterButtonType,
             className: cn("art-gemini-input-btn", afterButtonClassName),
-            disabled: disabled || afterButtonProps?.disabled,
             ...restAfterButtonProps,
+            disabled: disabled || afterButtonProps?.disabled,
+            "aria-label": afterLabel,
             children: after
           }) : null
         ]

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@duskmoon-dev/art-components",
-  "version": "0.3.3",
+  "version": "0.4.1",
   "description": "React components for @duskmoon-dev/css-art pure CSS illustrations",
   "type": "module",
   "main": "./dist/index.js",
@@ -49,7 +49,7 @@
     "react-dom": ">=19.0.0"
   },
   "devDependencies": {
-    "@duskmoon-dev/css-art": "1.19.9",
+    "@duskmoon-dev/css-art": "1.20.3",
     "@testing-library/react": "16.3.2",
     "@types/react": "19.2.18",
     "@types/react-dom": "19.2.4",