labsense-ui-kit 1.4.49 → 1.4.50

package/dist/index.modern.js

@@ -7450,8 +7450,17 @@ var Icon = function Icon(_ref2) {
     console.warn("Icon '" + icon + "' not found");
     return null;
   }
+  var handleKeyDown = onClick ? function (e) {
+    if (e.key === 'Enter' || e.key === ' ') {
+      e.preventDefault();
+      onClick(e);
+    }
+  } : undefined;
   return React.createElement(IconWrapper, {
     onClick: onClick,
+    onKeyDown: handleKeyDown,
+    role: onClick ? 'button' : undefined,
+    tabIndex: onClick ? 0 : undefined,
     "$clickable": !!onClick,
     "$cursor": cursor
   }, React.createElement(IconSVG, {
@@ -7702,13 +7711,68 @@ var ModalContainer = styled.div(_templateObject2$2 || (_templateObject2$2 = _tag
   var $overflowY = _ref3.$overflowY;
   return $overflowY ? $overflowY : 'auto';
 });
+var FOCUSABLE_SELECTOR = 'a[href], button:not([disabled]), textarea:not([disabled]), input:not([disabled]), select:not([disabled]), [tabindex]:not([tabindex="-1"])';
+var openModalContainers = [];
+var setInert = function setInert(el, inert) {
+  if (inert) el.setAttribute('inert', '');else el.removeAttribute('inert');
+};
 var Modal = function Modal(_ref4) {
   var isOpen = _ref4.isOpen,
     maxWidth = _ref4.maxWidth,
     overflow = _ref4.overflow,
     children = _ref4.children;
+  var containerRef = useRef(null);
+  var previouslyFocusedElement = useRef(null);
+  useEffect(function () {
+    if (!isOpen) return;
+    var container = containerRef.current;
+    if (!container) return;
+    previouslyFocusedElement.current = document.activeElement;
+    openModalContainers.forEach(function (el) {
+      return setInert(el, true);
+    });
+    openModalContainers.push(container);
+    var focusableElements = function focusableElements() {
+      return Array.from(container.querySelectorAll(FOCUSABLE_SELECTOR));
+    };
+    var firstFocusable = focusableElements()[0];
+    (firstFocusable != null ? firstFocusable : container).focus();
+    var handleKeyDown = function handleKeyDown(e) {
+      if (e.key !== 'Tab') return;
+      var focusable = focusableElements();
+      if (focusable.length === 0) {
+        e.preventDefault();
+        return;
+      }
+      var first = focusable[0];
+      var last = focusable[focusable.length - 1];
+      var active = document.activeElement;
+      if (e.shiftKey) {
+        if (active === first || !container.contains(active)) {
+          e.preventDefault();
+          last.focus();
+        }
+      } else if (active === last || !container.contains(active)) {
+        e.preventDefault();
+        first.focus();
+      }
+    };
+    container.addEventListener('keydown', handleKeyDown);
+    return function () {
+      container.removeEventListener('keydown', handleKeyDown);
+      var idx = openModalContainers.indexOf(container);
+      if (idx !== -1) openModalContainers.splice(idx, 1);
+      var newTop = openModalContainers[openModalContainers.length - 1];
+      if (newTop) setInert(newTop, false);
+      if (previouslyFocusedElement.current && document.contains(previouslyFocusedElement.current)) {
+        previouslyFocusedElement.current.focus();
+      }
+    };
+  }, [isOpen]);
   if (!isOpen) return null;
   return createPortal(React.createElement(ModalOverlay, null, React.createElement(ModalContainer, {
+    ref: containerRef,
+    tabIndex: -1,
     "$maxWidth": maxWidth,
     "$overflowY": overflow,
     onClick: function onClick(e) {
@@ -10481,6 +10545,14 @@ var SelectOption = function SelectOption(_ref38) {
   };
   var dropdownRef = useRef(null);
   var searchInputRef = useRef(null);
+  var dropdownButtonRef = useRef(null);
+  var closeAndRestoreFocus = function closeAndRestoreFocus() {
+    var _dropdownButtonRef$cu;
+    setIsOpen(false);
+    setSearchTerm('');
+    setHighlightedIndex(-1);
+    (_dropdownButtonRef$cu = dropdownButtonRef.current) === null || _dropdownButtonRef$cu === void 0 ? void 0 : _dropdownButtonRef$cu.focus();
+  };
   var handleOptionClick = function handleOptionClick(selectedValue) {
     if (value === selectedValue && allowDeselect) {
       var Event = {
@@ -10499,9 +10571,7 @@ var SelectOption = function SelectOption(_ref38) {
       };
       onChange(_Event);
     }
-    setIsOpen(false);
-    setSearchTerm('');
-    setHighlightedIndex(-1);
+    closeAndRestoreFocus();
   };
   var filteredOptions = searchTerm ? options.filter(function (option) {
     return option.label.toLowerCase().includes(searchTerm.toLowerCase());
@@ -10518,8 +10588,7 @@ var SelectOption = function SelectOption(_ref38) {
       }
     };
     onChange(Event);
-    setIsOpen(false);
-    setSearchTerm('');
+    closeAndRestoreFocus();
   };
   useEffect(function () {
     var handleClickOutside = function handleClickOutside(event) {
@@ -10586,9 +10655,7 @@ var SelectOption = function SelectOption(_ref38) {
         }
         break;
       case 'Escape':
-        setIsOpen(false);
-        setSearchTerm('');
-        setHighlightedIndex(-1);
+        closeAndRestoreFocus();
         break;
     }
   };
@@ -10610,9 +10677,22 @@ var SelectOption = function SelectOption(_ref38) {
     ref: dropdownRef,
     "$width": width
   }, React.createElement(DropdownButton$1, {
+    ref: dropdownButtonRef,
     onClick: function onClick() {
       if (!disabled && !loading) toggleDropdown();
     },
+    onKeyDown: function onKeyDown(e) {
+      if (disabled || loading) return;
+      if (e.key === 'Enter' || e.key === ' ') {
+        e.preventDefault();
+        toggleDropdown();
+      }
+    },
+    role: 'button',
+    tabIndex: disabled || loading ? -1 : 0,
+    "aria-haspopup": 'listbox',
+    "aria-expanded": isOpen,
+    "aria-disabled": disabled || loading,
     "$width": width,
     "$border": border,
     "$background": background,
@@ -13362,6 +13442,17 @@ var Tabs = function Tabs(_ref15) {
       onClick: function onClick() {
         if (!disabled && tab.onClick) tab.onClick();
       },
+      onKeyDown: function onKeyDown(e) {
+        if (disabled || !tab.onClick) return;
+        if (e.key === 'Enter' || e.key === ' ') {
+          e.preventDefault();
+          tab.onClick();
+        }
+      },
+      role: 'tab',
+      tabIndex: disabled ? -1 : 0,
+      "aria-selected": activeTab === tab.title,
+      "aria-disabled": disabled,
       "$disabled": disabled,
       "$headerHeight": headerHeight
     }, React.createElement(TabItemContainer, {