@lessonkit/accessibility 0.9.3 → 1.0.1

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.
Files changed (4) hide show
  1. package/README.md +20 -17
  2. package/dist/index.d.cts +27 -14
  3. package/dist/index.d.ts +27 -14
  4. package/package.json +1 -1
package/README.md CHANGED
@@ -1,13 +1,10 @@
1
- # `@lessonkit/accessibility`
1
+ # @lessonkit/accessibility
2
2
 
3
- [![CI](https://github.com/eddiethedean/lessonkit/actions/workflows/ci.yml/badge.svg)](https://github.com/eddiethedean/lessonkit/actions/workflows/ci.yml)
4
- [![Documentation](https://readthedocs.org/projects/lessonkit/badge/?version=latest)](https://lessonkit.readthedocs.io/en/latest/)
5
3
  [![npm](https://img.shields.io/npm/v/@lessonkit/accessibility.svg)](https://www.npmjs.com/package/@lessonkit/accessibility)
4
+ [![Documentation](https://readthedocs.org/projects/lessonkit/badge/?version=latest)](https://lessonkit.readthedocs.io/en/latest/reference/accessibility.html)
6
5
  [![License](https://img.shields.io/github/license/eddiethedean/lessonkit)](https://github.com/eddiethedean/lessonkit/blob/main/LICENSE)
7
6
 
8
- Small accessibility utilities used by LessonKit packages and apps.
9
-
10
- **Docs:** [Accessibility reference](https://lessonkit.readthedocs.io/en/latest/reference/accessibility.html) · [Theming & accessibility guide](https://lessonkit.readthedocs.io/en/latest/guides/react-developers/theming-and-accessibility.html)
7
+ Focus management, reduced-motion helpers, and screen-reader utilities for LessonKit apps.
11
8
 
12
9
  ## Install
13
10
 
@@ -15,17 +12,23 @@ Small accessibility utilities used by LessonKit packages and apps.
15
12
  npm install @lessonkit/accessibility
16
13
  ```
17
14
 
18
- ## Included (0.6.0)
15
+ ## API
16
+
17
+ | Export | Purpose |
18
+ | --- | --- |
19
+ | `prefersReducedMotion()` | Media-query check |
20
+ | `shouldAnimate({ default })` | Respect user preference |
21
+ | `focusFirst`, `getFocusableElements` | Focus discovery |
22
+ | `trapFocus(container, opts)` | Focus trap for modals |
23
+ | `createRovingTabIndex(opts)` | Roving tabindex groups |
24
+ | `visuallyHiddenStyle` | Screen-reader-only content |
25
+
26
+ Used internally by `@lessonkit/react` (e.g. `Quiz` labels).
27
+
28
+ ## Docs
19
29
 
20
- - `prefersReducedMotion()`
21
- - `getReducedMotionPreference()`
22
- - `shouldAnimate({ default })`
23
- - `focusFirst(container)`
24
- - `getFocusableElements(container)`
25
- - `trapFocus(container, opts)`
26
- - `createRovingTabIndex(opts)`
27
- - `visuallyHiddenStyle` — inline styles for screen-reader-only content (used by `@lessonkit/react` `Quiz`)
30
+ [Accessibility reference](https://lessonkit.readthedocs.io/en/latest/reference/accessibility.html) · [Theming & accessibility guide](https://lessonkit.readthedocs.io/en/latest/guides/react-developers/theming-and-accessibility.html)
28
31
 
29
- ## Guidance
32
+ ## License
30
33
 
31
- See the [accessibility reference](https://lessonkit.readthedocs.io/en/latest/reference/accessibility.html) for keyboard and screen-reader guidance.
34
+ Apache-2.0
package/dist/index.d.cts CHANGED
@@ -1,8 +1,31 @@
1
1
  type Focusable = {
2
2
  focus: () => void;
3
3
  };
4
+ type VisuallyHiddenStyle = {
5
+ position: "absolute";
6
+ width: string;
7
+ height: string;
8
+ padding: number;
9
+ margin: string;
10
+ overflow: "hidden";
11
+ clip: string;
12
+ whiteSpace: "nowrap";
13
+ border: number;
14
+ };
15
+ type TrapFocusOptions = {
16
+ initialFocus?: HTMLElement | "first";
17
+ restoreFocus?: boolean;
18
+ allowOutsideClick?: boolean;
19
+ };
20
+ type RovingTabIndexOptions = {
21
+ itemCount: number;
22
+ getId?: (index: number) => string;
23
+ orientation?: "horizontal" | "vertical" | "both";
24
+ loop?: boolean;
25
+ initialIndex?: number;
26
+ };
4
27
  /** Screen-reader-only styles (no external CSS required). */
5
- declare const visuallyHiddenStyle: Record<string, string | number>;
28
+ declare const visuallyHiddenStyle: VisuallyHiddenStyle;
6
29
  type FocusContainer = {
7
30
  querySelector<T>(selectors: string): T | null;
8
31
  };
@@ -13,21 +36,11 @@ declare function shouldAnimate(opts?: {
13
36
  }): boolean;
14
37
  declare function focusFirst(container: FocusContainer | null): boolean;
15
38
  declare function getFocusableElements(container: Element): HTMLElement[];
16
- declare function trapFocus(container: HTMLElement, opts?: {
17
- initialFocus?: HTMLElement | "first";
18
- restoreFocus?: boolean;
19
- allowOutsideClick?: boolean;
20
- }): {
39
+ declare function trapFocus(container: HTMLElement, opts?: TrapFocusOptions): {
21
40
  activate: () => void;
22
41
  deactivate: () => void;
23
42
  };
24
- declare function createRovingTabIndex(opts: {
25
- itemCount: number;
26
- getId?: (index: number) => string;
27
- orientation?: "horizontal" | "vertical" | "both";
28
- loop?: boolean;
29
- initialIndex?: number;
30
- }): {
43
+ declare function createRovingTabIndex(opts: RovingTabIndexOptions): {
31
44
  get activeIndex(): number;
32
45
  setActiveIndex: (next: number) => void;
33
46
  getItemProps: (index: number) => {
@@ -41,4 +54,4 @@ declare function createRovingTabIndex(opts: {
41
54
  };
42
55
  };
43
56
 
44
- export { type FocusContainer, type Focusable, createRovingTabIndex, focusFirst, getFocusableElements, getReducedMotionPreference, prefersReducedMotion, shouldAnimate, trapFocus, visuallyHiddenStyle };
57
+ export { type FocusContainer, type Focusable, type RovingTabIndexOptions, type TrapFocusOptions, type VisuallyHiddenStyle, createRovingTabIndex, focusFirst, getFocusableElements, getReducedMotionPreference, prefersReducedMotion, shouldAnimate, trapFocus, visuallyHiddenStyle };
package/dist/index.d.ts CHANGED
@@ -1,8 +1,31 @@
1
1
  type Focusable = {
2
2
  focus: () => void;
3
3
  };
4
+ type VisuallyHiddenStyle = {
5
+ position: "absolute";
6
+ width: string;
7
+ height: string;
8
+ padding: number;
9
+ margin: string;
10
+ overflow: "hidden";
11
+ clip: string;
12
+ whiteSpace: "nowrap";
13
+ border: number;
14
+ };
15
+ type TrapFocusOptions = {
16
+ initialFocus?: HTMLElement | "first";
17
+ restoreFocus?: boolean;
18
+ allowOutsideClick?: boolean;
19
+ };
20
+ type RovingTabIndexOptions = {
21
+ itemCount: number;
22
+ getId?: (index: number) => string;
23
+ orientation?: "horizontal" | "vertical" | "both";
24
+ loop?: boolean;
25
+ initialIndex?: number;
26
+ };
4
27
  /** Screen-reader-only styles (no external CSS required). */
5
- declare const visuallyHiddenStyle: Record<string, string | number>;
28
+ declare const visuallyHiddenStyle: VisuallyHiddenStyle;
6
29
  type FocusContainer = {
7
30
  querySelector<T>(selectors: string): T | null;
8
31
  };
@@ -13,21 +36,11 @@ declare function shouldAnimate(opts?: {
13
36
  }): boolean;
14
37
  declare function focusFirst(container: FocusContainer | null): boolean;
15
38
  declare function getFocusableElements(container: Element): HTMLElement[];
16
- declare function trapFocus(container: HTMLElement, opts?: {
17
- initialFocus?: HTMLElement | "first";
18
- restoreFocus?: boolean;
19
- allowOutsideClick?: boolean;
20
- }): {
39
+ declare function trapFocus(container: HTMLElement, opts?: TrapFocusOptions): {
21
40
  activate: () => void;
22
41
  deactivate: () => void;
23
42
  };
24
- declare function createRovingTabIndex(opts: {
25
- itemCount: number;
26
- getId?: (index: number) => string;
27
- orientation?: "horizontal" | "vertical" | "both";
28
- loop?: boolean;
29
- initialIndex?: number;
30
- }): {
43
+ declare function createRovingTabIndex(opts: RovingTabIndexOptions): {
31
44
  get activeIndex(): number;
32
45
  setActiveIndex: (next: number) => void;
33
46
  getItemProps: (index: number) => {
@@ -41,4 +54,4 @@ declare function createRovingTabIndex(opts: {
41
54
  };
42
55
  };
43
56
 
44
- export { type FocusContainer, type Focusable, createRovingTabIndex, focusFirst, getFocusableElements, getReducedMotionPreference, prefersReducedMotion, shouldAnimate, trapFocus, visuallyHiddenStyle };
57
+ export { type FocusContainer, type Focusable, type RovingTabIndexOptions, type TrapFocusOptions, type VisuallyHiddenStyle, createRovingTabIndex, focusFirst, getFocusableElements, getReducedMotionPreference, prefersReducedMotion, shouldAnimate, trapFocus, visuallyHiddenStyle };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@lessonkit/accessibility",
3
- "version": "0.9.3",
3
+ "version": "1.0.1",
4
4
  "private": false,
5
5
  "description": "Accessibility utilities for LessonKit packages and apps.",
6
6
  "license": "Apache-2.0",