@apliteni/apliteni-ui 0.119.0 → 0.119.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@apliteni/apliteni-ui",
-  "version": "0.119.0",
+  "version": "0.119.1",
   "workspaces": [
     "react"
   ],

package/react/dist/index.js

@@ -3727,7 +3727,7 @@ function AppShell({
     /* @__PURE__ */ jsx34("span", { children: word })
   ] });
   return /* @__PURE__ */ jsxs29("div", { className: `ui-app ui-app--topbar ui-react-app${collapsed ? " is-collapsed" : ""}`, children: [
-    navigable && /* @__PURE__ */ jsxs29("div", { className: "ui-app__rail", children: [
+    navigable && /* @__PURE__ */ jsxs29("div", { className: "ui-app__rail", role: "region", "aria-label": "Sidebar", children: [
       /* @__PURE__ */ jsx34("div", { className: "ui-app__head", children: lockup }),
       sidebar(sections, "Sections"),
       /* @__PURE__ */ jsx34("div", { className: "ui-app__foot", children: /* @__PURE__ */ jsx34("div", { className: "ui-app__fold-row", children: /* @__PURE__ */ jsxs29("button", { type: "button", className: "ui-nav__item ui-app__fold", "aria-expanded": !collapsed, "aria-label": foldLabel, onClick: fold, children: [

package/src/components/shell.js

@@ -309,9 +309,9 @@ export function appShell(options = {}) {
   // the product's mark. why: docs/components.md#the-page-shell
   const brand = compat ? '' : `<a class="ui-app__brand" href="${esc(safeUrl(brandHref))}" aria-label="${esc(word)}">`
     + `${prism(`appb-${++_shellUid}`, 24)}<span>${esc(word)}</span></a>`;
-  // A <div>, not an <aside>: <aside> is the `complementary` landmark, and this holds the
-  // page's primary navigation and the signed-in reader. The <nav> inside it is already
-  // the landmark that names the menu.
+  // The named region covers the brand and fold as well as the navigation.
+  // The primary navigation keeps its own landmark inside the region.
+  // The rail holds primary navigation, so it is not a complementary landmark.
   // A fold needs the toggle that undoes it. `data-rail="auto"` marks a shell whose
   // caller left the choice to the reader; wireShell() applies the stored one there.
   const folded = collapsible && collapsed === true;
@@ -342,7 +342,7 @@ export function appShell(options = {}) {
     ? `<div class="ui-app__well">${shellBar(search, account, signOutHref)}${main}</div>`
     : main;
   const grid = `<div class="ui-app${banded ? ' ui-app--topbar' : ''}${folded ? ' is-collapsed' : ''}"${auto}>
-    <div class="ui-app__rail">
+    <div class="ui-app__rail" role="region" aria-label="Sidebar">
       ${head}
       ${rail}
       ${foot}