@opensourceframework/react-a11y-utils - npm Package Compare versions

Comparing version

0.1.1

0.1.2

+4

-5

package.json

		{
		"name": "@opensourceframework/react-a11y-utils",
		"version": "0.1.1",
		"version": "0.1.2",
		"description": "React accessibility utility functions and hooks for building accessible user interfaces",
		@@ -68,9 +68,8 @@ "keywords": [
		"type": "git",
		"url": "git+https://github.com/riceharvest/opensourceframework.git",
		"directory": "packages/react-a11y-utils"
		"url": "git+https://github.com/riceharvest/react-a11y-utils.git"
		},
		"bugs": {
		"url": "https://github.com/riceharvest/opensourceframework/issues?q=is%3Aissue+is%3Aopen+react-a11y-utils"
		"url": "https://github.com/riceharvest/react-a11y-utils/issues"
		},
		"homepage": "https://github.com/riceharvest/opensourceframework/tree/main/packages/react-a11y-utils#readme",
		"homepage": "https://github.com/riceharvest/react-a11y-utils#readme",
		"publishConfig": {
		@@ -77,0 +76,0 @@ "access": "public"

-136

dist/index.cjs

		'use strict';

		/**
		* @opensourceframework/react-a11y-utils
		* React accessibility utility functions and hooks
		*
		* @license MIT
		*/

		// src/index.ts
		var srOnly = {
		position: "absolute",
		width: "1px",
		height: "1px",
		padding: "0",
		margin: "-1px",
		overflow: "hidden",
		clip: "rect(0, 0, 0, 0)",
		whiteSpace: "nowrap",
		borderWidth: "0"
		};
		var srOnlyFocusable = {
		position: "absolute",
		width: "auto",
		height: "auto",
		padding: "1rem",
		margin: "0",
		overflow: "visible",
		clip: "auto",
		whiteSpace: "normal"
		};
		var decorative = {
		"aria-hidden": "true"
		};
		var disabledProps = {
		"aria-disabled": "true",
		tabIndex: -1
		};
		var statusMessageProps = {
		role: "status",
		"aria-live": "polite"
		};
		var alertMessageProps = {
		role: "alert",
		"aria-live": "assertive"
		};
		function createLiveRegion(options = {}) {
		const {
		atomic = false,
		relevant = "additions",
		busy = false,
		live = "polite"
		} = options;
		return {
		"aria-live": live,
		"aria-atomic": atomic ? "true" : "false",
		"aria-relevant": relevant,
		"aria-busy": busy ? "true" : "false"
		};
		}
		function createSkipLinkProps(targetId) {
		return {
		href: `#${targetId}`,
		tabIndex: 0
		};
		}
		function createDisclosureProps(expanded, controlsId) {
		return {
		"aria-expanded": expanded ? "true" : "false",
		"aria-controls": controlsId
		};
		}
		function createPressedProps(pressed) {
		return {
		"aria-pressed": pressed ? "true" : "false"
		};
		}
		function createSelectedProps(selected) {
		return {
		"aria-selected": selected ? "true" : "false"
		};
		}
		function createCheckedProps(checked) {
		return {
		"aria-checked": typeof checked === "string" ? checked : checked ? "true" : "false"
		};
		}
		function mergeA11yProps(...props) {
		return Object.assign({}, ...props);
		}
		function createDialogTriggerProps(dialogId, isOpen) {
		return {
		"aria-haspopup": "dialog",
		"aria-controls": dialogId,
		"aria-expanded": isOpen ? "true" : "false"
		};
		}
		function createFormFieldProps(required, invalid = false) {
		const props = {
		"aria-required": required ? "true" : "false"
		};
		if (invalid) {
		props["aria-invalid"] = "true";
		}
		return props;
		}
		function createDescribedByProps(describedById) {
		return {
		"aria-describedby": describedById
		};
		}
		function createLabelledByProps(labelledById) {
		return {
		"aria-labelledby": labelledById
		};
		}

		exports.alertMessageProps = alertMessageProps;
		exports.createCheckedProps = createCheckedProps;
		exports.createDescribedByProps = createDescribedByProps;
		exports.createDialogTriggerProps = createDialogTriggerProps;
		exports.createDisclosureProps = createDisclosureProps;
		exports.createFormFieldProps = createFormFieldProps;
		exports.createLabelledByProps = createLabelledByProps;
		exports.createLiveRegion = createLiveRegion;
		exports.createPressedProps = createPressedProps;
		exports.createSelectedProps = createSelectedProps;
		exports.createSkipLinkProps = createSkipLinkProps;
		exports.decorative = decorative;
		exports.disabledProps = disabledProps;
		exports.mergeA11yProps = mergeA11yProps;
		exports.srOnly = srOnly;
		exports.srOnlyFocusable = srOnlyFocusable;
		exports.statusMessageProps = statusMessageProps;
		//# sourceMappingURL=index.cjs.map
		//# sourceMappingURL=index.cjs.map

-1

dist/index.cjs.map

-332

dist/index.d.cts

		/**
		* React Accessibility Utilities
		* Helper functions and hooks for building accessible React applications
		* @module @opensourceframework/react-a11y-utils
		*/
		/**
		* Standard accessibility props that can be spread onto elements
		*/
		interface AccessibilityProps {
		'aria-activedescendant'?: string;
		'aria-atomic'?: 'true' \| 'false';
		'aria-autocomplete'?: 'inline' \| 'list' \| 'both' \| 'none';
		'aria-busy'?: 'true' \| 'false';
		'aria-checked'?: 'true' \| 'false' \| 'mixed';
		'aria-colcount'?: number;
		'aria-colindex'?: number;
		'aria-colspan'?: number;
		'aria-controls'?: string;
		'aria-current'?: 'page' \| 'step' \| 'location' \| 'date' \| 'time' \| 'true' \| 'false';
		'aria-describedby'?: string;
		'aria-details'?: string;
		'aria-disabled'?: 'true' \| 'false';
		'aria-dropeffect'?: 'copy' \| 'execute' \| 'link' \| 'move' \| 'none' \| 'popup';
		'aria-errormessage'?: string;
		'aria-expanded'?: 'true' \| 'false';
		'aria-flowto'?: string;
		'aria-grabbed'?: 'true' \| 'false';
		'aria-haspopup'?: 'false' \| 'true' \| 'menu' \| 'listbox' \| 'tree' \| 'grid' \| 'dialog';
		'aria-hidden'?: 'true' \| 'false';
		'aria-invalid'?: 'true' \| 'false' \| 'grammar' \| 'spelling';
		'aria-keyshortcuts'?: string;
		'aria-label'?: string;
		'aria-labelledby'?: string;
		'aria-level'?: number;
		'aria-live'?: 'off' \| 'polite' \| 'assertive';
		'aria-modal'?: 'true' \| 'false';
		'aria-multiline'?: 'true' \| 'false';
		'aria-multiselectable'?: 'true' \| 'false';
		'aria-orientation'?: 'horizontal' \| 'vertical';
		'aria-owns'?: string;
		'aria-placeholder'?: string;
		'aria-posinset'?: number;
		'aria-pressed'?: 'true' \| 'false' \| 'mixed';
		'aria-readonly'?: 'true' \| 'false';
		'aria-relevant'?: 'additions' \| 'removals' \| 'text' \| 'all';
		'aria-required'?: 'true' \| 'false';
		'aria-roledescription'?: string;
		'aria-rowcount'?: number;
		'aria-rowindex'?: number;
		'aria-rowspan'?: number;
		'aria-selected'?: 'true' \| 'false';
		'aria-setsize'?: number;
		'aria-sort'?: 'ascending' \| 'descending' \| 'none' \| 'other';
		'aria-valuemax'?: number;
		'aria-valuemin'?: number;
		'aria-valuenow'?: number;
		'aria-valuetext'?: string;
		role?: string;
		tabIndex?: number;
		}
		/**
		* Props for live region elements
		*/
		interface LiveRegionProps extends AccessibilityProps {
		'aria-live'?: 'off' \| 'polite' \| 'assertive';
		'aria-atomic'?: 'true' \| 'false';
		'aria-relevant'?: 'additions' \| 'removals' \| 'text' \| 'all';
		'aria-busy'?: 'true' \| 'false';
		}
		/**
		* Options for creating live region props
		*/
		interface LiveRegionOptions {
		/** Whether the entire region should be announced (true) or just changes (false) */
		atomic?: boolean;
		/** What types of changes are relevant */
		relevant?: 'additions' \| 'removals' \| 'text' \| 'all';
		/** Whether the region is currently being updated */
		busy?: boolean;
		/** How assertive the announcement should be */
		live?: 'polite' \| 'assertive';
		}
		/**
		* Props for disclosure elements (expand/collapse)
		*/
		interface DisclosureProps extends AccessibilityProps {
		'aria-expanded': 'true' \| 'false';
		'aria-controls': string;
		}
		/**
		* Props for toggle buttons with pressed state
		*/
		interface PressedProps extends AccessibilityProps {
		'aria-pressed': 'true' \| 'false' \| 'mixed';
		}
		/**
		* Props for selectable elements
		*/
		interface SelectedProps extends AccessibilityProps {
		'aria-selected': 'true' \| 'false';
		}
		/**
		* Props for checkable elements
		*/
		interface CheckedProps extends AccessibilityProps {
		'aria-checked': 'true' \| 'false' \| 'mixed';
		}
		/**
		* CSS Properties type for style objects
		*/
		type A11yCSSProperties = Record<string, string \| number \| undefined>;
		/**
		* CSS styles for screen-reader-only content
		* Elements with these styles are visually hidden but accessible to screen readers
		*
		* @example
		* ```tsx
		* <span style={srOnly}>Skip to main content</span>
		* ```
		*/
		declare const srOnly: A11yCSSProperties;
		/**
		* CSS styles for making hidden content visible when focused
		* Use for skip links that should appear on focus
		*
		* @example
		* ```tsx
		* <a href="#main" style={srOnlyFocusable}>Skip to main content</a>
		* ```
		*/
		declare const srOnlyFocusable: A11yCSSProperties;
		/**
		* Props for decorative elements that should be hidden from screen readers
		*
		* @example
		* ```tsx
		* <img src="decoration.png" alt="" {...decorative} />
		* ```
		*/
		declare const decorative: AccessibilityProps;
		/**
		* Props for disabled interactive elements
		* Provides proper accessibility for disabled elements
		*
		* @example
		* ```tsx
		* <button {...disabledProps} onClick={handleClick}>Disabled</button>
		* ```
		*/
		declare const disabledProps: AccessibilityProps;
		/**
		* Props for status messages (polite announcements)
		*
		* @example
		* ```tsx
		* <div {...statusMessageProps}>Changes saved successfully</div>
		* ```
		*/
		declare const statusMessageProps: AccessibilityProps;
		/**
		* Props for alert messages (assertive announcements)
		*
		* @example
		* ```tsx
		* <div {...alertMessageProps}>Error: Please fill in all required fields</div>
		* ```
		*/
		declare const alertMessageProps: AccessibilityProps;
		/**
		* Creates props for live regions
		* Live regions announce changes to screen readers
		*
		* @param options - Configuration options for the live region
		* @returns Accessibility props for the live region
		*
		* @example
		* ```tsx
		* <div {...createLiveRegion({ atomic: true, live: 'polite' })}>
		* {message}
		* </div>
		* ```
		*/
		declare function createLiveRegion(options?: LiveRegionOptions): LiveRegionProps;
		/**
		* Creates props for skip links
		* Skip links allow keyboard users to bypass navigation
		*
		* @param targetId - The ID of the target element to skip to
		* @returns Props for the skip link element
		*
		* @example
		* ```tsx
		* <a {...createSkipLinkProps('main-content')}>Skip to main content</a>
		* // ...
		* <main id="main-content">...</main>
		* ```
		*/
		declare function createSkipLinkProps(targetId: string): {
		href: string;
		tabIndex: number;
		};
		/**
		* Creates props for elements that expand/collapse content
		*
		* @param expanded - Whether the content is currently expanded
		* @param controlsId - The ID of the element being controlled
		* @returns Accessibility props for the disclosure trigger
		*
		* @example
		* ```tsx
		* <button {...createDisclosureProps(isOpen, 'panel-id')} onClick={toggle}>
		* Toggle Panel
		* </button>
		* <div id="panel-id" hidden={!isOpen}>Panel content</div>
		* ```
		*/
		declare function createDisclosureProps(expanded: boolean, controlsId: string): DisclosureProps;
		/**
		* Creates props for toggle buttons with pressed state
		*
		* @param pressed - Whether the button is currently pressed
		* @returns Accessibility props for the toggle button
		*
		* @example
		* ```tsx
		* <button {...createPressedProps(isActive)} onClick={toggle}>
		* Toggle Feature
		* </button>
		* ```
		*/
		declare function createPressedProps(pressed: boolean): PressedProps;
		/**
		* Creates props for elements with selected state
		*
		* @param selected - Whether the element is currently selected
		* @returns Accessibility props for the selectable element
		*
		* @example
		* ```tsx
		* <li {...createSelectedProps(isSelected)} role="option">
		* Option 1
		* </li>
		* ```
		*/
		declare function createSelectedProps(selected: boolean): SelectedProps;
		/**
		* Creates props for elements with checked state
		*
		* @param checked - Whether the element is checked (true), unchecked (false), or indeterminate ('mixed')
		* @returns Accessibility props for the checkable element
		*
		* @example
		* ```tsx
		* <div {...createCheckedProps(checked)} role="checkbox" tabIndex={0}>
		* {checked ? '✓' : ''}
		* </div>
		* ```
		*/
		declare function createCheckedProps(checked: boolean \| 'mixed'): CheckedProps;
		/**
		* Combines multiple accessibility props objects
		* Later props override earlier ones for the same keys
		*
		* @param props - Array of accessibility props to merge
		* @returns Combined accessibility props
		*
		* @example
		* ```tsx
		* <div {...mergeA11yProps(statusMessageProps, { 'aria-label': 'Status' })}>
		* {message}
		* </div>
		* ```
		*/
		declare function mergeA11yProps(...props: AccessibilityProps[]): AccessibilityProps;
		/**
		* Creates props for a dialog/modal trigger
		*
		* @param dialogId - The ID of the dialog element
		* @param isOpen - Whether the dialog is currently open
		* @returns Accessibility props for the dialog trigger
		*
		* @example
		* ```tsx
		* <button {...createDialogTriggerProps('my-dialog', isOpen)}>
		* Open Dialog
		* </button>
		* ```
		*/
		declare function createDialogTriggerProps(dialogId: string, isOpen: boolean): AccessibilityProps;
		/**
		* Creates props for a required form field
		*
		* @param required - Whether the field is required
		* @param invalid - Whether the field value is invalid
		* @returns Accessibility props for the form field
		*
		* @example
		* ```tsx
		* <input {...createFormFieldProps(true, hasError)} />
		* ```
		*/
		declare function createFormFieldProps(required: boolean, invalid?: boolean): AccessibilityProps;
		/**
		* Creates props for describing an element with another element
		*
		* @param describedById - The ID of the element that describes this element
		* @returns Accessibility props with aria-describedby
		*
		* @example
		* ```tsx
		* <input {...createDescribedByProps('error-message')} />
		* <span id="error-message">This field is required</span>
		* ```
		*/
		declare function createDescribedByProps(describedById: string): AccessibilityProps;
		/**
		* Creates props for labeling an element with another element
		*
		* @param labelledById - The ID of the element that labels this element
		* @returns Accessibility props with aria-labelledby
		*
		* @example
		* ```tsx
		* <div {...createLabelledByProps('panel-title')} role="region">
		* <h2 id="panel-title">Panel Title</h2>
		* Panel content
		* </div>
		* ```
		*/
		declare function createLabelledByProps(labelledById: string): AccessibilityProps;

		export { type A11yCSSProperties, type AccessibilityProps, type CheckedProps, type DisclosureProps, type LiveRegionOptions, type LiveRegionProps, type PressedProps, type SelectedProps, alertMessageProps, createCheckedProps, createDescribedByProps, createDialogTriggerProps, createDisclosureProps, createFormFieldProps, createLabelledByProps, createLiveRegion, createPressedProps, createSelectedProps, createSkipLinkProps, decorative, disabledProps, mergeA11yProps, srOnly, srOnlyFocusable, statusMessageProps };

-332

dist/index.d.ts

		/**
		* React Accessibility Utilities
		* Helper functions and hooks for building accessible React applications
		* @module @opensourceframework/react-a11y-utils
		*/
		/**
		* Standard accessibility props that can be spread onto elements
		*/
		interface AccessibilityProps {
		'aria-activedescendant'?: string;
		'aria-atomic'?: 'true' \| 'false';
		'aria-autocomplete'?: 'inline' \| 'list' \| 'both' \| 'none';
		'aria-busy'?: 'true' \| 'false';
		'aria-checked'?: 'true' \| 'false' \| 'mixed';
		'aria-colcount'?: number;
		'aria-colindex'?: number;
		'aria-colspan'?: number;
		'aria-controls'?: string;
		'aria-current'?: 'page' \| 'step' \| 'location' \| 'date' \| 'time' \| 'true' \| 'false';
		'aria-describedby'?: string;
		'aria-details'?: string;
		'aria-disabled'?: 'true' \| 'false';
		'aria-dropeffect'?: 'copy' \| 'execute' \| 'link' \| 'move' \| 'none' \| 'popup';
		'aria-errormessage'?: string;
		'aria-expanded'?: 'true' \| 'false';
		'aria-flowto'?: string;
		'aria-grabbed'?: 'true' \| 'false';
		'aria-haspopup'?: 'false' \| 'true' \| 'menu' \| 'listbox' \| 'tree' \| 'grid' \| 'dialog';
		'aria-hidden'?: 'true' \| 'false';
		'aria-invalid'?: 'true' \| 'false' \| 'grammar' \| 'spelling';
		'aria-keyshortcuts'?: string;
		'aria-label'?: string;
		'aria-labelledby'?: string;
		'aria-level'?: number;
		'aria-live'?: 'off' \| 'polite' \| 'assertive';
		'aria-modal'?: 'true' \| 'false';
		'aria-multiline'?: 'true' \| 'false';
		'aria-multiselectable'?: 'true' \| 'false';
		'aria-orientation'?: 'horizontal' \| 'vertical';
		'aria-owns'?: string;
		'aria-placeholder'?: string;
		'aria-posinset'?: number;
		'aria-pressed'?: 'true' \| 'false' \| 'mixed';
		'aria-readonly'?: 'true' \| 'false';
		'aria-relevant'?: 'additions' \| 'removals' \| 'text' \| 'all';
		'aria-required'?: 'true' \| 'false';
		'aria-roledescription'?: string;
		'aria-rowcount'?: number;
		'aria-rowindex'?: number;
		'aria-rowspan'?: number;
		'aria-selected'?: 'true' \| 'false';
		'aria-setsize'?: number;
		'aria-sort'?: 'ascending' \| 'descending' \| 'none' \| 'other';
		'aria-valuemax'?: number;
		'aria-valuemin'?: number;
		'aria-valuenow'?: number;
		'aria-valuetext'?: string;
		role?: string;
		tabIndex?: number;
		}
		/**
		* Props for live region elements
		*/
		interface LiveRegionProps extends AccessibilityProps {
		'aria-live'?: 'off' \| 'polite' \| 'assertive';
		'aria-atomic'?: 'true' \| 'false';
		'aria-relevant'?: 'additions' \| 'removals' \| 'text' \| 'all';
		'aria-busy'?: 'true' \| 'false';
		}
		/**
		* Options for creating live region props
		*/
		interface LiveRegionOptions {
		/** Whether the entire region should be announced (true) or just changes (false) */
		atomic?: boolean;
		/** What types of changes are relevant */
		relevant?: 'additions' \| 'removals' \| 'text' \| 'all';
		/** Whether the region is currently being updated */
		busy?: boolean;
		/** How assertive the announcement should be */
		live?: 'polite' \| 'assertive';
		}
		/**
		* Props for disclosure elements (expand/collapse)
		*/
		interface DisclosureProps extends AccessibilityProps {
		'aria-expanded': 'true' \| 'false';
		'aria-controls': string;
		}
		/**
		* Props for toggle buttons with pressed state
		*/
		interface PressedProps extends AccessibilityProps {
		'aria-pressed': 'true' \| 'false' \| 'mixed';
		}
		/**
		* Props for selectable elements
		*/
		interface SelectedProps extends AccessibilityProps {
		'aria-selected': 'true' \| 'false';
		}
		/**
		* Props for checkable elements
		*/
		interface CheckedProps extends AccessibilityProps {
		'aria-checked': 'true' \| 'false' \| 'mixed';
		}
		/**
		* CSS Properties type for style objects
		*/
		type A11yCSSProperties = Record<string, string \| number \| undefined>;
		/**
		* CSS styles for screen-reader-only content
		* Elements with these styles are visually hidden but accessible to screen readers
		*
		* @example
		* ```tsx
		* <span style={srOnly}>Skip to main content</span>
		* ```
		*/
		declare const srOnly: A11yCSSProperties;
		/**
		* CSS styles for making hidden content visible when focused
		* Use for skip links that should appear on focus
		*
		* @example
		* ```tsx
		* <a href="#main" style={srOnlyFocusable}>Skip to main content</a>
		* ```
		*/
		declare const srOnlyFocusable: A11yCSSProperties;
		/**
		* Props for decorative elements that should be hidden from screen readers
		*
		* @example
		* ```tsx
		* <img src="decoration.png" alt="" {...decorative} />
		* ```
		*/
		declare const decorative: AccessibilityProps;
		/**
		* Props for disabled interactive elements
		* Provides proper accessibility for disabled elements
		*
		* @example
		* ```tsx
		* <button {...disabledProps} onClick={handleClick}>Disabled</button>
		* ```
		*/
		declare const disabledProps: AccessibilityProps;
		/**
		* Props for status messages (polite announcements)
		*
		* @example
		* ```tsx
		* <div {...statusMessageProps}>Changes saved successfully</div>
		* ```
		*/
		declare const statusMessageProps: AccessibilityProps;
		/**
		* Props for alert messages (assertive announcements)
		*
		* @example
		* ```tsx
		* <div {...alertMessageProps}>Error: Please fill in all required fields</div>
		* ```
		*/
		declare const alertMessageProps: AccessibilityProps;
		/**
		* Creates props for live regions
		* Live regions announce changes to screen readers
		*
		* @param options - Configuration options for the live region
		* @returns Accessibility props for the live region
		*
		* @example
		* ```tsx
		* <div {...createLiveRegion({ atomic: true, live: 'polite' })}>
		* {message}
		* </div>
		* ```
		*/
		declare function createLiveRegion(options?: LiveRegionOptions): LiveRegionProps;
		/**
		* Creates props for skip links
		* Skip links allow keyboard users to bypass navigation
		*
		* @param targetId - The ID of the target element to skip to
		* @returns Props for the skip link element
		*
		* @example
		* ```tsx
		* <a {...createSkipLinkProps('main-content')}>Skip to main content</a>
		* // ...
		* <main id="main-content">...</main>
		* ```
		*/
		declare function createSkipLinkProps(targetId: string): {
		href: string;
		tabIndex: number;
		};
		/**
		* Creates props for elements that expand/collapse content
		*
		* @param expanded - Whether the content is currently expanded
		* @param controlsId - The ID of the element being controlled
		* @returns Accessibility props for the disclosure trigger
		*
		* @example
		* ```tsx
		* <button {...createDisclosureProps(isOpen, 'panel-id')} onClick={toggle}>
		* Toggle Panel
		* </button>
		* <div id="panel-id" hidden={!isOpen}>Panel content</div>
		* ```
		*/
		declare function createDisclosureProps(expanded: boolean, controlsId: string): DisclosureProps;
		/**
		* Creates props for toggle buttons with pressed state
		*
		* @param pressed - Whether the button is currently pressed
		* @returns Accessibility props for the toggle button
		*
		* @example
		* ```tsx
		* <button {...createPressedProps(isActive)} onClick={toggle}>
		* Toggle Feature
		* </button>
		* ```
		*/
		declare function createPressedProps(pressed: boolean): PressedProps;
		/**
		* Creates props for elements with selected state
		*
		* @param selected - Whether the element is currently selected
		* @returns Accessibility props for the selectable element
		*
		* @example
		* ```tsx
		* <li {...createSelectedProps(isSelected)} role="option">
		* Option 1
		* </li>
		* ```
		*/
		declare function createSelectedProps(selected: boolean): SelectedProps;
		/**
		* Creates props for elements with checked state
		*
		* @param checked - Whether the element is checked (true), unchecked (false), or indeterminate ('mixed')
		* @returns Accessibility props for the checkable element
		*
		* @example
		* ```tsx
		* <div {...createCheckedProps(checked)} role="checkbox" tabIndex={0}>
		* {checked ? '✓' : ''}
		* </div>
		* ```
		*/
		declare function createCheckedProps(checked: boolean \| 'mixed'): CheckedProps;
		/**
		* Combines multiple accessibility props objects
		* Later props override earlier ones for the same keys
		*
		* @param props - Array of accessibility props to merge
		* @returns Combined accessibility props
		*
		* @example
		* ```tsx
		* <div {...mergeA11yProps(statusMessageProps, { 'aria-label': 'Status' })}>
		* {message}
		* </div>
		* ```
		*/
		declare function mergeA11yProps(...props: AccessibilityProps[]): AccessibilityProps;
		/**
		* Creates props for a dialog/modal trigger
		*
		* @param dialogId - The ID of the dialog element
		* @param isOpen - Whether the dialog is currently open
		* @returns Accessibility props for the dialog trigger
		*
		* @example
		* ```tsx
		* <button {...createDialogTriggerProps('my-dialog', isOpen)}>
		* Open Dialog
		* </button>
		* ```
		*/
		declare function createDialogTriggerProps(dialogId: string, isOpen: boolean): AccessibilityProps;
		/**
		* Creates props for a required form field
		*
		* @param required - Whether the field is required
		* @param invalid - Whether the field value is invalid
		* @returns Accessibility props for the form field
		*
		* @example
		* ```tsx
		* <input {...createFormFieldProps(true, hasError)} />
		* ```
		*/
		declare function createFormFieldProps(required: boolean, invalid?: boolean): AccessibilityProps;
		/**
		* Creates props for describing an element with another element
		*
		* @param describedById - The ID of the element that describes this element
		* @returns Accessibility props with aria-describedby
		*
		* @example
		* ```tsx
		* <input {...createDescribedByProps('error-message')} />
		* <span id="error-message">This field is required</span>
		* ```
		*/
		declare function createDescribedByProps(describedById: string): AccessibilityProps;
		/**
		* Creates props for labeling an element with another element
		*
		* @param labelledById - The ID of the element that labels this element
		* @returns Accessibility props with aria-labelledby
		*
		* @example
		* ```tsx
		* <div {...createLabelledByProps('panel-title')} role="region">
		* <h2 id="panel-title">Panel Title</h2>
		* Panel content
		* </div>
		* ```
		*/
		declare function createLabelledByProps(labelledById: string): AccessibilityProps;

		export { type A11yCSSProperties, type AccessibilityProps, type CheckedProps, type DisclosureProps, type LiveRegionOptions, type LiveRegionProps, type PressedProps, type SelectedProps, alertMessageProps, createCheckedProps, createDescribedByProps, createDialogTriggerProps, createDisclosureProps, createFormFieldProps, createLabelledByProps, createLiveRegion, createPressedProps, createSelectedProps, createSkipLinkProps, decorative, disabledProps, mergeA11yProps, srOnly, srOnlyFocusable, statusMessageProps };

-118

dist/index.js

		/**
		* @opensourceframework/react-a11y-utils
		* React accessibility utility functions and hooks
		*
		* @license MIT
		*/

		// src/index.ts
		var srOnly = {
		position: "absolute",
		width: "1px",
		height: "1px",
		padding: "0",
		margin: "-1px",
		overflow: "hidden",
		clip: "rect(0, 0, 0, 0)",
		whiteSpace: "nowrap",
		borderWidth: "0"
		};
		var srOnlyFocusable = {
		position: "absolute",
		width: "auto",
		height: "auto",
		padding: "1rem",
		margin: "0",
		overflow: "visible",
		clip: "auto",
		whiteSpace: "normal"
		};
		var decorative = {
		"aria-hidden": "true"
		};
		var disabledProps = {
		"aria-disabled": "true",
		tabIndex: -1
		};
		var statusMessageProps = {
		role: "status",
		"aria-live": "polite"
		};
		var alertMessageProps = {
		role: "alert",
		"aria-live": "assertive"
		};
		function createLiveRegion(options = {}) {
		const {
		atomic = false,
		relevant = "additions",
		busy = false,
		live = "polite"
		} = options;
		return {
		"aria-live": live,
		"aria-atomic": atomic ? "true" : "false",
		"aria-relevant": relevant,
		"aria-busy": busy ? "true" : "false"
		};
		}
		function createSkipLinkProps(targetId) {
		return {
		href: `#${targetId}`,
		tabIndex: 0
		};
		}
		function createDisclosureProps(expanded, controlsId) {
		return {
		"aria-expanded": expanded ? "true" : "false",
		"aria-controls": controlsId
		};
		}
		function createPressedProps(pressed) {
		return {
		"aria-pressed": pressed ? "true" : "false"
		};
		}
		function createSelectedProps(selected) {
		return {
		"aria-selected": selected ? "true" : "false"
		};
		}
		function createCheckedProps(checked) {
		return {
		"aria-checked": typeof checked === "string" ? checked : checked ? "true" : "false"
		};
		}
		function mergeA11yProps(...props) {
		return Object.assign({}, ...props);
		}
		function createDialogTriggerProps(dialogId, isOpen) {
		return {
		"aria-haspopup": "dialog",
		"aria-controls": dialogId,
		"aria-expanded": isOpen ? "true" : "false"
		};
		}
		function createFormFieldProps(required, invalid = false) {
		const props = {
		"aria-required": required ? "true" : "false"
		};
		if (invalid) {
		props["aria-invalid"] = "true";
		}
		return props;
		}
		function createDescribedByProps(describedById) {
		return {
		"aria-describedby": describedById
		};
		}
		function createLabelledByProps(labelledById) {
		return {
		"aria-labelledby": labelledById
		};
		}

		export { alertMessageProps, createCheckedProps, createDescribedByProps, createDialogTriggerProps, createDisclosureProps, createFormFieldProps, createLabelledByProps, createLiveRegion, createPressedProps, createSelectedProps, createSkipLinkProps, decorative, disabledProps, mergeA11yProps, srOnly, srOnlyFocusable, statusMessageProps };
		//# sourceMappingURL=index.js.map
		//# sourceMappingURL=index.js.map

-1

dist/index.js.map

@opensourceframework/react-a11y-utils - npm Package Compare versions

New alerts

Worsened metrics