@moda/om 21.7.1 → 21.8.0

package/dist/src/components/Field/Field.d.ts

@@ -4,6 +4,6 @@ import './Field.scss';
 export type FieldProps = TextInputProps & {
     children?: JSX.Element;
 };
-export declare const Field: React.ForwardRefExoticComponent<import("../TextInput").InputProps & Omit<React.InputHTMLAttributes<HTMLInputElement>, "onChange"> & {
+export declare const Field: React.ForwardRefExoticComponent<import("..").InputProps & Omit<React.InputHTMLAttributes<HTMLInputElement>, "onChange"> & {
     children?: JSX.Element;
 } & React.RefAttributes<HTMLInputElement>>;

package/dist/src/components/Field/Field.stories.d.ts

@@ -6,3 +6,5 @@ export default _default;
 export declare const Default: () => React.JSX.Element;
 export declare const AribitraryChildren: () => React.JSX.Element;
 export declare const SelectChildren: () => React.JSX.Element;
+export declare const AccessibilityErrorState: () => React.JSX.Element;
+export declare const AccessibilityDynamicValidation: () => React.JSX.Element;

package/dist/src/components/Tabs/TabList.d.ts

@@ -5,5 +5,6 @@ export type TabListProps = {
     tabs: Tab[];
     onTabSelected(tabName: string): void;
     activePanel: string;
+    className?: string;
 };
 export declare const TabList: React.FC<TabListProps>;

package/dist/src/components/Tabs/Tabs.d.ts

@@ -6,5 +6,6 @@ export type TabsProps = React.HTMLAttributes<HTMLDivElement> & {
     onTabClicked?: (tabName: string) => void;
     defaultActiveTab?: string;
     activeTab?: string;
+    tabListClassName?: string;
 };
 export declare const Tabs: React.FC<TabsProps>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@moda/om",
-  "version": "21.7.1",
+  "version": "21.8.0",
   "description": "Moda Operandi design system",
   "main": "dist/index.cjs.js",
   "module": "dist/index.esm.js",
@@ -53,106 +53,106 @@
     }
   },
   "dependencies": {
-    "@moda/icons": "^6.1.14",
-    "@moda/tokens": "^6.5.0",
+    "@moda/icons": "^6.2.34",
+    "@moda/tokens": "^6.6.46",
     "@mona-health/react-input-mask": "^3.0.3",
     "@storybook/addon-styling": "^2.0.0",
     "classnames": "^2.5.1",
-    "credit-card-type": "^10.0.2",
+    "credit-card-type": "^10.1.0",
     "focus-visible": "^5.2.1",
     "proportional-scale": "^4.0.0",
-    "react-focus-on": "^3.10.0",
+    "react-focus-on": "^3.10.2",
     "scroll-into-view-if-needed": "^3.1.0",
-    "storybook": "^9.0.17",
+    "storybook": "^10.1.11",
     "use-cursor": "^1.2.3"
   },
   "devDependencies": {
-    "@babel/core": "^7.28.0",
-    "@babel/preset-env": "^7.28.0",
-    "@babel/preset-react": "^7.27.1",
-    "@babel/preset-typescript": "^7.27.1",
-    "@commitlint/cli": "^20.0.0",
-    "@commitlint/config-conventional": "^20.0.0",
-    "@eslint/js": "^9.31.0",
+    "@babel/core": "^7.28.5",
+    "@babel/preset-env": "^7.28.5",
+    "@babel/preset-react": "^7.28.5",
+    "@babel/preset-typescript": "^7.28.5",
+    "@commitlint/cli": "^20.3.0",
+    "@commitlint/config-conventional": "^20.3.0",
+    "@eslint/js": "^9.39.2",
     "@moda/rollup-plugin-postcss": "^4.0.1",
-    "@rollup/plugin-babel": "^6.0.4",
+    "@rollup/plugin-babel": "^6.1.0",
     "@rollup/plugin-commonjs": "^29.0.0",
-    "@rollup/plugin-node-resolve": "^16.0.1",
-    "@storybook/addon-links": "^9.0.17",
+    "@rollup/plugin-node-resolve": "^16.0.3",
+    "@storybook/addon-links": "^10.1.11",
     "@storybook/addon-postcss": "^2.0.0",
     "@storybook/addon-webpack5-compiler-babel": "^4.0.0",
     "@storybook/addons": "^7.6.17",
-    "@storybook/react": "^9.0.17",
-    "@storybook/react-webpack5": "^9.0.17",
-    "@testing-library/jest-dom": "^6.6.3",
-    "@testing-library/react": "^16.3.0",
+    "@storybook/react": "^10.1.11",
+    "@storybook/react-webpack5": "^10.1.11",
+    "@testing-library/jest-dom": "^6.9.1",
+    "@testing-library/react": "^16.3.1",
     "@testing-library/user-event": "^14.6.1",
-    "@types/chai": "^5.2.2",
+    "@types/chai": "^5.2.3",
     "@types/cheerio": "^1.0.0",
     "@types/classnames": "^2.3.4",
     "@types/credit-card-type": "^9.0.3",
     "@types/jest": "^30.0.0",
-    "@types/ramda": "^0.31.0",
-    "@types/react": "^19.1.8",
-    "@types/react-dom": "^19.1.6",
+    "@types/ramda": "^0.31.1",
+    "@types/react": "^19.2.7",
+    "@types/react-dom": "^19.2.3",
     "@types/react-input-mask": "^3.0.6",
     "@types/react-router-dom": "^5.3.3",
-    "@typescript-eslint/eslint-plugin": "^8.37.0",
-    "@typescript-eslint/parser": "^8.37.0",
-    "autoprefixer": "^10.4.21",
+    "@typescript-eslint/eslint-plugin": "^8.52.0",
+    "@typescript-eslint/parser": "^8.52.0",
+    "autoprefixer": "^10.4.23",
     "babel-loader": "^10.0.0",
     "commitizen": "^4.3.1",
     "css-loader": "^7.1.2",
     "cz-conventional-changelog": "^3.3.0",
-    "eslint": "^9.31.0",
-    "eslint-config-prettier": "^10.1.5",
+    "eslint": "^9.39.2",
+    "eslint-config-prettier": "^10.1.8",
     "eslint-plugin-import": "^2.32.0",
     "eslint-plugin-jest-dom": "^5.5.0",
     "eslint-plugin-jsx-a11y": "^6.10.2",
     "eslint-plugin-no-loops": "^0.4.0",
     "eslint-plugin-node": "^11.1.0",
-    "eslint-plugin-prettier": "^5.5.1",
+    "eslint-plugin-prettier": "^5.5.4",
     "eslint-plugin-promise": "^7.2.1",
     "eslint-plugin-react": "^7.37.5",
-    "eslint-plugin-react-hooks": "^7.0.0",
+    "eslint-plugin-react-hooks": "^7.0.1",
     "eslint-plugin-standard": "^5.0.0",
-    "eslint-plugin-testing-library": "^7.6.0",
-    "globals": "^16.3.0",
+    "eslint-plugin-testing-library": "^7.15.4",
+    "globals": "^17.0.0",
     "husky": "^9.1.7",
     "identity-obj-proxy": "^3.0.0",
     "ignore-not-found-export-webpack-plugin": "^1.0.2",
-    "jest": "^30.0.4",
-    "jest-environment-jsdom": "^30.0.4",
+    "jest": "^30.2.0",
+    "jest-environment-jsdom": "^30.2.0",
     "jest-matchmedia-mock": "^1.1.0",
-    "lint-staged": "^16.1.2",
+    "lint-staged": "^16.2.7",
     "node-sass-package-importer": "^5.3.3",
     "pinst": "^3.0.0",
     "postcss": "^8.5.6",
-    "postcss-loader": "^8.1.1",
-    "prettier": "^3.6.2",
+    "postcss-loader": "^8.2.0",
+    "prettier": "^3.7.4",
     "ramda": "^0.32.0",
-    "react": "^19.1.0",
-    "react-dom": "^19.1.0",
+    "react": "^19.2.3",
+    "react-dom": "^19.2.3",
     "react-router-dom": "^5.1.2",
-    "rollup": "^4.45.1",
+    "rollup": "^4.55.1",
     "rollup-plugin-peer-deps-external": "^2.2.4",
     "rollup-plugin-scss": "^4.0.1",
-    "sass": "^1.89.2",
-    "sass-loader": "^16.0.5",
-    "semantic-release": "^25.0.0",
-    "semantic-release-npm-github": "^5.0.0",
+    "sass": "^1.97.2",
+    "sass-loader": "^16.0.6",
+    "semantic-release": "^25.0.2",
+    "semantic-release-npm-github": "^6.0.0",
     "style-loader": "^4.0.0",
-    "ts-jest": "^29.4.0",
-    "typescript": "^5.8.3",
-    "typescript-eslint": "^8.37.0",
+    "ts-jest": "^29.4.6",
+    "typescript": "^5.9.3",
+    "typescript-eslint": "^8.52.0",
     "waait": "^1.0.5",
-    "webpack": "^5.100.2",
+    "webpack": "^5.104.1",
     "webpack-cli": "^6.0.1"
   },
   "overrides": {
-    "@types/react": "^19.1.8",
-    "react": "^19.1.0",
-    "react-dom": "^19.1.0"
+    "@types/react": "^19.2.7",
+    "react": "^19.2.3",
+    "react-dom": "^19.2.3"
   },
   "config": {
     "commitizen": {

package/src/components/Field/Field.stories.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useState } from 'react';
 import { action } from 'storybook/actions';
 import { States } from '../../utilities';
 import { Textarea } from '../Textarea';
@@ -75,3 +75,44 @@ export const SelectChildren = () => {
     </States>
   );
 };
