@royaloperahouse/harmonic 0.6.1 → 0.6.2

package/dist/harmonic.esm.js

@@ -1,4 +1,4 @@
-import React__default, { createElement, memo, useCallback, useRef, useEffect, useState, forwardRef, useMemo, useImperativeHandle, cloneElement, useLayoutEffect } from 'react';
+import React__default, { createElement, memo, useCallback, useRef, useImperativeHandle, useMemo, useEffect, useState, forwardRef, cloneElement, useLayoutEffect } from 'react';
 import styled, { css, ThemeProvider, createGlobalStyle } from 'styled-components';
 import moment from 'moment';
 import Modal from 'react-modal';
@@ -394,7 +394,7 @@ var HarmonicHeader = function HarmonicHeader(_ref2) {
     size = _ref2.size,
     em = _ref2.em,
     _ref2$color = _ref2.color,
-    color = _ref2$color === void 0 ? 'primary' : _ref2$color,
+    color = _ref2$color === void 0 ? 'inherit' : _ref2$color,
     serif = _ref2.serif,
     Tag = _ref2.hierarchy,
     className = _ref2.className;
@@ -414,7 +414,7 @@ var HarmonicSubtitle = function HarmonicSubtitle(_ref3) {
   var children = _ref3.children,
     size = _ref3.size,
     _ref3$color = _ref3.color,
-    color = _ref3$color === void 0 ? 'primary' : _ref3$color,
+    color = _ref3$color === void 0 ? 'inherit' : _ref3$color,
     className = _ref3.className;
   var classNames = createClassNames('subtitle', {
     size: size,
@@ -431,7 +431,7 @@ var BodyCopyHarmonic = function BodyCopyHarmonic(_ref4) {
     _ref4$size = _ref4.size,
     size = _ref4$size === void 0 ? 'medium' : _ref4$size,
     _ref4$color = _ref4.color,
-    color = _ref4$color === void 0 ? 'primary' : _ref4$color,
+    color = _ref4$color === void 0 ? 'inherit' : _ref4$color,
     className = _ref4.className,
     props = _objectWithoutPropertiesLoose(_ref4, _excluded);
   var classNames = createClassNames('bodycopy', {
@@ -448,7 +448,7 @@ var HarmonicOverline = function HarmonicOverline(_ref5) {
   var children = _ref5.children,
     size = _ref5.size,
     _ref5$color = _ref5.color,
-    color = _ref5$color === void 0 ? 'primary' : _ref5$color,
+    color = _ref5$color === void 0 ? 'inherit' : _ref5$color,
     className = _ref5.className,
     props = _objectWithoutPropertiesLoose(_ref5, _excluded2);
   var classNames = createClassNames('overline', {
@@ -464,7 +464,7 @@ var HarmonicOverline = function HarmonicOverline(_ref5) {
 var ButtonText = function ButtonText(_ref6) {
   var children = _ref6.children,
     _ref6$color = _ref6.color,
-    color = _ref6$color === void 0 ? 'primary' : _ref6$color,
+    color = _ref6$color === void 0 ? 'inherit' : _ref6$color,
     className = _ref6.className;
   var classNames = createClassNames('buttontext', {
     color: color,
@@ -477,7 +477,7 @@ var ButtonText = function ButtonText(_ref6) {
 var Caption = function Caption(_ref7) {
   var children = _ref7.children,
     _ref7$color = _ref7.color,
-    color = _ref7$color === void 0 ? 'primary' : _ref7$color,
+    color = _ref7$color === void 0 ? 'inherit' : _ref7$color,
     className = _ref7.className;
   var classNames = createClassNames('captiontext', {
     color: color,
@@ -490,7 +490,7 @@ var Caption = function Caption(_ref7) {
 var NavigationText = function NavigationText(_ref8) {
   var children = _ref8.children,
     _ref8$color = _ref8.color,
-    color = _ref8$color === void 0 ? 'primary' : _ref8$color,
+    color = _ref8$color === void 0 ? 'inherit' : _ref8$color,
     className = _ref8.className;
   var classNames = createClassNames('navigationtext', {
     color: color,
@@ -2962,7 +2962,7 @@ var OptionsContainer = /*#__PURE__*/styled.div(_templateObject3 || (_templateObj
 
 var _templateObject$7, _templateObject2$5, _templateObject3$1, _templateObject4;
 var ControlledDropdownWrapper = /*#__PURE__*/styled.div(_templateObject$7 || (_templateObject$7 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  position: relative;\n  width: fit-content;\n"])));
-var ControlledDropdownHeaderContainer = /*#__PURE__*/styled.span(_templateObject2$5 || (_templateObject2$5 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  gap: 6px;\n  border-bottom: 1px solid transparent;\n  height: 24px;\n  line-height: 24px;\n  font-size: var(--harmonic-font-size-navigation);\n  font-family: var(--font-family-sans);\n  font-weight: var(--font-weight-navigation);\n  letter-spacing: var(--harmonic-letter-spacing-navigation);\n  color: var(--color-primary-black);\n  text-decoration: none;\n  cursor: pointer;\n  width: max-content;\n\n  ", "\n"])), function (_ref) {
+var ControlledDropdownHeaderContainer = /*#__PURE__*/styled.button(_templateObject2$5 || (_templateObject2$5 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  all: unset;\n  display: flex;\n  gap: 6px;\n  border-bottom: 1px solid transparent;\n  height: 24px;\n  line-height: 24px;\n  font-size: var(--harmonic-font-size-navigation);\n  font-family: var(--font-family-sans);\n  font-weight: var(--font-weight-navigation);\n  letter-spacing: var(--harmonic-letter-spacing-navigation);\n  color: var(--color-primary-black);\n  text-decoration: none;\n  cursor: pointer;\n  width: max-content;\n\n  &:focus {\n    outline: 2px solid var(--color-primary-black);\n    outline-offset: 2px;\n  }\n\n  ", "\n"])), function (_ref) {
   var active = _ref.active;
   if (active) {
     return "\n      & {\n        color: var(--color-primary-red);\n      }\n      && svg path {\n        fill: var(--color-primary-red);\n      } \n      ";
@@ -2970,12 +2970,12 @@ var ControlledDropdownHeaderContainer = /*#__PURE__*/styled.span(_templateObject
   return '';
 });
 var ControlledDropdownHeaderContainerLink = /*#__PURE__*/styled(ControlledDropdownHeaderContainer).attrs({
-  as: 'a'
+  as: 'button'
 })(_templateObject3$1 || (_templateObject3$1 = /*#__PURE__*/_taggedTemplateLiteralLoose([""])));
 var IconWrapper = /*#__PURE__*/styled.span(_templateObject4 || (_templateObject4 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  width: 24px;\n  height: 24px;\n\n  span > svg path {\n    fill: var(--color-primary-black);\n  }\n"])));
 
 /* eslint-disable no-useless-return */
-var ControlledDropdown = function ControlledDropdown(_ref) {
+var ControlledDropdown = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
   var text = _ref.text,
     options = _ref.options,
     active = _ref.active,
@@ -2983,32 +2983,22 @@ var ControlledDropdown = function ControlledDropdown(_ref) {
     onOptionClick = _ref.onOptionClick,
     _onMouseEnter = _ref.onMouseEnter,
     _onMouseLeave = _ref.onMouseLeave,
+    _onFocusLeave = _ref.onFocusLeave,
     onReset = _ref.onReset,
     _onFocus = _ref.onFocus,
     _onBlur = _ref.onBlur,
     className = _ref.className;
-  var ref = useRef();
-  var resetHandler = useCallback(function () {
+  ControlledDropdown.displayName = 'ControlledDropdown';
+  var internalRef = useRef(null);
+  useImperativeHandle(ref, function () {
+    return internalRef.current;
+  });
+  var resetHandler = function resetHandler() {
     return onReset == null ? void 0 : onReset();
-  }, []);
-  useEffect(function () {
-    if (window.innerWidth > breakpoints.sm) {
-      var mouseClickHandler = function mouseClickHandler(e) {
-        var _ref$current;
-        if (ref != null && (_ref$current = ref.current) != null && _ref$current.contains(e.target)) {
-          return;
-        } else if (active) {
-          resetHandler();
-        }
-      };
-      document.addEventListener('click', mouseClickHandler);
-      return function () {
-        document.removeEventListener('click', mouseClickHandler);
-      };
-    }
-    // eslint-disable-next-line consistent-return
-    return;
-  }, [ref, resetHandler, active]);
+  };
+  var isDropdown = useMemo(function () {
+    return !!(options != null && options.length);
+  }, [options]);
   var handleOptionKeyDown = function handleOptionKeyDown(e, link) {
     if (e.key === 'Enter') {
       onOptionClick == null || onOptionClick(link);
@@ -3028,13 +3018,15 @@ var ControlledDropdown = function ControlledDropdown(_ref) {
       _onBlur == null || _onBlur();
     }
   };
-  var isDropdown = !!(options != null && options.length);
   var wrapperEvents = {
     onMouseEnter: function onMouseEnter() {
       return _onMouseEnter == null ? void 0 : _onMouseEnter();
     },
     onMouseLeave: function onMouseLeave() {
       return _onMouseLeave == null ? void 0 : _onMouseLeave();
+    },
+    onFocusLeave: function onFocusLeave() {
+      return _onFocusLeave == null ? void 0 : _onFocusLeave();
     }
   };
   var headerEvents = {
@@ -3050,21 +3042,51 @@ var ControlledDropdown = function ControlledDropdown(_ref) {
     },
     onKeyDown: handleHeaderKeyDown
   };
+  useEffect(function () {
+    var mouseEvent = function mouseEvent(e) {
+      var _internalRef$current;
+      if (internalRef != null && (_internalRef$current = internalRef.current) != null && _internalRef$current.contains(e.target)) return;
+      if (active) resetHandler();
+    };
+    if (window.innerWidth > breakpoints.sm) {
+      document.addEventListener('click', mouseEvent);
+    }
+    return function () {
+      document.removeEventListener('click', mouseEvent);
+    };
+  }, [resetHandler, active]);
+  useEffect(function () {
+    var handleFocusOut = function handleFocusOut(e) {
+      if (internalRef.current && !internalRef.current.contains(e.relatedTarget)) {
+        _onFocusLeave == null || _onFocusLeave();
+      }
+    };
+    var node = internalRef.current;
+    if (node) node.addEventListener('focusout', handleFocusOut);
+    return function () {
+      return node == null ? void 0 : node.removeEventListener('focusout', handleFocusOut);
+    };
+  }, [_onFocusLeave]);
   return /*#__PURE__*/React__default.createElement(ControlledDropdownWrapper, Object.assign({
-    ref: ref
+    ref: internalRef
   }, wrapperEvents, {
     className: className
   }), isDropdown ? (/*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(ControlledDropdownHeaderContainer, Object.assign({
     active: active
   }, headerEvents, {
-    tabIndex: 0,
-    "data-testid": "span-container"
+    "data-testid": "span-container",
+    role: "menuitem",
+    "aria-controls": "dropdown-menu",
+    "aria-haspopup": "menu",
+    "aria-expanded": active
   }), text, /*#__PURE__*/React__default.createElement(IconWrapper, {
     "data-testid": "dropdown-icon"
   }, /*#__PURE__*/React__default.createElement(Icon, {
     iconName: "DropdownArrow"
   }))), active && options ? (/*#__PURE__*/React__default.createElement(OptionsContainer, {
-    withOptionsInMobile: true
+    withOptionsInMobile: true,
+    role: "menu",
+    id: "dropdown-menu"
   }, options.map(function (optionItem, index) {
     return /*#__PURE__*/React__default.createElement(OptionItem, {
       key: "key-" + index + "-" + optionItem.option,
@@ -3078,15 +3100,18 @@ var ControlledDropdown = function ControlledDropdown(_ref) {
       onBlur: function onBlur() {
         return handleOptionBlur(index);
       },
-      href: optionItem.optionLink
+      href: optionItem.optionLink,
+      role: "menuitem"
     }, optionItem.option);
   }))) : null)) : (/*#__PURE__*/React__default.createElement(ControlledDropdownHeaderContainerLink, Object.assign({
     active: active
   }, headerEvents, {
     "data-testid": "link-container",
+    "aria-label": text,
+    role: "menuitem",
     tabIndex: 0
   }), text)));
-};
+});
 
 var _templateObject$8;
 var Grid = /*#__PURE__*/styled.div(_templateObject$8 || (_templateObject$8 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: grid;\n  grid-template-columns: var(--grid-template-columns);\n  grid-template-rows: max-content;\n  gap: var(--grid-column-gap);\n  margin: 0;\n"])));
@@ -5311,7 +5336,7 @@ var Basket$1 = function Basket(_ref) {
 };
 
 var _templateObject$A, _templateObject2$q;
-var SearchContainer = /*#__PURE__*/styled.div(_templateObject$A || (_templateObject$A = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: inline-flex;\n  flex-direction: row;\n  justify-content: flex-start;\n  align-items: center;\n  cursor: pointer;\n  border-bottom: 1px solid transparent;\n  padding-top: 3px;\n  padding-bottom: 3px;\n\n  svg path {\n    fill: var(--color-primary-black);\n  }\n\n  ", "\n\n  :hover {\n    border-bottom: 1px solid var(--color-primary-red);\n    && svg path {\n      fill: var(--color-primary-red);\n    }\n  }\n"])), function (_ref) {
+var SearchContainer = /*#__PURE__*/styled.button(_templateObject$A || (_templateObject$A = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  all: unset;\n  display: inline-flex;\n  flex-direction: row;\n  justify-content: flex-start;\n  align-items: center;\n  cursor: pointer;\n  border-bottom: 1px solid transparent;\n  padding-top: 3px;\n  padding-bottom: 3px;\n\n  svg path {\n    fill: var(--color-primary-black);\n  }\n\n  ", "\n\n  :hover {\n    border-bottom: 1px solid var(--color-primary-red);\n    && svg path {\n      fill: var(--color-primary-red);\n    }\n  }\n\n  &:focus {\n    outline: 2px solid var(--color-primary-black);\n    outline-offset: 2px;\n  }\n"])), function (_ref) {
   var selected = _ref.selected;
   if (selected) {
     return "\n        border-bottom: 1px solid var(--color-primary-red);\n        && svg path {\n          fill: var(--color-primary-red);\n        }\n      ";
@@ -5320,31 +5345,26 @@ var SearchContainer = /*#__PURE__*/styled.div(_templateObject$A || (_templateObj
 });
 var SvgContainer$1 = /*#__PURE__*/styled.div(_templateObject2$q || (_templateObject2$q = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  svg {\n    width: var(--navigation-large-gap);\n    height: var(--navigation-large-gap);\n  }\n"])));
 
-var Search$1 = function Search(_ref) {
+var Search$1 = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var _ref$selected = _ref.selected,
     selected = _ref$selected === void 0 ? false : _ref$selected,
     onClick = _ref.onClick,
     className = _ref.className;
-  var onKeyDownHandler = function onKeyDownHandler(e) {
-    if (e.key === 'Enter') {
-      onClick == null || onClick();
-    }
-  };
+  Search$1.displayName = 'Search';
   return /*#__PURE__*/React__default.createElement(SearchContainer, {
-    role: "button",
     "aria-label": "Search",
     selected: selected,
     onClick: onClick,
-    onKeyDown: onKeyDownHandler,
     "data-testid": "search-icon",
     tabIndex: 0,
-    className: className
+    className: className,
+    ref: ref
   }, /*#__PURE__*/React__default.createElement(SvgContainer$1, {
     "aria-hidden": "true"
   }, /*#__PURE__*/React__default.createElement(Icon, {
     iconName: "Search"
   })));
-};
+});
 
 /* eslint-disable react/jsx-no-useless-fragment */
 var Dropdown = function Dropdown(_ref) {
@@ -5559,12 +5579,14 @@ var NavTop = function NavTop(_ref) {
     onClickSearch = _ref.onClickSearch,
     _ref$isShowSearch = _ref.isShowSearch,
     isShowSearch = _ref$isShowSearch === void 0 ? false : _ref$isShowSearch,
-    className = _ref.className;
+    className = _ref.className,
+    searchButtonRef = _ref.searchButtonRef;
   return /*#__PURE__*/React__default.createElement(NavTopContainer$1, {
     className: className
   }, /*#__PURE__*/React__default.createElement(Search$1, {
     onClick: onClickSearch,
-    selected: isShowSearch
+    selected: isShowSearch,
+    ref: searchButtonRef
   }), /*#__PURE__*/React__default.createElement(Basket$1, {
     link: basketLink,
     text: basketText,
@@ -5610,6 +5632,7 @@ var Tabs = function Tabs(_ref) {
   var _useState3 = useState(-1),
     hoverOverDropdown = _useState3[0],
     setHoverOverDropdown = _useState3[1];
+  var dropdownRefs = useRef([]);
   var onClickHandler = function onClickHandler(value) {
     setOpenMenu(value);
     if (onShowMenu) {
@@ -5649,23 +5672,25 @@ var Tabs = function Tabs(_ref) {
       setHoverOverDropdown(-1);
     }
   };
-  var _onFocus = function onFocus(i) {
-    return setActiveDropdown(i);
+  var onDropdownFocusLeave = function onDropdownFocusLeave() {
+    onResetActive();
   };
-  var _onBlur = function onBlur(i) {
-    var _items$length;
-    if (i === ((_items$length = items == null ? void 0 : items.length) != null ? _items$length : 0) - 1) {
+  var handleBlur = function handleBlur(index) {
+    var currentDropdown = dropdownRefs.current[index];
+    var active = document.activeElement;
+    if (currentDropdown && (!active || !currentDropdown.contains(active))) {
       onResetActive();
     }
   };
   return /*#__PURE__*/React__default.createElement(TabsContainer, {
+    role: "menubar",
     className: className
   }, /*#__PURE__*/React__default.createElement(ItemsContainer, {
     showMenu: showMenu
   }, items.map(function (item, index) {
     return /*#__PURE__*/React__default.createElement(ControlledDropdown, {
       key: "key-" + item.title,
-      text: item.title,
+      text: item.title || '',
       options: item.options,
       onClick: function onClick() {
         return onDropdownClick(index, item.titleLink);
@@ -5677,17 +5702,23 @@ var Tabs = function Tabs(_ref) {
       onMouseLeave: function onMouseLeave() {
         return onDropdownMouseLeave();
       },
-      onFocus: function onFocus() {
-        return _onFocus(index);
+      onFocusLeave: function onFocusLeave() {
+        return onDropdownFocusLeave();
       },
       onBlur: function onBlur() {
-        return _onBlur(index);
+        return handleBlur(index);
       },
       onReset: onResetActive,
-      active: isActiveDropdown(index)
+      active: isActiveDropdown(index),
+      ref: function ref(el) {
+        dropdownRefs.current[index] = el;
+      }
     });
   })), !showMenu && (/*#__PURE__*/React__default.createElement(MenuContainer$1, null, openMenu ? (/*#__PURE__*/React__default.createElement("a", {
     "data-testid": "mobile-menu-close",
+    role: "button",
+    "aria-label": "Close menu",
+    tabIndex: 0,
     onClick: function onClick(e) {
       e.preventDefault();
       onClickHandler(false);
@@ -5697,6 +5728,9 @@ var Tabs = function Tabs(_ref) {
     iconName: "Close"
   }))) : (/*#__PURE__*/React__default.createElement(MenuItem, null, /*#__PURE__*/React__default.createElement("a", {
     "data-testid": "mobile-menu-button",
+    role: "button",
+    "aria-label": "Open menu",
+    tabIndex: 0,
     onClick: function onClick(e) {
       e.preventDefault();
       onClickHandler(true);
@@ -5707,30 +5741,56 @@ var Tabs = function Tabs(_ref) {
 var _templateObject$C, _templateObject2$s, _templateObject3$i, _templateObject5$a, _templateObject6$7, _templateObject7$4;
 var SearchBarContainer = /*#__PURE__*/styled.div(_templateObject$C || (_templateObject$C = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: row;\n  column-gap: 64px;\n  justify-content: space-between;\n  align-items: center;\n  height: 100%;\n  background-color: transparent;\n\n  @media ", " {\n    column-gap: 12px;\n  }\n"])), devices.mobile);
 var SvgContainerSearch = /*#__PURE__*/styled.div(_templateObject2$s || (_templateObject2$s = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  svg {\n    width: var(--navigation-xlarge-gap);\n    height: var(--navigation-xlarge-gap);\n  }\n"])));
-var SvgContainerClose = /*#__PURE__*/styled.div(_templateObject3$i || (_templateObject3$i = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  svg {\n    width: var(--navigation-large-gap);\n    height: var(--navigation-large-gap);\n  }\n\n  :hover {\n    cursor: pointer;\n    && svg path {\n      fill: var(--color-primary-red);\n    }\n  }\n"])));
+var SvgContainerClose = /*#__PURE__*/styled.button(_templateObject3$i || (_templateObject3$i = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  all: unset;\n\n  svg {\n    width: var(--navigation-large-gap);\n    height: var(--navigation-large-gap);\n  }\n\n  :hover {\n    cursor: pointer;\n    && svg path {\n      fill: var(--color-primary-red);\n    }\n  }\n\n  &:focus {\n    outline: 2px solid var(--color-primary-black);\n    outline-offset: 2px;\n  }\n"])));
 var InputContainer = /*#__PURE__*/styled.div(_templateObject5$a || (_templateObject5$a = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  background-color: blue;\n  width: 100%;\n\n  input {\n    font-size: var(--font-size-search);\n    font-family: var(--font-family-serif);\n    border: none;\n    border-radius: 0;\n    outline: none;\n    outline-color: var(--color-base-white);\n    height: 48px;\n    box-sizing: border-box;\n    width: 100%;\n    -webkit-appearance: none;\n\n    &.search-input {\n      overflow: hidden;\n      text-overflow: ellipsis;\n      white-space: nowrap;\n    }\n\n    @media ", " {\n      column-gap: 24px;\n    }\n  }\n"])), devices.mobile);
 var TextLinkWrapper$1 = /*#__PURE__*/styled(TextLink)(_templateObject6$7 || (_templateObject6$7 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  color: var(--color-primary-red);\n"])));
 var SearchArrowContainer = /*#__PURE__*/styled.a(_templateObject7$4 || (_templateObject7$4 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  padding-right: 8px;\n\n  svg {\n    width: var(--navigation-large-gap);\n    height: var(--navigation-large-gap);\n  }\n"])));
 
+function useFocusTrap(containerRef, onEscape) {
+  useEffect(function () {
+    var container = containerRef.current;
+    if (!container) return undefined;
+    var focusableSelectors = 'input, button, select, textarea, a[href], [tabindex]:not([tabindex="-1"])';
+    var focusableEls = container.querySelectorAll(focusableSelectors);
+    var firstEl = focusableEls[0];
+    var lastEl = focusableEls[focusableEls.length - 1];
+    var handleKeyDown = function handleKeyDown(e) {
+      if (e.key === 'Tab') {
+        if (focusableEls.length === 0) return;
+        if (e.shiftKey && document.activeElement === firstEl) {
+          e.preventDefault();
+          lastEl == null || lastEl.focus();
+        } else if (!e.shiftKey && document.activeElement === lastEl) {
+          e.preventDefault();
+          firstEl == null || firstEl.focus();
+        }
+      }
+      if (e.key === 'Escape') {
+        onEscape == null || onEscape();
+      }
+    };
+    document.addEventListener('keydown', handleKeyDown);
+    return function () {
+      return document.removeEventListener('keydown', handleKeyDown);
+    };
+  }, [containerRef, onEscape]);
+}
+
 var SearchBar = function SearchBar(_ref) {
   var onClick = _ref.onClick,
     onClose = _ref.onClose,
-    className = _ref.className;
+    className = _ref.className,
+    inputRef = _ref.inputRef;
   var _useState = useState(false),
     showSearchLink = _useState[0],
     setShowSearchLink = _useState[1];
   var _useState2 = useState(''),
     searchValue = _useState2[0],
     setSearchValue = _useState2[1];
-  var inputRef = useRef(null);
-  useEffect(function () {
-    var _inputRef$current;
-    inputRef == null || (_inputRef$current = inputRef.current) == null || _inputRef$current.focus();
-    return function () {
-      var _inputRef$current2;
-      return inputRef == null || (_inputRef$current2 = inputRef.current) == null ? void 0 : _inputRef$current2.blur();
-    };
-  }, [inputRef]);
+  var internalRef = useRef(null);
+  var finalInputRef = inputRef != null ? inputRef : internalRef;
+  var containerRef = useRef(null);
+  useFocusTrap(containerRef, onClose);
   var onSearchHandler = function onSearchHandler(value) {
     onClick(value);
     setSearchValue('');
@@ -5766,12 +5826,13 @@ var SearchBar = function SearchBar(_ref) {
   var _useViewport = useViewport(),
     isDesktop = _useViewport.isDesktop;
   return /*#__PURE__*/React__default.createElement(SearchBarContainer, {
-    className: className
+    className: className,
+    ref: containerRef
   }, /*#__PURE__*/React__default.createElement(SvgContainerSearch, null, /*#__PURE__*/React__default.createElement(Icon, {
     iconName: "Search"
   })), /*#__PURE__*/React__default.createElement(InputContainer, null, /*#__PURE__*/React__default.createElement("input", {
     "data-testid": "input-html",
-    ref: inputRef,
+    ref: finalInputRef,
     className: "search-input",
     placeholder: "Search the website...",
     type: "text",
@@ -5785,7 +5846,9 @@ var SearchBar = function SearchBar(_ref) {
   })), showSearchLink && (isDesktop ? (/*#__PURE__*/React__default.createElement("div", {
     "data-testid": "search-button"
   }, /*#__PURE__*/React__default.createElement(TextLinkWrapper$1, {
+    role: "button",
     "data-testid": "search-link",
+    "aria-label": "Submit search",
     onClick: function onClick() {
       return onSearchHandler(searchValue);
     },
@@ -5794,6 +5857,8 @@ var SearchBar = function SearchBar(_ref) {
     },
     tabIndex: 0
   }, "Search"))) : (/*#__PURE__*/React__default.createElement(SearchArrowContainer, {
+    role: "button",
+    "aria-label": "Submit search",
     "data-testid": "search-arrow-button",
     onClick: function onClick() {
       return onSearchHandler(searchValue);
@@ -5804,7 +5869,8 @@ var SearchBar = function SearchBar(_ref) {
     tabIndex: 0,
     onClick: onCloseHandler,
     onKeyDown: onKeyboardCloseHandler,
-    "data-testid": "close-icon"
+    "data-testid": "close-icon",
+    "aria-label": "Close search bar"
   }, /*#__PURE__*/React__default.createElement(Icon, {
     iconName: "Close"
   })));
@@ -5821,6 +5887,8 @@ var Navigation = function Navigation(_ref) {
     crest = _ref$crest === void 0 ? false : _ref$crest,
     className = _ref.className,
     logoLink = _ref.logoLink;
+  var searchInputRef = useRef(null);
+  var searchButtonRef = useRef(null);
   var _useState = useState(dataNavTop),
     navTopData = _useState[0],
     setNavTopData = _useState[1];
@@ -5853,9 +5921,7 @@ var Navigation = function Navigation(_ref) {
     setNavTopData(dataNavTop);
   }, [dataNavTop]);
   var onClickSearchHandler = function onClickSearchHandler() {
-    setshowSearch(function (prev) {
-      return !prev;
-    });
+    setshowSearch(true);
   };
   var onLinkHandler = function onLinkHandler(link) {
     onLink(link);
@@ -5872,7 +5938,23 @@ var Navigation = function Navigation(_ref) {
   };
   var onCloseSearchHandler = function onCloseSearchHandler() {
     setshowSearch(false);
+    setTimeout(function () {
+      var _searchButtonRef$curr;
+      (_searchButtonRef$curr = searchButtonRef.current) == null || _searchButtonRef$curr.focus();
+    }, 0);
   };
+  useEffect(function () {
+    if (showSearch) {
+      var timer = setTimeout(function () {
+        var _searchInputRef$curre;
+        (_searchInputRef$curre = searchInputRef.current) == null || _searchInputRef$curre.focus();
+      }, 50);
+      return function () {
+        return clearTimeout(timer);
+      };
+    }
+    return undefined;
+  }, [showSearch]);
   var _useViewport = useViewport(),
     isMobile = _useViewport.isMobile;
   return /*#__PURE__*/React__default.createElement(NavigationWrapper, {
@@ -5914,7 +5996,8 @@ var Navigation = function Navigation(_ref) {
     basketNumVirtualItems: navTopData.basketNumVirtualItems,
     onClickSearch: onClickSearchHandler,
     onLink: onLinkHandler,
-    isShowSearch: showSearch
+    isShowSearch: showSearch,
+    searchButtonRef: searchButtonRef
   }))))), /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(SearchBackground, {
     visible: showSearch
   }), /*#__PURE__*/React__default.createElement(GridItemSearch, {
@@ -5925,6 +6008,7 @@ var Navigation = function Navigation(_ref) {
     columnStartDevice: 2,
     columnSpanDevice: 12
   }, /*#__PURE__*/React__default.createElement(SearchBar, {
+    inputRef: searchInputRef,
     onClick: onSearchHandler,
     onClose: onCloseSearchHandler
   })))), showMenu && (/*#__PURE__*/React__default.createElement(NavigationGridMobile, {