mac-human-design 0.1.23 → 0.1.25

package/changelog.md

@@ -2,6 +2,36 @@
 
 This file tracks changes between published npm versions of `mac-human-design`.
 
+## 0.1.25
+
+### Added
+
+- Added accessible label props, a stable `hd-mac-segmented-control` class,
+  class/style pass-through, and verifier coverage to `MacSegmentedControl`.
+
+### Changed
+
+- `MacSegmentedControl` now has a default accessible label and stable
+  center-origin inline alignment for toolbar usage.
+- Bumped the package to `0.1.25`.
+
+## 0.1.24
+
+### Added
+
+- Added `role="toolbar"`, optional accessible labels, labelled control groups,
+  and title accessibility handling to `MacWindowToolbar`.
+- Added gallery coverage for an explicitly labelled `MacWindowToolbar`.
+- Extended the macOS design verifier to protect toolbar accessibility and
+  Tauri drag-region invariants.
+
+### Changed
+
+- `MacWindowToolbar` now gives leading, content, and trailing control groups
+  stable accessible labels while preserving no-drag regions around interactive
+  controls.
+- Bumped the package to `0.1.24`.
+
 ## 0.1.23
 
 ### Added

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mac-human-design",
-  "version": "0.1.23",
+  "version": "0.1.25",
   "description": "Reusable macOS-oriented UI primitives and SF Symbols bridge for Tauri apps.",
   "type": "module",
   "main": "src/index.ts",

package/scripts/verify-macos-design.mjs

@@ -9,6 +9,8 @@ const wrapperPath = path.join(repoRoot, "src", "components", "MacBaseUI.tsx");
 const symbolIconButtonPath = path.join(repoRoot, "src", "components", "SymbolIconButton.tsx");
 const galleryPath = path.join(repoRoot, "src", "components", "MacBaseUIGallery.tsx");
 const dataTablePath = path.join(repoRoot, "src", "components", "MacDataTable.tsx");
