@contractspec/lib.accessibility 3.7.6 → 3.7.7

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/README.md CHANGED
@@ -1,79 +1,67 @@
1
1
  # @contractspec/lib.accessibility
2
2
 
3
- Website: https://contractspec.io/
3
+ Website: https://contractspec.io
4
4
 
5
+ **WCAG compliance utilities and validators.**
5
6
 
6
- Stable exports of accessibility primitives for LSSM web apps, ensuring WCAG compliance and inclusive design.
7
+ ## What It Provides
7
8
 
8
- ## Purpose
9
-
10
- To provide a standardized set of accessibility components and hooks that handle focus management, screen reader announcements, and motion preferences across Next.js and React applications.
9
+ - **Layer**: lib.
10
+ - **Consumers**: design-system, example apps.
11
+ - Related ContractSpec packages include `@contractspec/lib.design-system`, `@contractspec/lib.ui-kit`, `@contractspec/lib.ui-kit-web`, `@contractspec/tool.bun`, `@contractspec/tool.typescript`.
12
+ - Related ContractSpec packages include `@contractspec/lib.design-system`, `@contractspec/lib.ui-kit`, `@contractspec/lib.ui-kit-web`, `@contractspec/tool.bun`, `@contractspec/tool.typescript`.
11
13
 
12
14
  ## Installation
13
15
 
14
- ```bash
15
- npm install @contractspec/lib.accessibility
16
- # or
17
- bun add @contractspec/lib.accessibility
18
- ```
16
+ `npm install @contractspec/lib.accessibility`
19
17
 
20
- ## Key Concepts
18
+ or
21
19
 
22
- - **Focus Management**: Automatically handle focus transitions on route changes.
23
- - **Live Regions**: reliably announce dynamic content updates to screen readers.
24
- - **Reduced Motion**: Respect user system preferences for animation.
25
- - **Hidden Content**: Visually hide content while keeping it available for assistive technology.
20
+ `bun add @contractspec/lib.accessibility`
26
21
 
27
- ## Exports
22
+ ## Usage
28
23
 
29
- - `SkipLink`: A link to skip navigation, visible on focus.
30
- - `VisuallyHidden`: Component to hide content from sighted users but keep it for screen readers.
31
- - `SRLiveRegionProvider`, `useSRLiveRegion`: Context and hook for managing live region announcements.
32
- - `RouteAnnouncer`: Component that announces page title/path changes on navigation.
33
- - `FocusOnRouteChange`: Component that resets focus to body or main content on navigation.
34
- - `useReducedMotion`: Hook to detect if the user prefers reduced motion.
24
+ Import the root entrypoint from `@contractspec/lib.accessibility`, or choose a documented subpath when you only need one part of the package surface.
35
25
 
36
- ## Usage
26
+ ## Architecture
27
+
28
+ - `src/AccessibilityPanel.tsx` is part of the package's public or composition surface.
29
+ - `src/AccessibilityProvider.tsx` is part of the package's public or composition surface.
30
+ - `src/index.ts` is the root public barrel and package entrypoint.
31
+ - `src/nativewind-env.d.ts` is part of the package's public or composition surface.
32
+ - `src/next-route-announcer.tsx` is part of the package's public or composition surface.
33
+ - `src/preferences.tsx` is part of the package's public or composition surface.
34
+ - `src/styles.css` is part of the package's public or composition surface.
35
+
36
+ ## Public Entry Points
37
+
38
+ - Export `.` resolves through `./src/index.ts`.
39
+ - Export `./AccessibilityPanel` resolves through `./src/AccessibilityPanel.tsx`.
40
+ - Export `./AccessibilityProvider` resolves through `./src/AccessibilityProvider.tsx`.
41
+ - Export `./nativewind-env.d` resolves through `./src/nativewind-env.d.ts`.
42
+ - Export `./next-route-announcer` resolves through `./src/next-route-announcer.tsx`.
43
+ - Export `./preferences` resolves through `./src/preferences.tsx`.
44
+
45
+ ## Local Commands
46
+
47
+ - `bun run dev` — contractspec-bun-build dev
48
+ - `bun run build` — bun run prebuild && bun run build:bundle && bun run build:types
49
+ - `bun run lint` — bun lint:fix
50
+ - `bun run lint:check` — biome check .
51
+ - `bun run lint:fix` — biome check --write --unsafe --only=nursery/useSortedClasses . && biome check --write .
52
+ - `bun run typecheck` — tsc --noEmit
53
+ - `bun run publish:pkg` — bun publish --tolerate-republish --ignore-scripts --verbose
54
+ - `bun run publish:pkg:canary` — bun publish:pkg --tag canary
55
+ - `bun run clean` — rimraf dist .turbo
56
+ - `bun run build:bundle` — contractspec-bun-build transpile
57
+ - `bun run build:types` — contractspec-bun-build types
58
+ - `bun run prebuild` — contractspec-bun-build prebuild
59
+
60
+ ## Recent Updates
61
+
62
+ - Replace eslint+prettier by biomejs to optimize speed.
63
+
64
+ ## Notes
37
65
 