+
+export const AccessibilityErrorState = () => (
+  <div style={{ display: 'flex', flexDirection: 'column', gap: '24px', maxWidth: '300px' }}>
+    <Field
+      label='Email address'
+      placeholder='Enter your email'
+      error='Please enter a valid email address'
+      defaultValue='invalid-email'
+    />
+    <p style={{ fontSize: '12px', color: '#666' }}>
+      Inspect the input to see: aria-invalid=&quot;true&quot;, aria-describedby linking to the
+      error, and role=&quot;alert&quot; on the error message for screen reader announcements.
+    </p>
+  </div>
+);
+
+export const AccessibilityDynamicValidation = () => {
+  const [value, setValue] = useState('');
+  const [touched, setTouched] = useState(false);
+
+  const isValidEmail = (email: string) => /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email);
+  const error =
+    touched && value && !isValidEmail(value) ? 'Please enter a valid email address' : undefined;
+
+  return (
+    <div style={{ display: 'flex', flexDirection: 'column', gap: '24px', maxWidth: '300px' }}>
+      <Field
+        label='Email address'
+        placeholder='Enter your email'
+        error={error}
+        value={value}
+        onChange={setValue}
+        onBlur={() => setTouched(true)}
+      />
+      <p style={{ fontSize: '12px', color: '#666' }}>
+        Type an invalid email and blur the field. Screen readers will announce the error via
+        role=&quot;alert&quot; when it appears.
+      </p>
+    </div>
+  );
+};

