@canopy-iiif/app 1.5.7 → 1.5.9

package/ui/dist/server.mjs

@@ -722,7 +722,7 @@ function Hero({
   const breadcrumbNode = isBreadcrumbVariant && breadcrumbItems.length ? /* @__PURE__ */ React9.createElement("nav", { className: "canopy-interstitial__breadcrumb", "aria-label": "Breadcrumb" }, breadcrumbItems.map((item2, idx) => {
     const isLast = idx === breadcrumbItems.length - 1;
     const key = `${item2.title || idx}-${idx}`;
-    const content = !isLast && item2.href ? /* @__PURE__ */ React9.createElement("a", { href: item2.href }, item2.title) : /* @__PURE__ */ React9.createElement("span", { className: "canopy-interstitial__breadcrumb-current" }, item2.title);
+    const content = !isLast && item2.href ? /* @__PURE__ */ React9.createElement("a", { href: item2.href }, item2.title) : /* @__PURE__ */ React9.createElement("span", { className: "canopy-interstitial__breadcrumb-current", "aria-current": "page" }, item2.title);
     return /* @__PURE__ */ React9.createElement(React9.Fragment, { key }, idx > 0 ? /* @__PURE__ */ React9.createElement(
       "span",
       {
@@ -967,10 +967,14 @@ function ContentNavigation({
 }) {
   const isBrowser = typeof window !== "undefined" && typeof document !== "undefined";
   const savedDepthsRef = React11.useRef(null);
+  const [isExpanded, setIsExpanded] = React11.useState(false);
+  const handleToggle = React11.useCallback(() => {
+    setIsExpanded((prev) => !prev);
+  }, []);
   if ((!items || !items.length) && !headingId) return null;
   const combinedClassName = [
     "canopy-sub-navigation canopy-content-navigation",
-    "canopy-content-navigation--collapsed",
+    isExpanded ? "canopy-content-navigation--expanded" : "canopy-content-navigation--collapsed",
     className
   ].filter(Boolean).join(" ");
   const effectiveHeading = heading || pageTitle || null;
@@ -1181,16 +1185,17 @@ function ContentNavigation({
       {
         type: "button",
         className: "canopy-content-navigation__toggle",
-        "aria-expanded": "false",
-        "aria-label": "Show section navigation",
-        title: "Show section navigation",
+        "aria-expanded": isExpanded,
+        "aria-label": isExpanded ? "Hide section navigation" : "Show section navigation",
+        title: isExpanded ? "Hide section navigation" : "Show section navigation",
+        onClick: handleToggle,
         "data-canopy-content-nav-toggle": "true",
         "data-show-label": "Show",
         "data-hide-label": "Hide",
         "data-show-full-label": "Show section navigation",
         "data-hide-full-label": "Hide section navigation"
       },
-      "Show"
+      isExpanded ? "Hide" : "Show"
     ),
     /* @__PURE__ */ React11.createElement("ul", { className: "canopy-sub-navigation__list", role: "list" }, topLink || nestedItems)
   );
@@ -1415,7 +1420,7 @@ import React16 from "react";
 
 // ui/src/Icons.jsx
 import React13 from "react";
-var MagnifyingGlassIcon = (props) => /* @__PURE__ */ React13.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 512 512", ...props }, /* @__PURE__ */ React13.createElement("path", { d: "M456.69 421.39L362.6 327.3a173.81 173.81 0 0034.84-104.58C397.44 126.38 319.06 48 222.72 48S48 126.38 48 222.72s78.38 174.72 174.72 174.72A173.81 173.81 0 00327.3 362.6l94.09 94.09a25 25 0 0035.3-35.3zM97.92 222.72a124.8 124.8 0 11124.8 124.8 124.95 124.95 0 01-124.8-124.8z" }));
+var MagnifyingGlassIcon = (props) => /* @__PURE__ */ React13.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 512 512", "aria-hidden": "true", focusable: "false", ...props }, /* @__PURE__ */ React13.createElement("path", { d: "M456.69 421.39L362.6 327.3a173.81 173.81 0 0034.84-104.58C397.44 126.38 319.06 48 222.72 48S48 126.38 48 222.72s78.38 174.72 174.72 174.72A173.81 173.81 0 00327.3 362.6l94.09 94.09a25 25 0 0035.3-35.3zM97.92 222.72a124.8 124.8 0 11124.8 124.8 124.95 124.95 0 01-124.8-124.8z" }));
 
 // ui/src/search/SearchPanelForm.jsx
 import React14 from "react";
@@ -1554,7 +1559,7 @@ function SearchPanelForm(props = {}) {
       onPointerDown: handlePointerDown,
       "data-has-value": hasValue ? "1" : "0"
     },
-    /* @__PURE__ */ React14.createElement("label", { htmlFor: inputId, className: "canopy-search-form__label" }, /* @__PURE__ */ React14.createElement(MagnifyingGlassIcon, { className: "canopy-search-form__icon" }), /* @__PURE__ */ React14.createElement(
+    /* @__PURE__ */ React14.createElement("label", { htmlFor: inputId, className: "canopy-search-form__label" }, /* @__PURE__ */ React14.createElement(MagnifyingGlassIcon, { className: "canopy-search-form__icon" }), /* @__PURE__ */ React14.createElement("span", { className: "sr-only" }, "Search"), /* @__PURE__ */ React14.createElement(
       "input",
       {
         id: inputId,
@@ -1564,7 +1569,6 @@ function SearchPanelForm(props = {}) {
         "data-canopy-search-form-input": true,
         placeholder,
         className: "canopy-search-form__input",
-        "aria-label": "Search",
         ref: inputRef,
         onChange: handleInputChange,
         onInput: handleInputChange
@@ -2015,7 +2019,15 @@ function CanopyHeader(props = {}) {
         className: "canopy-nav-links canopy-header__desktop-nav",
         "aria-label": "Primary navigation"
       },
-      navLinks.map((link) => /* @__PURE__ */ React19.createElement("a", { key: link.href, href: link.href }, link.label || link.href))
+      navLinks.map((link) => /* @__PURE__ */ React19.createElement(
+        "a",
+        {
+          key: link.href,
+          href: link.href,
+          "aria-current": link.isActive ? "page" : void 0
+        },
+        link.label || link.href
+      ))
     ),
     /* @__PURE__ */ React19.createElement("div", { className: "canopy-header__actions" }, /* @__PURE__ */ React19.createElement(
       "button",
@@ -2094,7 +2106,15 @@ function CanopyHeader(props = {}) {
         className: "canopy-nav-links canopy-modal__nav",
         "aria-label": "Primary navigation"
       },
-      navLinks.map((link) => /* @__PURE__ */ React19.createElement("a", { key: link.href, href: link.href }, link.label || link.href))
+      navLinks.map((link) => /* @__PURE__ */ React19.createElement(
+        "a",
+        {
+          key: link.href,
+          href: link.href,
+          "aria-current": link.isActive ? "page" : void 0
+        },
+        link.label || link.href
+      ))
     ),
     hasSectionNav ? /* @__PURE__ */ React19.createElement(
       "nav",
@@ -2171,6 +2191,7 @@ function TeaserCard({
       {
         src: thumbnail,
         alt: "",
+        "aria-hidden": "true",
         loading: "lazy",
         className: "canopy-search-teaser__thumb-img"
       }
@@ -2303,6 +2324,7 @@ function Card({
         {
           src,
           alt: alt || title || "",
+          "aria-hidden": !alt && !title ? "true" : void 0,
           loading: "lazy",
           onLoad: () => setImageLoaded(true),
           onError: () => setImageLoaded(true)
@@ -2313,6 +2335,7 @@ function Card({
       {
         src,
         alt: alt || title || "",
+        "aria-hidden": !alt && !title ? "true" : void 0,
         loading: "lazy",
         onLoad: () => setImageLoaded(true),
         onError: () => setImageLoaded(true),
@@ -3991,6 +4014,8 @@ function DocsCodeBlock(props = {}) {
         {
           type: "button",
           onClick: handleCopy,
+          "aria-live": "polite",
+          "aria-label": copied ? "Copied to clipboard" : "Copy code to clipboard",
           style: {
             border: "1px solid var(--color-accent-200, )",
             borderRadius: "6px",