38
- ### App Setup
39
-
40
- Wrap your application (e.g., in `layout.tsx` or `_app.tsx`) with the necessary providers and components:
41
-
42
- ```tsx
43
- import {
44
- SRLiveRegionProvider,
45
- RouteAnnouncer,
46
- SkipLink,
47
- } from '@contractspec/lib.accessibility';
48
-
49
- export default function RootLayout({ children }) {
50
- return (
51
- <html lang="en">
52
- <body>
53
- <SRLiveRegionProvider>
54
- <SkipLink />
55
- <RouteAnnouncer />
56
- <main id="main-content">{children}</main>
57
- </SRLiveRegionProvider>
58
- </body>
59
- </html>
60
- );
61
- }
62
- ```
63
-
64
- ### Announcing Dynamic Changes
65
-
66
- ```tsx
67
- import { useSRLiveRegion } from '@contractspec/lib.accessibility';
68
-
69
- export function TodoList() {
70
- const { announce } = useSRLiveRegion();
71
-
72
- const addTodo = () => {
73
- // ... add logic
74
- announce('Todo added successfully', 'polite');
75
- };
76
-
77
- return <button onClick={addTodo}>Add Todo</button>;
78
- }
79
- ```
66
+ - WCAG compliance standards must be preserved; changes affect all UI surfaces.
67
+ - Do not weaken or remove existing validators without coordinating with design-system consumers.
@@ -128,6 +128,7 @@ function a11yRootClassName() {
128
128
  }
129
129
 
130
130
  // src/AccessibilityPanel.tsx
