@ultraviolet/ui 1.11.0 → 1.11.1

package/dist/index.d.ts

@@ -24,11 +24,10 @@ type ActionBarProps = {
      */
     rank?: number;
     role?: string;
-    'aria-modal'?: 'true' | 'false';
     className?: string;
     'data-testid'?: string;
 };
-declare const ActionBar: ({ children, role, rank, "aria-modal": ariaModal, className, "data-testid": dataTestId, }: ActionBarProps) => react.ReactPortal;
+declare const ActionBar: ({ children, role, rank, className, "data-testid": dataTestId, }: ActionBarProps) => react.ReactPortal;
 
 type ScreenSize = keyof typeof consoleLightTheme.screens;
 type SCWUITheme = typeof consoleLightTheme;

package/dist/src/components/ActionBar/index.js

@@ -33,14 +33,12 @@ const ActionBar = _ref5 => {
     children,
     role = 'dialog',
     rank = 0,
-    'aria-modal': ariaModal = 'true',
     className,
     'data-testid': dataTestId
   } = _ref5;
   return /*#__PURE__*/createPortal(jsx(StyledDiv, {
     rank: rank,
     role: role,
-    "aria-modal": ariaModal,
     className: className,
     "data-testid": dataTestId,
     children: children

package/dist/src/components/Modal/Dialog.js

@@ -73,6 +73,7 @@ const Dialog = _ref9 => {
     backdropCss
   } = _ref9;
   const containerRef = useRef(document.createElement('div'));
+  const dialogRef = useRef(null);
   const onCloseRef = useRef(onClose);
 
   // Portal to put the modal in
@@ -80,6 +81,7 @@ const Dialog = _ref9 => {
     const element = containerRef.current;
     if (open) {
       document.body.appendChild(element);
+      dialogRef.current?.focus();
     }
     return () => {
       if (document.body.contains(element)) {
@@ -97,14 +99,26 @@ const Dialog = _ref9 => {
   useEffect(() => {
     const handleEscPress = event => {
       if (event.key === 'Escape' && hideOnEsc) {
+        event.preventDefault();
+        event.stopPropagation();
         onCloseRef.current();
       }
     };
     if (open) {
-      document.addEventListener('keyup', handleEscPress);
+      document.body.addEventListener('keyup', handleEscPress, {
+        capture: true
+      });
+      document.body.addEventListener('keydown', handleEscPress, {
+        capture: true
+      });
     }
     return () => {
-      document.removeEventListener('keyup', handleEscPress);
+      document.body.removeEventListener('keyup', handleEscPress, {
+        capture: true
+      });
+      document.body.removeEventListener('keydown', handleEscPress, {
+        capture: true
+      });
     };
   }, [open, onCloseRef, hideOnEsc]);
 
@@ -117,6 +131,11 @@ const Dialog = _ref9 => {
     }
   }, [preventBodyScroll, open]);
 
+  // Stop focus to prevent unexpected body loose focus
+  const stopFocus = useCallback(event => {
+    event.stopPropagation();
+  }, []);
+
   // Stop click to prevent unexpected dialog close
   const stopClick = useCallback(event => {
     event.stopPropagation();
@@ -126,15 +145,53 @@ const Dialog = _ref9 => {
   const stopKeyUp = useCallback(event => {
     event.stopPropagation();
   }, []);
+
+  // Enable focus trap inside the modal
+  const handleFocusTrap = useCallback(event => {
+    event.stopPropagation();
+    if (event.key === 'Escape') {
+      event.preventDefault();
+      return;
+    }
+    const isTabPressed = event.key === 'Tab';
+    if (!isTabPressed) {
+      return;
+    }
+    const focusableEls = dialogRef.current?.querySelectorAll('a[href]:not([disabled]), button:not([disabled]), textarea:not([disabled]), input:not([disabled]), select:not([disabled])') ?? [];
+
+    // Handle case when no interactive element are within the modal (including close icon)
+    if (focusableEls.length === 0) {
+      event.preventDefault();
+    }
+    const firstFocusableEl = focusableEls[0];
+    const lastFocusableEl = focusableEls[focusableEls.length - 1];
+    if (event.shiftKey) {
+      if (document.activeElement === firstFocusableEl) {
+        lastFocusableEl.focus();
+        event.preventDefault();
+      }
+    } else if (document.activeElement === lastFocusableEl) {
+      firstFocusableEl.focus();
+      event.preventDefault();
+    }
+  }, []);
+
+  // Prevent default behaviour on Escape
+  const stopCancel = event => {
+    event.preventDefault();
+    event.stopPropagation();
+  };
   return /*#__PURE__*/createPortal(jsx(StyledBackdrop, {
     "data-open": open,
     onClick: hideOnClickOutside ? onClose : undefined,
     className: backdropClassName,
     css: backdropCss,
     "data-testid": dataTestId ? `${dataTestId}-backdrop` : undefined,
+    onFocus: stopFocus,
     children: jsx(StyledDialog, {
       css: dialogCss,
       onKeyUp: stopKeyUp,
+      onKeyDown: handleFocusTrap,
       className: className,
       id: id,
       "data-testid": dataTestId,
@@ -143,6 +200,10 @@ const Dialog = _ref9 => {
       "data-size": size,
       open: open,
       onClick: stopClick,
+      onCancel: stopCancel,
+      onClose: stopCancel,
+      "aria-modal": true,
+      ref: dialogRef,
       children: open ? children : null
     })
   }), containerRef.current);

package/dist/src/components/Modal/Disclosure.js

@@ -17,6 +17,11 @@ const Disclosure = _ref => {
       element?.removeEventListener('click', handleOpen);
     };
   }, [handleOpen, disclosureRef]);
+  useEffect(() => {
+    if (!visible) {
+      disclosureRef.current?.focus();
+    }
+  }, [visible, disclosureRef]);
   if (typeof disclosure === 'function') {
     return disclosure({
       visible,
@@ -30,7 +35,9 @@ const Disclosure = _ref => {
   if ( /*#__PURE__*/isValidElement(disclosure)) {
     return /*#__PURE__*/cloneElement(disclosure, {
       ...disclosure.props,
-      ref: disclosureRef
+      ref: disclosureRef,
+      'aria-controls': id,
+      'aria-haspopup': 'dialog'
     });
   }
   return null;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ultraviolet/ui",
-  "version": "1.11.0",
+  "version": "1.11.1",
   "description": "Ultraviolet UI",
   "homepage": "https://github.com/scaleway/ultraviolet#readme",
   "repository": {
@@ -39,7 +39,7 @@
     "react-dom": "18.2.0"
   },
   "devDependencies": {
-    "@babel/core": "7.22.11",
+    "@babel/core": "7.22.15",
     "@emotion/babel-plugin": "11.11.0",
     "@emotion/react": "11.11.1",
     "@emotion/styled": "11.11.0",
@@ -68,6 +68,6 @@
     "react-use-clipboard": "1.0.9",
     "reakit": "1.3.11",
     "@ultraviolet/themes": "1.2.1",
-    "@ultraviolet/icons": "1.3.1"
+    "@ultraviolet/icons": "2.0.0"
   }
 }