package/src/components/Field/Field.tsx

@@ -1,4 +1,4 @@
-import React, { JSX, useMemo } from 'react';
+import React, { JSX, useId, useMemo } from 'react';
 import classNames from 'classnames';
 import WarningIcon from '@moda/icons/warning-16';
 import { TextInput, TextInputProps } from '../TextInput';
@@ -16,8 +16,14 @@ export const Field = React.forwardRef(
     { className, children, error, label, placeholder, ...rest }: FieldProps,
     ref: React.Ref<HTMLInputElement>
   ) => {
+    const id = useId();
+    const errorId = `${id}-error`;
     const fieldContextValue = useMemo(() => ({ displaysError: Boolean(error) }), [error]);
 
+    // Combine any existing aria-describedby with our error ID
+    const ariaDescribedBy =
+      [rest['aria-describedby'], error ? errorId : null].filter(Boolean).join(' ') || undefined;
+
     return (
       <FormControlContext.Provider value={fieldContextValue}>
         <label className={classNames('Field', className)}>
@@ -33,6 +39,7 @@ export const Field = React.forwardRef(
                   placeholder,
                   label,
                   shiftIconLeftwards: error && children.type === Select,
+                  'aria-describedby': ariaDescribedBy,
                   ...rest,
                   ...children.props
                 })}