+const windowToolbarPath = path.join(repoRoot, "src", "components", "MacWindowToolbar.tsx");
+const segmentedControlPath = path.join(repoRoot, "src", "components", "MacSegmentedControl.tsx");
 const symbolServicePath = path.join(repoRoot, "src", "symbols", "systemSymbolService.ts");
 
 function readText(filePath) {
@@ -50,6 +52,8 @@ const wrapperSource = readText(wrapperPath);
 const symbolIconButtonSource = readText(symbolIconButtonPath);
 const gallerySource = readText(galleryPath);
 const dataTableSource = readText(dataTablePath);
+const windowToolbarSource = readText(windowToolbarPath);
+const segmentedControlSource = readText(segmentedControlPath);
 const symbolServiceSource = readText(symbolServicePath);
 
 function getCssRuleBody(selector) {
@@ -277,6 +281,47 @@ requireCssDeclarations(".hd-mac-data-table-row-interactive:focus-visible", [
   ["focus ring", /var\(--hd-mac-focus-ring\)/],
 ]);
 
+const missingToolbarRequirements = [
+  ["toolbar role", /role=["']toolbar["']/],
+  ["optional aria label", /aria-label=\{ariaLabel\}/],
+  ["optional aria labelledby", /aria-labelledby=\{ariaLabelledBy\}/],
+  ["leading group role", /role=["']group["'][\s\S]*?aria-label=\{leadingLabel\}/],
+  ["children group role", /role=["']group["'][\s\S]*?aria-label=\{childrenLabel\}/],
+  ["trailing group role", /role=["']group["'][\s\S]*?aria-label=\{trailingLabel\}/],
+  ["drag region root", /data-tauri-drag-region/],
+  ["interactive groups no-drag", /data-tauri-no-drag-region/],
+  ["gallery toolbar accessible label", /<MacWindowToolbar[\s\S]*?ariaLabel=["']Library toolbar["']/],
+].filter(([, pattern]) => !pattern.test(windowToolbarSource) && !pattern.test(gallerySource));
+
+if (missingToolbarRequirements.length > 0) {
+  fail(
+    "Missing MacWindowToolbar accessibility and drag-region invariants.",
+    missingToolbarRequirements.map(([label]) => label),
+  );
+}
+
+const missingSegmentedControlRequirements = [
+  ["stable segmented control class", /"hd-mac-segmented-control"/],
+  ["default accessible label", /ariaLabel = "Segmented control"/],
+  ["aria label prop", /aria-label=\{ariaLabel\}/],
+  ["aria labelledby prop", /aria-labelledby=\{ariaLabelledBy\}/],
+  ["full width class composition", /fullWidth && "hd-mac-segmented-control-full-width"/],
+  ["className pass through", /\bclassName,\s*\n\s*style,/],
+  ["style pass through", /style=\{style\}/],
+].filter(([, pattern]) => !pattern.test(segmentedControlSource));
+
+if (missingSegmentedControlRequirements.length > 0) {
+  fail(
+    "Missing MacSegmentedControl accessibility and layout invariants.",
+    missingSegmentedControlRequirements.map(([label]) => label),
+  );
+}
+
+requireCssDeclarations(".hd-mac-segmented-control", [
+  ["middle inline alignment", /vertical-align\s*:\s*middle\s*;/],
+  ["center transform origin", /transform-origin\s*:\s*center\s*;/],
+]);
+
 const missingSymbolServiceRequirements = [
   ["transparent symbol padding trim", /trimTransparentSymbolPadding/],
   ["alpha threshold trim", /TRANSPARENT_ALPHA_THRESHOLD/],

package/src/components/MacBaseUIGallery.tsx

@@ -416,6 +416,7 @@ export function MacBaseUIGallery() {
           <MacAvatar.Fallback>HD</MacAvatar.Fallback>
         </MacAvatar.Root>
         <MacWindowToolbar
+          ariaLabel="Library toolbar"
           leading={<MacSegmentedControl options={choices} value={segment} onChange={setSegment} />}
           title="Library"
           trailing={<MacIconButton aria-label="Refresh">↻</MacIconButton>}

package/src/components/MacSegmentedControl.tsx

@@ -1,4 +1,4 @@
-import { ReactNode } from "react";
+import { type CSSProperties, type ReactNode } from "react";
 import { MacSegmentedToggleGroup, MacToggle } from "./MacBaseUI";
 
 export type MacSegmentedControlOption<T extends string> = {
@@ -11,21 +11,40 @@ type MacSegmentedControlProps<T extends string> = {
   options: readonly MacSegmentedControlOption<T>[];
   value: T;
   onChange: (value: T) => void;
+  ariaLabel?: string;
+  ariaLabelledBy?: string;
   disabled?: boolean;
   fullWidth?: boolean;
+  className?: string;
+  style?: CSSProperties;
 };
 
+function joinClasses(...classes: Array<string | undefined | false>) {
+  return classes.filter(Boolean).join(" ");
+}
+
 export function MacSegmentedControl<T extends string>({
   options,
   value,
   onChange,
+  ariaLabel = "Segmented control",
+  ariaLabelledBy,
   disabled,
   fullWidth,
+  className,
+  style,
 }: MacSegmentedControlProps<T>) {
   return (
     <MacSegmentedToggleGroup
+      aria-label={ariaLabel}
+      aria-labelledby={ariaLabelledBy}
       aria-disabled={disabled || undefined}
-      className={fullWidth ? "hd-mac-segmented-control-full-width" : undefined}
+      className={joinClasses(
+        "hd-mac-segmented-control",
+        fullWidth && "hd-mac-segmented-control-full-width",
+        className,
+      )}
+      style={style}
       value={[value]}
       disabled={disabled}
       onValueChange={(nextValue) => {

package/src/components/MacWindowToolbar.tsx

@@ -3,9 +3,14 @@ import { motion, type Transition } from "motion/react";
 
 export type MacWindowToolbarProps = {
   leading?: React.ReactNode;
+  leadingLabel?: string;
   title?: React.ReactNode;
   trailing?: React.ReactNode;
+  trailingLabel?: string;
   children?: React.ReactNode;
+  childrenLabel?: string;
+  ariaLabel?: string;
+  ariaLabelledBy?: string;
   className?: string;
   style?: React.CSSProperties;
 };
@@ -21,9 +26,14 @@ const toolbarTransition: Transition = {
 
 export function MacWindowToolbar({
   leading,
+  leadingLabel = "Primary toolbar controls",
   title,
   trailing,
+  trailingLabel = "Secondary toolbar controls",
   children,
+  childrenLabel = "Toolbar controls",
+  ariaLabel,
+  ariaLabelledBy,
   className,
   style,
 }: MacWindowToolbarProps) {
@@ -33,6 +43,9 @@ export function MacWindowToolbar({
       animate={{ opacity: 1, y: 0 }}
       transition={toolbarTransition}
       className={joinClasses("hd-mac-window-toolbar", className)}
+      role="toolbar"
+      aria-label={ariaLabel}
+      aria-labelledby={ariaLabelledBy}
       data-tauri-drag-region
       style={style}
     >
@@ -40,6 +53,8 @@ export function MacWindowToolbar({
         <motion.div
           layout
           className="hd-mac-window-toolbar-group"
+          role="group"
+          aria-label={leadingLabel}
           data-tauri-no-drag-region
           transition={toolbarTransition}
         >
@@ -50,6 +65,7 @@ export function MacWindowToolbar({
         <motion.div
           layout
           className="hd-mac-window-toolbar-title"
+          aria-hidden={typeof title === "string" ? undefined : true}
           data-tauri-drag-region
           transition={toolbarTransition}
         >
@@ -60,6 +76,8 @@ export function MacWindowToolbar({
         <motion.div
           layout
           className="hd-mac-window-toolbar-content"
+          role="group"
+          aria-label={childrenLabel}
           data-tauri-no-drag-region
           transition={toolbarTransition}
         >
@@ -70,6 +88,8 @@ export function MacWindowToolbar({
         <motion.div
           layout
           className="hd-mac-window-toolbar-group"
+          role="group"
+          aria-label={trailingLabel}
           data-tauri-no-drag-region
           transition={toolbarTransition}
         >

package/src/styles/macosBaseUi.css

@@ -923,6 +923,11 @@
   min-height: 28px;
 }
 
+.hd-mac-segmented-control {
+  vertical-align: middle;
+  transform-origin: center;
+}
+
 .hd-mac-separated-segmented-toggle-group {
   gap: 0;
   padding: 0;