@dddstack/ariatype NPM

@dddstack/ariatype

Ariatype provides TypeScript with complete type definitions for WAI-ARIA accessibility. The goal of this project is to further enhance developer experience and understanding of WAI-ARIA accessibility best practices.

Installation

npm install @dddstack/ariatype -D

Usage

import { AriaTypes } from "@dddstack/ariatype";

const aria: AriaTypes = {
  "aria-atomic": "true",
  role: "alert"
};

Requiring Aria Attributes

Use PartiallyRequiredAriaTypes to require WAI-Attributes for a TypeScript type:

import type { PartiallyRequiredAriaTypes } from "@dddstack/ariatype";

// Valid
const aria: PartiallyRequiredAriaTypes<"aria-atomic" | "role"> =
  {
    "aria-atomic": "true",
    role: "alert"
  };

// Invalid
// Property "aria-atomic" missing
const aria: PartiallyRequiredAriaTypes<"aria-atomic" | "role"> =
  {
    role: "alert"
  };

Example Use Case

The following example shows how Ariatype may be used to enforce type-safe WAI-ARIA attributes on a React component using PartiallyRequiredAriaTypes:

import type { PartiallyRequiredAriaTypes } from "@dddstack/ariatype";
import type { ReactNode } from "react";

interface Props extends
  PartiallyRequiredAriaTypes<"aria-atomic" | "role"> {
    children: ReactNode;
  };

export const Component = ({ children, ...props }: Props) =>
  <div {...props}>{children}</div>;

// Valid
<Component aria-atomic="true" role="alert">Component</Component>

// Missing the following properties from type 'Props':
// "aria-atomic", role
<Component>Component</Component>

Packages

Ariatype is a bundle of multiple packages:

@dddstack/ariatype-aria-attributes:
- ariaAttributes: all aria attributes
- AriaAttribute: aria attribute type
- AriaAttributes: aria attributes type
@dddstack/ariatype-aria-attributes-drag-and-drop:
- ariaAttributesDragAndDrop: all drag-and-drop aria attributes
- AriaAttributeDragAndDrop: drag-and-drop aria attribute type
- AriaAttributesDragAndDrop: drag-and-drop aria attributes type
@dddstack/ariatype-aria-attributes-global:
- ariaAttributesGlobal: all global aria attributes
- AriaAttributeGlobal: global aria attribute type
- AriaAttributesGlobal: global aria attributes type
@dddstack/ariatype-aria-attributes-live-region:
- ariaAttributesLiveRegion: all live region aria attributes
- AriaAttributeLiveRegion: live region aria attribute type
- AriaAttributesLiveRegion: live region aria attributes type
@dddstack/ariatype-aria-attributes-relationship:
- ariaAttributesRelationship: all relationship aria attributes
- AriaAttributeRelationship: relationship aria attribute type
- AriaAttributesRelationship: relationship aria attributes type
@dddstack/ariatype-aria-attributes-widget:
- ariaAttributesWidget: all widget aria attributes
- AriaAttributeWidget: widget aria attribute type
- AriaAttributesWidget: widget aria attributes type
@dddstack/ariatype-aria-roles:
- ariaRoles: all aria roles
- AriaRole: aria roles type
- AriaRoles: aria roles type
@dddstack/ariatype-aria-roles-composite:
- ariaRolesComposite: all composite aria roles
- AriaRoleComposite: composite aria roles type
- AriaRolesComposite: composite aria roles type
@dddstack/ariatype-aria-roles-document-structure:
- ariaRolesDocumentStructure: all document structure aria roles
- AriaRoleDocumentStructure: document structure aria roles type
- AriaRolesDocumentStructure: document structure aria roles type
@dddstack/ariatype-aria-roles-generic:
- ariaRolesGeneric: all generic aria roles
- AriaRoleGeneric: generic aria roles type
- AriaRolesGeneric: generic aria roles type
@dddstack/ariatype-aria-roles-landmark:
- ariaRolesLandmark: all landmark aria roles
- AriaRoleLandmark: landmark aria roles type
- AriaRolesLandmark: landmark aria roles type
@dddstack/ariatype-aria-roles-live-region:
- ariaRolesLiveRegion: all live region aria roles
- AriaRoleLiveRegion: live region aria roles type
- AriaRolesLiveRegion: live region aria roles type
@dddstack/ariatype-aria-roles-widget:
- ariaRolesWidget: all widget aria roles
- AriaRoleWidget: widget aria roles type
- AriaRolesWidget: widget aria roles type
@dddstack/ariatype-aria-roles-window:
- ariaRolesWindow: all window aria roles
- AriaRoleWindow: window aria roles type
- AriaRolesWindow: window aria roles type