@moda/om 21.6.3 → 21.6.5

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

@@ -5,5 +5,7 @@ export type ModalProps = React.HTMLAttributes<HTMLDivElement> & {
     onClose(): void;
     shards?: ComponentProps<typeof FocusOn>['shards'];
     autoFocus?: boolean;
+    'aria-label'?: string;
+    'aria-labelledby'?: string;
 };
 export declare const Modal: React.FC<ModalProps>;

package/package.json

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

package/src/components/Dialog/Dialog.tsx

@@ -1,4 +1,4 @@
-import React, { ReactNode } from 'react';
+import React, { ReactNode, useId } from 'react';
 import classNames from 'classnames';
 import { ModalOverlay, ModalOverlayProps } from '../ModalOverlay';
 import { Stack } from '../Stack';
@@ -18,16 +18,28 @@ export const Dialog: React.FC<DialogProps> = ({
   actions,
   contentClassName,
   ...rest
-}) => (
-  <ModalOverlay contentClassName={classNames('Dialog', contentClassName)} {...rest}>
-    <Stack className='Dialog__content' space={6}>
-      {title && <Text treatment='h5'>{title}</Text>}
-      {message && <Text>{message}</Text>}
-      {actions && (
-        <Stack direction='horizontal' space={3} alignItems='center' justifyContent='center'>
-          {actions}
-        </Stack>
-      )}
-    </Stack>
-  </ModalOverlay>
-);
+}) => {
+  const titleId = useId();
+
+  return (
+    <ModalOverlay
+      contentClassName={classNames('Dialog', contentClassName)}
+      aria-labelledby={title ? titleId : undefined}
+      {...rest}
+    >
+      <Stack className='Dialog__content' space={6}>
+        {title && (
+          <Text id={titleId} treatment='h5'>
+            {title}
+          </Text>
+        )}
+        {message && <Text>{message}</Text>}
+        {actions && (
+          <Stack direction='horizontal' space={3} alignItems='center' justifyContent='center'>
+            {actions}
+          </Stack>
+        )}
+      </Stack>
+    </ModalOverlay>
+  );
+};

package/src/components/Modal/Modal.stories.tsx

@@ -19,7 +19,9 @@ export const Default = () => {
       <Button onClick={() => setMode(Mode.Open)}>Open Modal</Button>
       {mode === Mode.Open && (
         <Modal onClose={() => setMode(Mode.Resting)}>
-          <Text>Click (or press &lt;esc&gt;) to close</Text>
+          <div tabIndex={-1}>
+            <Text>Click (or press &lt;esc&gt;) to close</Text>
+          </div>
         </Modal>
       )}
     </>
@@ -45,6 +47,7 @@ export const BackdropContent = () => {
             }}
           >
             <div
+              tabIndex={-1}
               style={{
                 backgroundColor: 'white',
                 padding: '1rem 1.5rem'

package/src/components/Modal/Modal.tsx

@@ -8,6 +8,8 @@ export type ModalProps = React.HTMLAttributes<HTMLDivElement> & {
   onClose(): void;
   shards?: ComponentProps<typeof FocusOn>['shards'];
   autoFocus?: boolean;
+  'aria-label'?: string;
+  'aria-labelledby'?: string;
 };
 
 export const Modal: React.FC<ModalProps> = ({
@@ -15,10 +17,10 @@ export const Modal: React.FC<ModalProps> = ({
   children,
   onClose,
   shards,
-  autoFocus,
+  autoFocus = true,
   ...rest
 }) => (
-  <div className={classNames('Modal', className)} {...rest}>
+  <div className={classNames('Modal', className)} role='dialog' aria-modal='true' {...rest}>
     <FocusOn autoFocus={autoFocus} shards={shards} onClickOutside={onClose} onEscapeKey={onClose}>
       {children}
     </FocusOn>

package/src/components/Select/Select.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback, useMemo } from 'react';
+import React, { useCallback, useEffect, useMemo } from 'react';
 import classNames from 'classnames';
 import ChevronDownIcon from '@moda/icons/chevron-down-12';
 import ChevronUpIcon from '@moda/icons/chevron-up-12';
@@ -115,6 +115,12 @@ export const Select: React.FC<SelectProps> = ({
     [options, state.focused]
   );
 
+  useEffect(() => {
+    if (disabled && state.mode === Mode.Open) {
+      dispatch({ type: 'CLOSE' });
+    }
+  }, [disabled, state.mode, Mode, dispatch]);
+
   return (
     <>
       <div