@moda/om 21.7.0 → 21.7.2

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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@moda/om",
-  "version": "21.7.0",
+  "version": "21.7.2",
   "description": "Moda Operandi design system",
   "main": "dist/index.cjs.js",
   "module": "dist/index.esm.js",

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/SlidingPane/SlidingPane.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useId } from 'react';
 import classNames from 'classnames';
 import ExitIcon from '@moda/icons/exit-16';
 import { FocusOn } from 'react-focus-on';
@@ -24,6 +24,8 @@ export const SlidingPane: React.FC<SlidingPaneProps> = ({
   autoFocus = true,
   ...rest
 }) => {
+  const titleId = useId();
+
   return (
     <>
       <div
@@ -40,6 +42,9 @@ export const SlidingPane: React.FC<SlidingPaneProps> = ({
         onEscapeKey={onClose}
       >
         <div
+          role='dialog'
+          aria-modal='true'
+          aria-labelledby={titleId}
           className={classNames('SlidingPane', className, {
             'SlidingPane--active': visible
           })}
@@ -51,7 +56,7 @@ export const SlidingPane: React.FC<SlidingPaneProps> = ({
             direction='horizontal'
             className='SlidingPane__top'
           >
-            <Text treatment='h5' family='serif'>
+            <Text id={titleId} treatment='h5' family='serif'>
               {title}
             </Text>
             <Clickable className='SlidingPane__close' aria-label='Close' onClick={onClose}>

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);