131
+ import { Button } from "@contractspec/lib.design-system";
131
132
  import {
132
133
  Dialog,
133
134
  DialogClose,
@@ -137,8 +138,6 @@ import {
137
138
  DialogTitle,
138
139
  DialogTrigger
139
140
  } from "@contractspec/lib.ui-kit-web/ui/dialog";
140
- import { Button } from "@contractspec/lib.design-system";
141
- import { Switch } from "@contractspec/lib.ui-kit-web/ui/switch";
142
141
  import { Label } from "@contractspec/lib.ui-kit-web/ui/label";
143
142
  import {
144
143
  Select,
@@ -147,6 +146,7 @@ import {
147
146
  SelectTrigger,
148
147
  SelectValue
149
148
  } from "@contractspec/lib.ui-kit-web/ui/select";
149
+ import { Switch } from "@contractspec/lib.ui-kit-web/ui/switch";
150
150
  import { cn } from "@contractspec/lib.ui-kit-web/ui/utils";
151
151
  import { jsxDEV as jsxDEV2 } from "react/jsx-dev-runtime";
152
152
  "use client";
@@ -168,11 +168,11 @@ function AccessibilityPanel({ className }) {
168
168
  className: "fixed inset-0 z-50 bg-black/40"
169
169
  }, undefined, false, undefined, this),
170
170
  /* @__PURE__ */ jsxDEV2(DialogContent, {
171
- className: cn("bg-background focus-visible:ring-ring max-w-md p-6 shadow-lg outline-hidden focus-visible:ring-2", className),
171
+ className: cn("max-w-md bg-background p-6 shadow-lg outline-hidden focus-visible:ring-2 focus-visible:ring-ring", className),
172
172
  "aria-describedby": "a11y-panel-desc",
173
173
  children: [
174
174
  /* @__PURE__ */ jsxDEV2(DialogTitle, {
175
- className: "text-lg font-semibold",
175
+ className: "font-semibold text-lg",
176
176
  children: "Accessibility settings"
177
177
  }, undefined, false, undefined, this),
178
178
  /* @__PURE__ */ jsxDEV2("p", {
@@ -128,8 +128,8 @@ function a11yRootClassName() {
128
128
  }
129
129
 
130
130
  // src/next-route-announcer.tsx
131
- import * as React2 from "react";
132
131
  import { usePathname } from "next/navigation";
132
+ import * as React2 from "react";
133
133
  import { jsxDEV as jsxDEV2 } from "react/jsx-dev-runtime";
134
134
  "use client";
135
135
  function NextRouteAnnouncer() {
@@ -127,6 +127,7 @@ function a11yRootClassName() {
127
127
  }
128
128
 
129
129
  // src/AccessibilityPanel.tsx
130
+ import { Button } from "@contractspec/lib.design-system";
130
131
  import {
131
132
  Dialog,
132
133
  DialogClose,
@@ -136,8 +137,6 @@ import {
136
137
  DialogTitle,
137
138
  DialogTrigger
138
139
  } from "@contractspec/lib.ui-kit-web/ui/dialog";
139
- import { Button } from "@contractspec/lib.design-system";
140
- import { Switch } from "@contractspec/lib.ui-kit-web/ui/switch";
141
140
  import { Label } from "@contractspec/lib.ui-kit-web/ui/label";
142
141
  import {
143
142
  Select,
@@ -146,6 +145,7 @@ import {
146
145
  SelectTrigger,
147
146
  SelectValue
148
147
  } from "@contractspec/lib.ui-kit-web/ui/select";
148
+ import { Switch } from "@contractspec/lib.ui-kit-web/ui/switch";
149
149
  import { cn } from "@contractspec/lib.ui-kit-web/ui/utils";
150
150
  import { jsxDEV as jsxDEV2 } from "react/jsx-dev-runtime";
151
151
  "use client";
@@ -167,11 +167,11 @@ function AccessibilityPanel({ className }) {
167
167
  className: "fixed inset-0 z-50 bg-black/40"
168
168
  }, undefined, false, undefined, this),
169
169
  /* @__PURE__ */ jsxDEV2(DialogContent, {
170
- className: cn("bg-background focus-visible:ring-ring max-w-md p-6 shadow-lg outline-hidden focus-visible:ring-2", className),
170
+ className: cn("max-w-md bg-background p-6 shadow-lg outline-hidden focus-visible:ring-2 focus-visible:ring-ring", className),
171
171
  "aria-describedby": "a11y-panel-desc",
172
172
  children: [
173
173
  /* @__PURE__ */ jsxDEV2(DialogTitle, {
174
- className: "text-lg font-semibold",
174
+ className: "font-semibold text-lg",
175
175
  children: "Accessibility settings"
176
176
  }, undefined, false, undefined, this),
177
177
  /* @__PURE__ */ jsxDEV2("p", {
@@ -127,8 +127,8 @@ function a11yRootClassName() {
127
127
  }
128
128
 
129
129
  // src/next-route-announcer.tsx
130
- import * as React2 from "react";
131
130
  import { usePathname } from "next/navigation";
131
+ import * as React2 from "react";
132
132
  import { jsxDEV as jsxDEV2 } from "react/jsx-dev-runtime";
133
133
  "use client";
134
134
  function NextRouteAnnouncer() {
@@ -1,6 +1,6 @@
1
1
  // src/next-route-announcer.tsx
2
- import * as React from "react";
3
2
  import { usePathname } from "next/navigation";
3
+ import * as React from "react";
4
4
  import { jsxDEV } from "react/jsx-dev-runtime";
5
5
  "use client";
6
6
  function NextRouteAnnouncer() {
package/dist/index.d.ts CHANGED
@@ -1,10 +1,10 @@
1
- export { SkipLink } from '@contractspec/lib.ui-kit-web/ui/skip-link';
2
- export { VisuallyHidden } from '@contractspec/lib.ui-kit-web/ui/visually-hidden';
1
+ export { FocusOnRouteChange } from '@contractspec/lib.ui-kit-web/ui/focus-on-route-change';
3
2
  export { SRLiveRegionProvider, useSRLiveRegion, } from '@contractspec/lib.ui-kit-web/ui/live-region';
4
3
  export { RouteAnnouncer } from '@contractspec/lib.ui-kit-web/ui/route-announcer';
5
- export { FocusOnRouteChange } from '@contractspec/lib.ui-kit-web/ui/focus-on-route-change';
4
+ export { SkipLink } from '@contractspec/lib.ui-kit-web/ui/skip-link';
6
5
  export { useReducedMotion } from '@contractspec/lib.ui-kit-web/ui/use-reduced-motion';
7
- export { A11YPreferencesProvider, useA11YPreferences, type AccessibilityPreferences, } from './preferences';
6
+ export { VisuallyHidden } from '@contractspec/lib.ui-kit-web/ui/visually-hidden';
7
+ export { A11YPreferencesProvider, type AccessibilityPreferences, useA11YPreferences, } from './preferences';
8
8
  import './styles.css';
9
9
  export { AccessibilityPanel } from './AccessibilityPanel';
10
10
  export { AccessibilityProvider } from './AccessibilityProvider';
@@ -1,7 +1,7 @@
1
1
  // @bun
2
2
  // src/next-route-announcer.tsx
3
- import * as React from "react";
4
3
  import { usePathname } from "next/navigation";
4
+ import * as React from "react";
5
5
  import { jsxDEV } from "react/jsx-dev-runtime";
6
6
  "use client";
7
7
  function NextRouteAnnouncer() {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@contractspec/lib.accessibility",
3
- "version": "3.7.6",
3
+ "version": "3.7.7",
4
4
  "description": "WCAG compliance utilities and validators",
5
5
  "keywords": [
6
6
  "contractspec",
@@ -19,15 +19,15 @@
19
19
  "dev": "contractspec-bun-build dev",
20
20
  "clean": "rimraf dist .turbo",
21
21
  "lint": "bun lint:fix",
22
- "lint:fix": "eslint src --fix",
23
- "lint:check": "eslint src",
22
+ "lint:fix": "biome check --write --unsafe --only=nursery/useSortedClasses . && biome check --write .",
23
+ "lint:check": "biome check .",
24
24
  "prebuild": "contractspec-bun-build prebuild",
25
25
  "typecheck": "tsc --noEmit"
26
26
  },
27
27
  "dependencies": {
28
- "@contractspec/lib.design-system": "3.7.6",
29
- "@contractspec/lib.ui-kit": "3.7.6",
30
- "@contractspec/lib.ui-kit-web": "3.7.6"
28
+ "@contractspec/lib.design-system": "3.8.0",
29
+ "@contractspec/lib.ui-kit": "3.8.0",
30
+ "@contractspec/lib.ui-kit-web": "3.8.0"
31
31
  },
32
32
  "devDependencies": {
33
33
  "@contractspec/tool.typescript": "3.7.6",
@@ -37,7 +37,7 @@
37
37
  },
38
38
  "peerDependencies": {
39
39
  "react": "19.2.0",
40
- "next": "16.1.6"
40
+ "next": "16.2.0"
41
41
  },
42
42
  "type": "module",
43
43
  "types": "./dist/index.d.ts",