@spaced-out/ui-design-system 0.6.36 → 0.6.37

package/lib/components/Tabs/Tab/Tab.d.ts

@@ -12,7 +12,14 @@ export declare const TAB_SIZE: Readonly<{
 }>;
 export declare const tabSizeOptions: Array<unknown>;
 export type TabSize = keyof typeof TAB_SIZE;
-export interface TabProps {
+/**
+ * Attributes forwarded straight to the underlying `<button>`. Declared rather
+ * than relied on: `Tab` spreads its rest props, so these reached the DOM
+ * whether or not the type mentioned them — which meant a future refactor could
+ * drop a popup trigger's ARIA with no type error anywhere.
+ */
+type ForwardedButtonProps = Pick<React.ButtonHTMLAttributes<HTMLButtonElement>, 'id' | 'aria-label' | 'aria-haspopup' | 'aria-expanded' | 'aria-controls' | 'onKeyDown'>;
+export interface TabProps extends ForwardedButtonProps {
     classNames?: ClassNames;
     onSelect?: (arg1: {
         tabId?: string;

package/lib/components/Tabs/Tab/Tab.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Tab.d.ts","sourceRoot":"","sources":["../../../../src/components/Tabs/Tab/Tab.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,EAAC,IAAI,EAAC,MAAM,4BAA4B,CAAC;AAMrD,OAAO,KAAK,EAAC,QAAQ,EAAC,MAAM,qBAAqB,CAAC;AAGlD,OAAO,KAAK,EAAC,aAAa,EAAC,MAAM,wBAAwB,CAAC;AAM1D,KAAK,UAAU,GAAG,QAAQ,CAAC;IACzB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB,CAAC,CAAC;AAEH,eAAO,MAAM,QAAQ;;;EAGnB,CAAC;AAEH,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,OAAO,CAA8B,CAAC;AAEzE,MAAM,MAAM,OAAO,GAAG,MAAM,OAAO,QAAQ,CAAC;AAE5C,MAAM,WAAW,QAAQ;IACvB,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE;QAAC,KAAK,CAAC,EAAE,MAAM,CAAC;QAAC,KAAK,CAAC,EAAE,MAAM,CAAA;KAAC,KAAK,OAAO,CAAC;IAC/D,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,WAAW,CAAC,EAAE;QACZ,KAAK,CAAC,EAAE,MAAM,CAAC;QACf,KAAK,CAAC,EAAE,MAAM,CAAC;KAChB,CAAC;IACF,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAQ,CAAC,EAAE,QAAQ,CAAC;IACpB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,SAAS,CAAC,EAAE,aAAa,CAAC;IAC1B,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC,KAAK,OAAO,CAAC;IAC5D,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,eAAO,MAAM,GAAG,EAAE,IAAI,CAAC,iBAAiB,CAAC,QAAQ,EAAE,iBAAiB,CA6HjE,CAAC"}
+{"version":3,"file":"Tab.d.ts","sourceRoot":"","sources":["../../../../src/components/Tabs/Tab/Tab.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,EAAC,IAAI,EAAC,MAAM,4BAA4B,CAAC;AAMrD,OAAO,KAAK,EAAC,QAAQ,EAAC,MAAM,qBAAqB,CAAC;AAGlD,OAAO,KAAK,EAAC,aAAa,EAAC,MAAM,wBAAwB,CAAC;AAM1D,KAAK,UAAU,GAAG,QAAQ,CAAC;IACzB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB,CAAC,CAAC;AAEH,eAAO,MAAM,QAAQ;;;EAGnB,CAAC;AAEH,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,OAAO,CAA8B,CAAC;AAEzE,MAAM,MAAM,OAAO,GAAG,MAAM,OAAO,QAAQ,CAAC;AAE5C;;;;;GAKG;AACH,KAAK,oBAAoB,GAAG,IAAI,CAC9B,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,EAC3C,IAAI,GACJ,YAAY,GACZ,eAAe,GACf,eAAe,GACf,eAAe,GACf,WAAW,CACd,CAAC;AAEF,MAAM,WAAW,QAAS,SAAQ,oBAAoB;IACpD,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE;QAAC,KAAK,CAAC,EAAE,MAAM,CAAC;QAAC,KAAK,CAAC,EAAE,MAAM,CAAA;KAAC,KAAK,OAAO,CAAC;IAC/D,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,WAAW,CAAC,EAAE;QACZ,KAAK,CAAC,EAAE,MAAM,CAAC;QACf,KAAK,CAAC,EAAE,MAAM,CAAC;KAChB,CAAC;IACF,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAQ,CAAC,EAAE,QAAQ,CAAC;IACpB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,SAAS,CAAC,EAAE,aAAa,CAAC;IAC1B,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC,KAAK,OAAO,CAAC;IAC5D,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,eAAO,MAAM,GAAG,EAAE,IAAI,CAAC,iBAAiB,CAAC,QAAQ,EAAE,iBAAiB,CA6HjE,CAAC"}

package/lib/components/Tabs/Tab/Tab.js

@@ -20,6 +20,14 @@ const TAB_SIZE = exports.TAB_SIZE = Object.freeze({
   medium: 'medium'
 });
 const tabSizeOptions = exports.tabSizeOptions = [...Object.keys(TAB_SIZE)];
+
+/**
+ * Attributes forwarded straight to the underlying `<button>`. Declared rather
+ * than relied on: `Tab` spreads its rest props, so these reached the DOM
+ * whether or not the type mentioned them — which meant a future refactor could
+ * drop a popup trigger's ARIA with no type error anywhere.
+ */
+
 const Tab = exports.Tab = /*#__PURE__*/React.forwardRef((_ref, forwardRef) => {
   let {
     classNames,

package/lib/components/Tabs/TabList/TabDropdown.d.ts

@@ -17,9 +17,18 @@ export interface TabDropdownProps {
     classNames?: ClassNames;
     selected?: boolean;
     disabled?: boolean;
+    /**
+     * Opt in to the accessibility behavior: `aria-haspopup` / `aria-expanded` /
+     * `aria-controls` on the tab, the arrow key that opens the popup, and focus
+     * moving into the menu and back. Forwarded to the `Menu` this opens.
+     *
+     * Off by default, and off is this component exactly as it behaved before any
+     * of it existed.
+     */
+    enableA11y?: boolean;
     elevation?: ElevationType;
     testId?: string;
 }
-export declare const TabDropdown: ({ anchorPosition, size, onOptionSelect, props, elevation, classNames, testId, }: TabDropdownProps) => React.JSX.Element;
+export declare const TabDropdown: ({ anchorPosition, size, onOptionSelect, props, elevation, classNames, enableA11y, testId, }: TabDropdownProps) => React.JSX.Element;
 export {};
 //# sourceMappingURL=TabDropdown.d.ts.map

package/lib/components/Tabs/TabList/TabDropdown.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TabDropdown.d.ts","sourceRoot":"","sources":["../../../../src/components/Tabs/TabList/TabDropdown.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAkB/B,OAAO,KAAK,EAAC,UAAU,EAAC,MAAM,+BAA+B,CAAC;AAC9D,OAAO,KAAK,EAAC,UAAU,EAAE,SAAS,EAAC,MAAM,qBAAqB,CAAC;AAE/D,OAAO,KAAK,EAAC,QAAQ,EAAC,MAAM,yBAAyB,CAAC;AAEtD,OAAO,KAAK,EAAC,aAAa,EAAC,MAAM,wBAAwB,CAAC;AAM1D,KAAK,UAAU,GAAG,QAAQ,CAAC;IACzB,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB,CAAC,CAAC;AAEH,MAAM,WAAW,gBAAgB;IAC/B,cAAc,CAAC,EAAE,UAAU,CAAC;IAC5B,IAAI,CAAC,EAAE,QAAQ,GAAG,OAAO,CAAC;IAC1B,KAAK,CAAC,EAAE;QACN,GAAG,EAAE,QAAQ,CAAC;QACd,IAAI,EAAE,SAAS,CAAC;KACjB,CAAC;IACF,cAAc,CAAC,EAAE,CACf,MAAM,EAAE,UAAU,EAClB,IAAI,CAAC,EAAE,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC,GAAG,IAAI,GAAG,SAAS,KACxD,OAAO,CAAC;IACb,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,aAAa,CAAC;IAC1B,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,eAAO,MAAM,WAAW,GAAI,iFAQzB,gBAAgB,sBAsElB,CAAC"}
+{"version":3,"file":"TabDropdown.d.ts","sourceRoot":"","sources":["../../../../src/components/Tabs/TabList/TabDropdown.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAiB/B,OAAO,KAAK,EAAC,UAAU,EAAC,MAAM,+BAA+B,CAAC;AAC9D,OAAO,KAAK,EAAC,UAAU,EAAE,SAAS,EAAC,MAAM,qBAAqB,CAAC;AAI/D,OAAO,KAAK,EAAC,QAAQ,EAAC,MAAM,yBAAyB,CAAC;AAEtD,OAAO,KAAK,EAAC,aAAa,EAAC,MAAM,wBAAwB,CAAC;AAM1D,KAAK,UAAU,GAAG,QAAQ,CAAC;IACzB,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB,CAAC,CAAC;AAEH,MAAM,WAAW,gBAAgB;IAC/B,cAAc,CAAC,EAAE,UAAU,CAAC;IAC5B,IAAI,CAAC,EAAE,QAAQ,GAAG,OAAO,CAAC;IAC1B,KAAK,CAAC,EAAE;QACN,GAAG,EAAE,QAAQ,CAAC;QACd,IAAI,EAAE,SAAS,CAAC;KACjB,CAAC;IACF,cAAc,CAAC,EAAE,CACf,MAAM,EAAE,UAAU,EAClB,IAAI,CAAC,EAAE,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC,GAAG,IAAI,GAAG,SAAS,KACxD,OAAO,CAAC;IACb,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;;;;;OAOG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,SAAS,CAAC,EAAE,aAAa,CAAC;IAC1B,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,eAAO,MAAM,WAAW,GAAI,6FASzB,gBAAgB,sBAwFlB,CAAC"}

package/lib/components/Tabs/TabList/TabDropdown.js

@@ -12,6 +12,8 @@ var _clickAway = require("../../../utils/click-away");
 var _mergeRefs = require("../../../utils/merge-refs");
 var _qa = require("../../../utils/qa");
 var _Menu = require("../../Menu");
+var _MenuFocusScope = require("../../Menu/MenuFocusScope");
+var _useMenuTrigger = require("../../Menu/useMenuTrigger");
 var _Tab = require("../Tab");
 var _Tooltip = require("../../Tooltip");
 var _TabDropdownModule = _interopRequireDefault(require("./TabDropdown.module.css"));
@@ -26,8 +28,17 @@ const TabDropdown = _ref => {
     props,
     elevation = 'modal',
     classNames,
+    enableA11y = false,
     testId
   } = _ref;
+  const menuTrigger = (0, _useMenuTrigger.useMenuTrigger)({
+    enabled: enableA11y,
+    // The consumer's own id and menu naming win — see ButtonDropdown.
+    id: props?.tab?.id,
+    menuId: props?.menu?.menuId,
+    ariaLabel: props?.menu?.ariaLabel,
+    ariaLabelledBy: props?.menu?.ariaLabelledBy
+  });
   const {
     x,
     y,
@@ -42,6 +53,7 @@ const TabDropdown = _ref => {
     middleware: [(0, _react2.shift)(), (0, _react2.flip)(), (0, _react2.offset)(parseInt(_space.spaceXXSmall))]
   });
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_clickAway.ClickAway, {
+    restoreFocusOnClose: enableA11y,
     children: _ref2 => {
       let {
         isOpen,
@@ -58,6 +70,12 @@ const TabDropdown = _ref => {
         className: (0, _classify.classify)(_TabDropdownModule.default.tabDropdownContainer, classNames?.wrapper),
         children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Tab.Tab, {
           ...props?.tab,
+          ...menuTrigger.getTriggerProps({
+            // With no `menu` there is no popup to advertise or to open.
+            isOpen: isOpen && Boolean(props?.menu),
+            onOpen,
+            onKeyDown: props?.tab?.onKeyDown
+          }),
           size: size,
           ref: (0, _mergeRefs.mergeRefs)([refs.setReference, triggerRef]),
           onClick: e => {
@@ -73,8 +91,8 @@ const TabDropdown = _ref => {
             slot: 'dropdown-tab'
           })
         }), isOpen && props?.menu && /*#__PURE__*/(0, _jsxRuntime.jsx)(_react2.FloatingPortal, {
-          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_react2.FloatingFocusManager, {
-            modal: false,
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_MenuFocusScope.MenuFocusScope, {
+            enabled: !enableA11y,
             context: context,
             initialFocus: refs.reference,
             children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
@@ -93,6 +111,7 @@ const TabDropdown = _ref => {
               },
               children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Menu.Menu, {
                 ...props.menu,
+                ...menuTrigger.menuProps,
                 onSelect: (option, e) => {
                   onOptionSelect?.(option, e);
                   clickAway();
@@ -102,7 +121,8 @@ const TabDropdown = _ref => {
                 testId: (0, _qa.generateTestId)({
                   base: testId,
                   slot: 'menu'
-                })
+                }),
+                enableA11y: enableA11y
               })
             })
           })

package/lib/components/Tabs/TabList/TabList.d.ts

@@ -19,6 +19,20 @@ export interface TabListProps {
     menuWidth?: string;
     elevation?: ElevationType;
     maxTabWidth?: string;
+    /**
+     * Accessible name for the overflow tab, which is icon-only and therefore has
+     * no text of its own — it also names the listbox that tab opens. Override it
+     * for another language, as `ButtonTabs` does with `wrapTabTitle`.
+     */
+    overflowTabLabel?: string;
+    /**
+     * Opt in to the accessibility behavior for the overflow tab and the menu it
+     * opens, and give that icon-only tab an accessible name.
+     *
+     * Off by default, and off is this component exactly as it behaved before any
+     * of it existed.
+     */
+    enableA11y?: boolean;
     testId?: string;
 }
 export declare const TabList: Flow.AbstractComponent<TabListProps, HTMLDivElement>;

package/lib/components/Tabs/TabList/TabList.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TabList.d.ts","sourceRoot":"","sources":["../../../../src/components/Tabs/TabList/TabList.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,EAAC,IAAI,EAAC,MAAM,4BAA4B,CAAC;AAWrD,OAAO,KAAK,EAAC,aAAa,EAAC,MAAM,wBAAwB,CAAC;AAuB1D,KAAK,UAAU,GAAG,QAAQ,CAAC;IACzB,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB,CAAC,CAAC;AAEH,MAAM,WAAW,YAAY;IAC3B,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE;QAAC,KAAK,EAAE,MAAM,CAAC;QAAC,KAAK,CAAC,EAAE,MAAM,CAAA;KAAC,KAAK,OAAO,CAAC;IAC9D,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,IAAI,CAAC,EAAE,QAAQ,GAAG,OAAO,CAAC;IAC1B,WAAW,CAAC,EAAE;QACZ,KAAK,EAAE,MAAM,CAAC;QACd,KAAK,CAAC,EAAE,MAAM,CAAC;KAChB,CAAC;IACF,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,aAAa,CAAC;IAC1B,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,eAAO,MAAM,OAAO,EAAE,IAAI,CAAC,iBAAiB,CAAC,YAAY,EAAE,cAAc,CA8JtE,CAAC"}
+{"version":3,"file":"TabList.d.ts","sourceRoot":"","sources":["../../../../src/components/Tabs/TabList/TabList.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,EAAC,IAAI,EAAC,MAAM,4BAA4B,CAAC;AAWrD,OAAO,KAAK,EAAC,aAAa,EAAC,MAAM,wBAAwB,CAAC;AAuB1D,KAAK,UAAU,GAAG,QAAQ,CAAC;IACzB,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB,CAAC,CAAC;AAEH,MAAM,WAAW,YAAY;IAC3B,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE;QAAC,KAAK,EAAE,MAAM,CAAC;QAAC,KAAK,CAAC,EAAE,MAAM,CAAA;KAAC,KAAK,OAAO,CAAC;IAC9D,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,IAAI,CAAC,EAAE,QAAQ,GAAG,OAAO,CAAC;IAC1B,WAAW,CAAC,EAAE;QACZ,KAAK,EAAE,MAAM,CAAC;QACd,KAAK,CAAC,EAAE,MAAM,CAAC;KAChB,CAAC;IACF,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,aAAa,CAAC;IAC1B,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;;;OAIG;IACH,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B;;;;;;OAMG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,eAAO,MAAM,OAAO,EAAE,IAAI,CAAC,iBAAiB,CAAC,YAAY,EAAE,cAAc,CAoKtE,CAAC"}

package/lib/components/Tabs/TabList/TabList.js

@@ -29,6 +29,8 @@ const TabList = exports.TabList = /*#__PURE__*/React.forwardRef((_ref, forwardRe
     // tooltips may appear over the modal. In such cases, handle it by passing an appropriate elevation.
     elevation = 'modal',
     maxTabWidth = _size.size120,
+    overflowTabLabel = 'More tabs',
+    enableA11y = false,
     testId
   } = _ref;
   const ref = React.useRef(null);
@@ -107,6 +109,9 @@ const TabList = exports.TabList = /*#__PURE__*/React.forwardRef((_ref, forwardRe
       props: {
         tab: {
           iconName: 'ellipsis',
+          // Also names the listbox this tab opens, through the trigger
+          // idref the hook sets up.
+          'aria-label': enableA11y ? overflowTabLabel : undefined,
           tabId: 'tab-dropdown',
           selectedTab: {
             tabId: isMenuOptionSelected ? 'tab-dropdown' : ''
@@ -121,6 +126,7 @@ const TabList = exports.TabList = /*#__PURE__*/React.forwardRef((_ref, forwardRe
         }
       },
       elevation: elevation,
+      enableA11y: enableA11y,
       testId: (0, _qa.generateTestId)({
         base: testId,
         slot: 'dropdown'

package/lib/components/Typeahead/Typeahead.d.ts

@@ -21,6 +21,15 @@ interface BaseTypeaheadProps extends Omit<InputProps, 'classNames' | 'onSelect'
     menuOpenOffset?: number;
     clickAwayRef?: React.RefObject<ClickAwayRefType | null>;
     elevation?: ElevationType;
+    /**
+     * Opt in to the accessibility behavior: the `combobox` role and its ARIA,
+     * arrow-key navigation of the suggestions from the input, and focus handling
+     * on close. Forwarded to the `Menu` this opens.
+     *
+     * Off by default, and off is this component exactly as it behaved before any
+     * of it existed.
+     */
+    enableA11y?: boolean;
     testId?: string;
     rightSlot?: React.ReactNode;
 }

package/lib/components/Typeahead/Typeahead.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Typeahead.d.ts","sourceRoot":"","sources":["../../../src/components/Typeahead/Typeahead.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAU/B,OAAO,KAAK,EAAC,IAAI,EAAC,MAAM,4BAA4B,CAAC;AAKrD,OAAO,KAAK,EAAC,gBAAgB,EAAC,MAAM,sBAAsB,CAAC;AAK3D,OAAO,KAAK,EAAC,UAAU,EAAC,MAAM,sBAAsB,CAAC;AACrD,OAAO,KAAK,EAAC,UAAU,EAAE,SAAS,EAAC,MAAM,qBAAqB,CAAC;AAG/D,OAAO,KAAK,EAAC,aAAa,EAAC,MAAM,wBAAwB,CAAC;AAM1D,KAAK,UAAU,GAAG,QAAQ,CAAC;IACzB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,GAAG,CAAC,EAAE,MAAM,CAAC;CACd,CAAC,CAAC;AAEH,UAAU,kBACR,SAAQ,IAAI,CACV,UAAU,EACR,YAAY,GACZ,UAAU,GACV,UAAU,GACV,YAAY,GACZ,aAAa,GACb,oBAAoB,GACpB,MAAM,GACN,SAAS,GACT,WAAW,GACX,gBAAgB,GAChB,cAAc,GACd,WAAW,CACd;IACD,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,QAAQ,CAAC,EAAE,CACT,MAAM,EAAE,UAAU,EAClB,IAAI,CAAC,EAAE,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC,GAAG,IAAI,GAAG,SAAS,KACxD,OAAO,CAAC;IACb,QAAQ,CAAC,EAAE,CAAC,GAAG,EAAE,KAAK,CAAC,WAAW,CAAC,gBAAgB,CAAC,KAAK,OAAO,CAAC;IACjE,UAAU,CAAC,EAAE,MAAM,OAAO,CAAC;IAC3B,WAAW,CAAC,EAAE,MAAM,OAAO,CAAC;IAC5B,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,YAAY,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,gBAAgB,GAAG,IAAI,CAAC,CAAC;IACxD,SAAS,CAAC,EAAE,aAAa,CAAC;IAC1B,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC7B;AAED,MAAM,WAAW,cACf,SAAQ,IAAI,CAAC,kBAAkB,EAAE,qBAAqB,CAAC;IACvD,mBAAmB,CAAC,EAAE,OAAO,CAAC;CAC/B;AA6OD,eAAO,MAAM,SAAS,EAAE,IAAI,CAAC,iBAAiB,CAC5C,cAAc,EACd,gBAAgB,CASjB,CAAC"}
+{"version":3,"file":"Typeahead.d.ts","sourceRoot":"","sources":["../../../src/components/Typeahead/Typeahead.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAS/B,OAAO,KAAK,EAAC,IAAI,EAAC,MAAM,4BAA4B,CAAC;AAKrD,OAAO,KAAK,EAAC,gBAAgB,EAAC,MAAM,sBAAsB,CAAC;AAK3D,OAAO,KAAK,EAAC,UAAU,EAAC,MAAM,sBAAsB,CAAC;AACrD,OAAO,KAAK,EAAC,UAAU,EAAE,SAAS,EAAC,MAAM,qBAAqB,CAAC;AAK/D,OAAO,KAAK,EAAC,aAAa,EAAC,MAAM,wBAAwB,CAAC;AAM1D,KAAK,UAAU,GAAG,QAAQ,CAAC;IACzB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,GAAG,CAAC,EAAE,MAAM,CAAC;CACd,CAAC,CAAC;AAEH,UAAU,kBACR,SAAQ,IAAI,CACV,UAAU,EACR,YAAY,GACZ,UAAU,GACV,UAAU,GACV,YAAY,GACZ,aAAa,GACb,oBAAoB,GACpB,MAAM,GACN,SAAS,GACT,WAAW,GACX,gBAAgB,GAChB,cAAc,GACd,WAAW,CACd;IACD,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,QAAQ,CAAC,EAAE,CACT,MAAM,EAAE,UAAU,EAClB,IAAI,CAAC,EAAE,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC,GAAG,IAAI,GAAG,SAAS,KACxD,OAAO,CAAC;IACb,QAAQ,CAAC,EAAE,CAAC,GAAG,EAAE,KAAK,CAAC,WAAW,CAAC,gBAAgB,CAAC,KAAK,OAAO,CAAC;IACjE,UAAU,CAAC,EAAE,MAAM,OAAO,CAAC;IAC3B,WAAW,CAAC,EAAE,MAAM,OAAO,CAAC;IAC5B,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,YAAY,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,gBAAgB,GAAG,IAAI,CAAC,CAAC;IACxD,SAAS,CAAC,EAAE,aAAa,CAAC;IAC1B;;;;;;;OAOG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC7B;AAED,MAAM,WAAW,cACf,SAAQ,IAAI,CAAC,kBAAkB,EAAE,qBAAqB,CAAC;IACvD,mBAAmB,CAAC,EAAE,OAAO,CAAC;CAC/B;AAuXD,eAAO,MAAM,SAAS,EAAE,IAAI,CAAC,iBAAiB,CAC5C,cAAc,EACd,gBAAgB,CASjB,CAAC"}

package/lib/components/Typeahead/Typeahead.js

@@ -13,6 +13,8 @@ var _clickAway = require("../../utils/click-away");
 var _mergeRefs = require("../../utils/merge-refs");
 var _qa = require("../../utils/qa");
 var _Menu = require("../Menu");
+var _MenuFocusScope = require("../Menu/MenuFocusScope");
+var _useMenuTrigger = require("../Menu/useMenuTrigger");
 var _SearchInput = require("../SearchInput");
 var _Tooltip = require("../Tooltip");
 var _TypeaheadModule = _interopRequireDefault(require("./Typeahead.module.css"));
@@ -36,6 +38,7 @@ const BaseTypeahead = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     onFocus,
     clickAwayRef,
     elevation = 'modal',
+    enableA11y = false,
     testId,
     rightSlot,
     ...inputProps
@@ -44,6 +47,12 @@ const BaseTypeahead = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   const groupTitleOptions = menu?.groupTitleOptions;
   const isMenuOptionsPresent = menuOptions && menuOptions.length > 0;
   const isMenuGroupPresent = groupTitleOptions && groupTitleOptions.length > 0;
+  const menuListRef = React.useRef(null);
+  const clickAwayFnRef = React.useRef(null);
+  // Set when we close the menu ourselves after a selection, so the focus
+  // restoration that follows does not read as the user entering the field.
+  const skipNextFocusOpenRef = React.useRef(false);
+  const [isMenuOpen, setIsMenuOpen] = React.useState(false);
   const {
     x,
     y,
@@ -58,7 +67,58 @@ const BaseTypeahead = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     middleware: [(0, _react2.flip)(), (0, _react2.offset)(parseInt(_space.spaceXXSmall))]
   });
   const dropdownWidth = (0, _hooks.useReferenceElementWidth)(refs.reference?.current);
+
+  // The options Menu will actually render, in its own precedence: it returns
+  // on the first non-empty source, so concatenating both would count and
+  // navigate rows that are not on screen.
+  const flatOptions = React.useMemo(() => (0, _Menu.getFlatOptions)({
+    options: menuOptions,
+    groupTitleOptions
+  }), [menuOptions, groupTitleOptions]);
+  const focusSearchInput = () => {
+    refs.reference?.current?.querySelector('input')?.focus();
+  };
+  const handleOptionSelect = (option, e) => {
+    onSelect?.(option, e ?? null);
+    if (
+    // keepMenuOpenOnOptionSelect lets the menu persist on select in the normal variant
+    !option.keepMenuOpenOnOptionSelect && (!menu?.optionsVariant || menu.optionsVariant === 'normal')) {
+      // Swallow the focus event that ClickAway's focus restoration will fire
+      // on the input, so closing here actually sticks — but only when focus is
+      // inside the menu and a restoration is therefore coming. Selecting with
+      // Enter never moves focus off the input, so nothing would consume the
+      // flag and it would swallow the user's next genuine focus instead.
+      // Only with the opt-in: without it ClickAway restores no focus, so
+      // there is no restoration event to swallow.
+      skipNextFocusOpenRef.current = Boolean(enableA11y && typeof document !== 'undefined' && menuListRef.current?.contains(document.activeElement));
+      clickAwayFnRef.current?.();
+    }
+  };
+
+  // Editable combobox: focus stays on the SearchInput, arrows move the active
+  // descendant in the portaled listbox, Enter selects, printable keys fall
+  // through to the input (which filters the options). The shared hook owns
+  // that wiring, the highlight and the trigger's ARIA.
+  const comboboxTrigger = (0, _useMenuTrigger.useComboboxMenuTrigger)({
+    enabled: enableA11y,
+    pattern: 'autocomplete',
+    menu,
+    // This component owns filtering, so it hands over the options it will
+    // actually render rather than letting the hook read them from `menu`.
+    options: flatOptions,
+    menuRef: menuListRef,
+    isOpen: isMenuOpen,
+    onSelectOption: option => handleOptionSelect(option, null),
+    onClose: () => clickAwayFnRef.current?.(),
+    focusTrigger: focusSearchInput,
+    canOpen: () => typeaheadInputText.length >= menuOpenOffset,
+    triggerAriaLabelledBy: inputProps['aria-labelledby'],
+    triggerAriaLabel: inputProps['aria-label'],
+    // These are suggestions, not a fixed set of options.
+    defaultAriaLabel: 'Suggestions'
+  });
   const onMenuToggle = isOpen => {
+    setIsMenuOpen(isOpen);
     if (isOpen) {
       onMenuOpen?.();
     } else {
@@ -68,6 +128,7 @@ const BaseTypeahead = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_clickAway.ClickAway, {
     onChange: onMenuToggle,
     clickAwayRef: clickAwayRef,
+    restoreFocusOnClose: enableA11y,
     children: _ref2 => {
       let {
         isOpen,
@@ -76,6 +137,13 @@ const BaseTypeahead = /*#__PURE__*/React.forwardRef((_ref, ref) => {
         boundaryRef,
         triggerRef
       } = _ref2;
+      // Capture the latest close handler for keyboard selection (wired at
+      // the component top level).
+      clickAwayFnRef.current = clickAway;
+      // The single source of truth for "the listbox exists right now", used
+      // both to render the portal and to drive the trigger's ARIA state so
+      // the two can never disagree.
+      const isMenuRendered = Boolean(isOpen && !isLoading && menu && (isMenuOptionsPresent || isMenuGroupPresent));
       return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
         "data-testid": (0, _qa.generateTestId)({
           base: testId,
@@ -85,6 +153,21 @@ const BaseTypeahead = /*#__PURE__*/React.forwardRef((_ref, ref) => {
         children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_SearchInput.SearchInput, {
           ...inputProps,
           ref: ref,
+          ...comboboxTrigger.getTriggerProps({
+            // The popup's own state routes the keys: `onOpen` TOGGLES, so
+            // treating an open-but-withheld menu (loading, no matches) as
+            // closed would make ArrowDown close it.
+            isOpen,
+            // ...while the ARIA describes what is actually rendered, since
+            // the popup is withheld while loading and when nothing
+            // matches. Claiming aria-expanded with an aria-controls IDREF
+            // that resolves to nothing is both a lie to the user and an
+            // invalid value.
+            isExpanded: isMenuRendered,
+            onOpen,
+            onKeyDown: inputProps.onKeyDown
+          }),
+          "aria-busy": enableA11y && isLoading || undefined,
           boxRef: (0, _mergeRefs.mergeRefs)([refs.setReference, triggerRef]),
           size: size,
           placeholder: placeholder,
@@ -106,7 +189,13 @@ const BaseTypeahead = /*#__PURE__*/React.forwardRef((_ref, ref) => {
             }
           },
           onFocus: _e => {
-            if (typeaheadInputText.length >= menuOpenOffset) {
+            // Picking an option with the pointer unmounts the row that had
+            // focus, so ClickAway hands focus back to this input. That is a
+            // restoration, not the user entering the field, and treating it
+            // as one would immediately reopen the menu we just closed.
+            if (skipNextFocusOpenRef.current) {
+              skipNextFocusOpenRef.current = false;
+            } else if (typeaheadInputText.length >= menuOpenOffset) {
               if (!isOpen) {
                 onOpen();
               }
@@ -122,9 +211,18 @@ const BaseTypeahead = /*#__PURE__*/React.forwardRef((_ref, ref) => {
             base: testId,
             slot: 'search-input'
           })
-        }), isOpen && !isLoading && menu && (isMenuOptionsPresent || isMenuGroupPresent) && /*#__PURE__*/(0, _jsxRuntime.jsx)(_react2.FloatingPortal, {
-          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_react2.FloatingFocusManager, {
-            modal: false,
+        }), enableA11y && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          role: "status",
+          "aria-live": "polite",
+          className: _TypeaheadModule.default.visuallyHidden,
+          "data-testid": (0, _qa.generateTestId)({
+            base: testId,
+            slot: 'live-status'
+          }),
+          children: isLoading ? menu?.staticLabels?.LOADING_RESULTS ?? 'Loading results' : isOpen ? flatOptions.length === 0 ? menu?.staticLabels?.NO_RESULTS ?? 'No results' : `${flatOptions.length} ${flatOptions.length === 1 ? menu?.staticLabels?.RESULT ?? 'result' : menu?.staticLabels?.RESULTS ?? 'results'}` : ''
+        }), isMenuRendered && menu && /*#__PURE__*/(0, _jsxRuntime.jsx)(_react2.FloatingPortal, {
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_MenuFocusScope.MenuFocusScope, {
+            enabled: !enableA11y,
             context: context,
             returnFocus: false,
             initialFocus: refs.reference,
@@ -151,22 +249,18 @@ const BaseTypeahead = /*#__PURE__*/React.forwardRef((_ref, ref) => {
               },
               children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Menu.Menu, {
                 ...menu,
+                ref: menuListRef,
+                ...comboboxTrigger.menuProps,
                 groupTitleOptions: groupTitleOptions,
                 options: menuOptions,
                 testId: (0, _qa.generateTestId)({
                   base: testId,
                   slot: 'menu'
                 }),
-                onSelect: (option, e) => {
-                  onSelect?.(option, e);
-                  if (
-                  // option.keepMenuOpenOnOptionSelect - to allow the menu persist its open stat upon option selection in normal variant
-                  !option.keepMenuOpenOnOptionSelect && (!menu.optionsVariant || menu.optionsVariant === 'normal')) {
-                    clickAway();
-                  }
-                },
+                onSelect: handleOptionSelect,
                 size: menu.size || size,
-                onTabOut: clickAway
+                onTabOut: clickAway,
+                enableA11y: enableA11y
               })
             })
           })

package/lib/components/Typeahead/Typeahead.module.css

@@ -14,3 +14,16 @@
   width: var(--dropdown-width);
   z-index: var(--menu-elevation);
 }
+
+/* Announced by screen readers (loading / result count) but visually hidden. */
+.visuallyHidden {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  margin: -1px;
+  padding: 0;
+  border: 0;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+}

package/lib/hooks/index.d.ts

@@ -4,6 +4,7 @@ export * from '../hooks/useDebounce';
 export * from '../hooks/useFileUpload';
 export * from '../hooks/useFilteredOptions';
 export * from '../hooks/useInfiniteScroll';
+export * from '../hooks/useInteractionModality';
 export * from '../hooks/useInputState';
 export * from '../hooks/useLockedBody';
 export * from '../hooks/useModal';

package/lib/hooks/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/hooks/index.ts"],"names":[],"mappings":"AAAA,cAAc,sCAAsC,CAAC;AACrD,cAAc,8BAA8B,CAAC;AAC7C,cAAc,uBAAuB,CAAC;AACtC,cAAc,yBAAyB,CAAC;AACxC,cAAc,8BAA8B,CAAC;AAC7C,cAAc,6BAA6B,CAAC;AAC5C,cAAc,yBAAyB,CAAC;AACxC,cAAc,yBAAyB,CAAC;AACxC,cAAc,oBAAoB,CAAC;AACnC,cAAc,8BAA8B,CAAC;AAC7C,cAAc,yBAAyB,CAAC;AACxC,cAAc,oCAAoC,CAAC;AACnD,cAAc,6BAA6B,CAAC;AAC5C,cAAc,0BAA0B,CAAC;AACzC,cAAc,qBAAqB,CAAC;AACpC,cAAc,yBAAyB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/hooks/index.ts"],"names":[],"mappings":"AAAA,cAAc,sCAAsC,CAAC;AACrD,cAAc,8BAA8B,CAAC;AAC7C,cAAc,uBAAuB,CAAC;AACtC,cAAc,yBAAyB,CAAC;AACxC,cAAc,8BAA8B,CAAC;AAC7C,cAAc,6BAA6B,CAAC;AAC5C,cAAc,kCAAkC,CAAC;AACjD,cAAc,yBAAyB,CAAC;AACxC,cAAc,yBAAyB,CAAC;AACxC,cAAc,oBAAoB,CAAC;AACnC,cAAc,8BAA8B,CAAC;AAC7C,cAAc,yBAAyB,CAAC;AACxC,cAAc,oCAAoC,CAAC;AACnD,cAAc,6BAA6B,CAAC;AAC5C,cAAc,0BAA0B,CAAC;AACzC,cAAc,qBAAqB,CAAC;AACpC,cAAc,yBAAyB,CAAC"}

package/lib/hooks/index.js

@@ -69,6 +69,17 @@ Object.keys(_useInfiniteScroll).forEach(function (key) {
     }
   });
 });
+var _useInteractionModality = require("./useInteractionModality");
+Object.keys(_useInteractionModality).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _useInteractionModality[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _useInteractionModality[key];
+    }
+  });
+});
 var _useInputState = require("./useInputState");
 Object.keys(_useInputState).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;

package/lib/hooks/useInteractionModality/index.d.ts

@@ -0,0 +1,2 @@
+export * from '../../hooks/useInteractionModality/useInteractionModality';
+//# sourceMappingURL=index.d.ts.map

package/lib/hooks/useInteractionModality/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/hooks/useInteractionModality/index.ts"],"names":[],"mappings":"AAAA,cAAc,yDAAyD,CAAC"}

package/lib/hooks/useInteractionModality/index.js

@@ -0,0 +1,16 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _useInteractionModality = require("./useInteractionModality");
+Object.keys(_useInteractionModality).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _useInteractionModality[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _useInteractionModality[key];
+    }
+  });
+});

package/lib/hooks/useInteractionModality/useInteractionModality.d.ts

@@ -0,0 +1,39 @@
+export type InteractionModality = 'keyboard' | 'pointer';
+/**
+ * Begin tracking. Idempotent, and session-scoped by design: the listeners live
+ * for the life of the page, so there is nothing to tear down.
+ *
+ * Tracking has to start BEFORE the thing that wants the answer exists. The
+ * interesting question is "how was the popup that just mounted opened?", and the
+ * keypress that opened it happened while the popup did not yet exist — so a
+ * component reading this on mount is always too late to have attached the
+ * listener itself. Whatever renders earlier and knows a popup may follow — a
+ * menu trigger — primes it.
+ *
+ * It is not primed on import. Attaching document listeners is a side effect, and
+ * a consumer that has not opted into any of this should get none: an app merely
+ * importing a component from this package must not start listening to its
+ * keyboard. Capture phase, so the modality is recorded before any component
+ * handler reacts to the same event.
+ */
+export declare const startInteractionModalityTracking: () => void;
+/**
+ * How the user last interacted with the page, read imperatively.
+ *
+ * Use this when the answer is needed during render or in an effect rather than
+ * as reactive state — for example a popup deciding on mount whether it was opened
+ * by keyboard, where re-rendering on later modality changes would be wrong.
+ */
+export declare const getInteractionModality: () => InteractionModality;
+/**
+ * How the user last interacted with the page, as reactive state. Re-renders the
+ * caller when the user switches between keyboard and pointer.
+ */
+export declare const useInteractionModality: (
+/**
+ * Subscribe at all. False leaves the caller on the default and attaches
+ * nothing — for a component whose consumer has not opted into the behavior
+ * this modality serves.
+ */
+enabled?: boolean) => InteractionModality;
+//# sourceMappingURL=useInteractionModality.d.ts.map

package/lib/hooks/useInteractionModality/useInteractionModality.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useInteractionModality.d.ts","sourceRoot":"","sources":["../../../src/hooks/useInteractionModality/useInteractionModality.ts"],"names":[],"mappings":"AAGA,MAAM,MAAM,mBAAmB,GAAG,UAAU,GAAG,SAAS,CAAC;AAgEzD;;;;;;;;;;;;;;;;GAgBG;AACH,eAAO,MAAM,gCAAgC,QAAO,IAOnD,CAAC;AAUF;;;;;;GAMG;AACH,eAAO,MAAM,sBAAsB,QAAO,mBACzB,CAAC;AAElB;;;GAGG;AACH,eAAO,MAAM,sBAAsB;AACjC;;;;GAIG;AACH,iBAAc,KACb,mBAWF,CAAC"}