@@ -50,6 +57,7 @@ export const Field = React.forwardRef(
                   placeholder={placeholder}
                   label={label}
                   error={error}
+                  aria-describedby={ariaDescribedBy}
                   {...rest}
                 />
                 {error && (
@@ -61,7 +69,11 @@ export const Field = React.forwardRef(
             )}
           </span>
 
-          {error && <span className='Field__error'>{error}</span>}
+          {error && (
+            <span id={errorId} className='Field__error' role='alert'>
+              {error}
+            </span>
+          )}
         </label>
       </FormControlContext.Provider>
     );

package/src/components/Tabs/TabList.tsx

@@ -1,19 +1,25 @@
 import React from 'react';
+import classNames from 'classnames';
 import { Tab } from './Tab';
+
 import './TabList.scss';
 
 export type TabListProps = {
   tabs: Tab[];
   onTabSelected(tabName: string): void;
   activePanel: string;
+  className?: string;
 };
 
-export const TabList: React.FC<TabListProps> = ({ tabs, onTabSelected, activePanel }) => {
-  return (
-    <div className='TabList'>
-      {tabs.map(tab => (
-        <Tab key={tab.name} tab={tab} onTabChosen={onTabSelected} activeTab={activePanel} />
-      ))}
-    </div>
-  );
-};
+export const TabList: React.FC<TabListProps> = ({
+  tabs,
+  onTabSelected,
+  activePanel,
+  className
+}) => (
+  <div className={classNames('TabList', className)}>
+    {tabs.map(tab => (
+      <Tab key={tab.name} tab={tab} onTabChosen={onTabSelected} activeTab={activePanel} />
+    ))}
+  </div>
+);

package/src/components/Tabs/Tabs.tsx

@@ -10,6 +10,7 @@ export type TabsProps = React.HTMLAttributes<HTMLDivElement> & {
   onTabClicked?: (tabName: string) => void;
   defaultActiveTab?: string;
   activeTab?: string;
+  tabListClassName?: string;
 };
 
 export const Tabs: React.FC<TabsProps> = ({
@@ -18,6 +19,7 @@ export const Tabs: React.FC<TabsProps> = ({
   defaultActiveTab,
   activeTab,
   className,
+  tabListClassName,
   ...rest
 }) => {
   const [activePanel, setActivePanel] = useState(activeTab || defaultActiveTab || tabs[0].name);
@@ -33,7 +35,12 @@ export const Tabs: React.FC<TabsProps> = ({
 
   return (
     <div className={classNames('Tabs', className)} {...rest}>
-      <TabList tabs={tabs} onTabSelected={handleTabClick} activePanel={activePanel} />
+      <TabList
+        tabs={tabs}
+        onTabSelected={handleTabClick}
+        activePanel={activePanel}
+        className={tabListClassName}
+      />
       <TabPanels panels={tabs} activePanel={activePanel} />
     </div>
   );

package/src/components/TextInput/TextInput.tsx

@@ -39,6 +39,7 @@ export const TextInput = React.forwardRef(
         disabled={disabled}
         placeholder={placeholder}
         aria-label={label || placeholder}
+        aria-invalid={error ? true : undefined}
         ref={ref}
         onChange={event => {
           onChange?.(event.target.value);