@workday/canvas-kit-react 10.3.50 → 10.3.52

package/dist/commonjs/modal/lib/Modal.d.ts

@@ -162,7 +162,7 @@ export declare const Modal: import("@workday/canvas-kit-react/common").Component
     /**
      * The `Modal.Card` is wraps a {@link PopupCard Popup.Card} which wraps a {@link Card}. It is
      * the `role="dialog"` element and is uses `useModalCard` behavior hook which sets
-     * `aria-modal="true"` and sets the `aria-labelledby` that points to the `id` of the
+     * `aria-modal="false"` and sets the `aria-labelledby` that points to the `id` of the
      * {@link ModalHeading Modal.Heading}. If you don't use a `Modal.Heading`, add an `aria-label`
      * instead. The default element is a `div` and can be changed via the `as` prop.
      */

package/dist/commonjs/modal/lib/Modal.js

@@ -62,7 +62,7 @@ exports.Modal = common_1.createContainer()({
         /**
          * The `Modal.Card` is wraps a {@link PopupCard Popup.Card} which wraps a {@link Card}. It is
          * the `role="dialog"` element and is uses `useModalCard` behavior hook which sets
-         * `aria-modal="true"` and sets the `aria-labelledby` that points to the `id` of the
+         * `aria-modal="false"` and sets the `aria-labelledby` that points to the `id` of the
          * {@link ModalHeading Modal.Heading}. If you don't use a `Modal.Heading`, add an `aria-label`
          * instead. The default element is a `div` and can be changed via the `as` prop.
          */

package/dist/commonjs/modal/lib/hooks/useModalCard.d.ts

@@ -19,6 +19,13 @@ export declare const useModalCard: import("@workday/canvas-kit-react/common").Be
     role: string;
     'aria-labelledby': string;
 } & {
+    /**
+     * `aria-modal` was added with the intent that screen readers would add support to properly define content within a modal,
+     * including popups like a Select. However, when aria-modal is true, it will hide other elements from screen readers,
+     * including popups owned by the modal because these popups are siblings to the modal and not ancestors. There is no defined time when Apple/VoiceOver
+     * might change this behavior and better support aria-owns, so for the time being we'll explicitly set this to false to provide a better
+     * VoiceOver experience.
+     */
     'aria-modal': boolean;
 }>;
 //# sourceMappingURL=useModalCard.d.ts.map

package/dist/commonjs/modal/lib/hooks/useModalCard.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useModalCard.d.ts","sourceRoot":"","sources":["../../../../../modal/lib/hooks/useModalCard.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,YAAY;;;;;;;;;;;;;;;;;;;;;;EAOxB,CAAC"}
+{"version":3,"file":"useModalCard.d.ts","sourceRoot":"","sources":["../../../../../modal/lib/hooks/useModalCard.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,YAAY;;;;;;;;;;;;;;;;;;;;;IAInB;;;;;;OAMG;;EAIR,CAAC"}

package/dist/commonjs/modal/lib/hooks/useModalCard.js

@@ -5,6 +5,13 @@ const common_1 = require("@workday/canvas-kit-react/common");
 const popup_1 = require("@workday/canvas-kit-react/popup");
 exports.useModalCard = common_1.composeHooks(popup_1.usePopupCard, common_1.createElemPropsHook(popup_1.usePopupModel)(() => {
     return {
-        'aria-modal': true,
+        /**
+         * `aria-modal` was added with the intent that screen readers would add support to properly define content within a modal,
+         * including popups like a Select. However, when aria-modal is true, it will hide other elements from screen readers,
+         * including popups owned by the modal because these popups are siblings to the modal and not ancestors. There is no defined time when Apple/VoiceOver
+         * might change this behavior and better support aria-owns, so for the time being we'll explicitly set this to false to provide a better
+         * VoiceOver experience.
+         */
+        'aria-modal': false,
     };
 }));

package/dist/commonjs/select/lib/Select.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Select.d.ts","sourceRoot":"","sources":["../../../../select/lib/Select.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAEL,YAAY,EAEZ,SAAS,EAEV,MAAM,kCAAkC,CAAC;AAC1C,OAAO,EAAC,QAAQ,EAAC,MAAM,oCAAoC,CAAC;AAE5D,OAAO,EAAa,SAAS,EAAC,MAAM,sCAAsC,CAAC;AAO3E,OAAO,EAAC,gBAAgB,EAAC,MAAM,8BAA8B,CAAC;AAC9D,OAAO,EAAe,OAAO,EAAC,MAAM,6BAA6B,CAAC;AAElE,MAAM,WAAW,gBAAiB,SAAQ,YAAY,CAAC,OAAO,SAAS,CAAC,EAAE,OAAO;IAC/E;;;;OAIG;IACH,cAAc,CAAC,EAAE,gBAAgB,CAAC;CACnC;AAqBD,eAAO,MAAM,WAAW;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA6EvB,CAAC;AAEF,eAAO,MAAM,UAAU;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAWrB,CAAC;AAEH,eAAO,MAAM,UAAU;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EASrB,CAAC;AAEH,MAAM,WAAW,WAAY,SAAQ,SAAS,EAAE,YAAY,CAAC,OAAO,QAAQ,CAAC;CAAG;AAChF;;;;;;;;;;;;;;;;;;;GAmBG;AACH,eAAO,MAAM,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAIf;;;;;;;;;;;;OAYG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAEH;;;;;;;;;;;;;OAaG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAEH;;;;;;;;;;;;;;;;;OAiBG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAEH;;;;;;;;;;;;;;;;;OAiBG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAEH;;;;;;;;;;;;;;;;;OAiBG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CASL,CAAC"}
+{"version":3,"file":"Select.d.ts","sourceRoot":"","sources":["../../../../select/lib/Select.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAEL,YAAY,EAEZ,SAAS,EACV,MAAM,kCAAkC,CAAC;AAC1C,OAAO,EAAC,QAAQ,EAAC,MAAM,oCAAoC,CAAC;AAE5D,OAAO,EAAa,SAAS,EAAC,MAAM,sCAAsC,CAAC;AAO3E,OAAO,EAAC,gBAAgB,EAAC,MAAM,8BAA8B,CAAC;AAC9D,OAAO,EAAe,OAAO,EAAC,MAAM,6BAA6B,CAAC;AAElE,MAAM,WAAW,gBAAiB,SAAQ,YAAY,CAAC,OAAO,SAAS,CAAC,EAAE,OAAO;IAC/E;;;;OAIG;IACH,cAAc,CAAC,EAAE,gBAAgB,CAAC;CACnC;AAqBD,eAAO,MAAM,WAAW;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAwDvB,CAAC;AAEF,eAAO,MAAM,UAAU;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAWrB,CAAC;AAEH,eAAO,MAAM,UAAU;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EASrB,CAAC;AAEH,MAAM,WAAW,WAAY,SAAQ,SAAS,EAAE,YAAY,CAAC,OAAO,QAAQ,CAAC;CAAG;AAChF;;;;;;;;;;;;;;;;;;;GAmBG;AACH,eAAO,MAAM,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAIf;;;;;;;;;;;;OAYG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAEH;;;;;;;;;;;;;OAaG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAEH;;;;;;;;;;;;;;;;;OAiBG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAEH;;;;;;;;;;;;;;;;;OAiBG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAEH;;;;;;;;;;;;;;;;;OAiBG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CASL,CAAC"}

package/dist/commonjs/select/lib/Select.js

@@ -21,24 +21,10 @@ exports.SelectInput = common_1.createSubcomponent(text_input_1.TextInput)({
     modelHook: useSelectModel_1.useSelectModel,
     elemPropsHook: useSelectInput_1.useSelectInput,
 })(({ placeholder = 'Choose an option', inputStartIcon, error, textInputProps, disabled, ref, onChange, onInput, value, name, ...elemProps }, Element, model) => {
-    const { localRef, elementRef } = common_1.useLocalRef(ref);
-    // We need to create a proxy between the multiple inputs. We need to redirect a few methods to
-    // the visible input
-    react_1.default.useImperativeHandle(elementRef, () => {
-        if (localRef.current) {
-            localRef.current.focus = (options) => {
-                textInputProps.ref.current.focus(options);
-            };
-            localRef.current.blur = () => {
-                textInputProps.ref.current.blur();
-            };
-        }
-        return localRef.current;
-    }, [textInputProps.ref, localRef]);
     return (react_1.default.createElement(text_input_1.InputGroup, null,
         inputStartIcon && model.state.selectedIds.length > 0 && (react_1.default.createElement(text_input_1.InputGroup.InnerStart, { pointerEvents: "none" },
             react_1.default.createElement(icon_1.SystemIcon, { icon: inputStartIcon }))),
-        react_1.default.createElement(text_input_1.InputGroup.Input, { error: error, disabled: disabled, className: hiddenSelectStyles, tabIndex: -1, "aria-hidden": true, onChange: onChange, onInput: onInput, value: value, name: name, ref: elementRef }),
+        react_1.default.createElement(text_input_1.InputGroup.Input, { error: error, disabled: disabled, className: hiddenSelectStyles, tabIndex: -1, "aria-hidden": true, onChange: onChange, onInput: onInput, value: value, name: name, ref: ref }),
         react_1.default.createElement(text_input_1.InputGroup.Input, Object.assign({ as: Element, disabled: disabled, placeholder: placeholder, error: error }, textInputProps, layout_1.mergeStyles(elemProps, [selectInputStyles]))),
         react_1.default.createElement(text_input_1.InputGroup.InnerEnd, { position: "absolute", pointerEvents: "none" },
             react_1.default.createElement(icon_1.SystemIcon, { icon: canvas_system_icons_web_1.caretDownSmallIcon }))));

package/dist/commonjs/select/lib/hooks/useSelectInput.d.ts

@@ -111,11 +111,10 @@ export declare const useSelectInput: import("@workday/canvas-kit-react/common").
     readonly autoComplete: "off";
     readonly onFocus: () => void;
     readonly textInputProps: {
-        readonly ref: React.RefObject<HTMLInputElement>;
+        readonly ref: (instance: HTMLInputElement | null) => void;
         readonly onChange: typeof noop;
         readonly value: string;
     };
-    readonly ref: (instance: HTMLInputElement | null) => void;
     readonly 'aria-haspopup': "menu";
 }>;
 export {};

package/dist/commonjs/select/lib/hooks/useSelectInput.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useSelectInput.d.ts","sourceRoot":"","sources":["../../../../../select/lib/hooks/useSelectInput.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAgB1B,iBAAS,IAAI,SAEZ;AAED;;GAEG;AACH,eAAO,MAAM,cAAc;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;gCAgGF,mBAAmB;+BArFP,MAAM,WAAW,CAAC,gBAAgB,CAAC;;;;;;;;;;EAmIvE,CAAC"}
+{"version":3,"file":"useSelectInput.d.ts","sourceRoot":"","sources":["../../../../../select/lib/hooks/useSelectInput.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAgB1B,iBAAS,IAAI,SAEZ;AAED;;GAEG;AACH,eAAO,MAAM,cAAc;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;gCA0HF,mBAAmB;+BArFP,MAAM,WAAW,CAAC,gBAAgB,CAAC;;;;;;;;;EAkIvE,CAAC"}

package/dist/commonjs/select/lib/hooks/useSelectInput.js

@@ -15,8 +15,25 @@ function noop() {
  * `useSelectInput` extends {@link useComboboxInput useComboboxInput}  and {@link useComboboxKeyboardTypeAhead useComboboxKeyboardTypeAhead} and adds type ahead functionality and Select-specific [keyboard support](https://www.w3.org/WAI/ARIA/apg/patterns/combobox/examples/combobox-select-only/).
  */
 exports.useSelectInput = common_1.composeHooks(combobox_1.useComboboxInput, combobox_1.useComboboxKeyboardTypeAhead, combobox_1.useComboboxResetCursorToSelected, combobox_1.useComboboxMoveCursorToSelected, common_1.createElemPropsHook(useSelectModel_1.useSelectModel)((model, ref, elemProps = {}) => {
-    const { elementRef } = common_1.useLocalRef(ref);
-    const textInputRef = react_1.default.useRef(null);
+    // const textInputRef = React.useRef<HTMLInputElement>(null);
+    const { elementRef: textInputElementRef, localRef: textInputRef } = common_1.useLocalRef(
+    // PopupModel says the targetRef is a `HTMLButtonElement`, but it is a `HTMLInputElement`
+    model.state.targetRef);
+    const { localRef, elementRef } = common_1.useLocalRef(ref);
+    // We need to create a proxy between the multiple inputs. We need to redirect a few methods to
+    // the visible input
+    react_1.default.useImperativeHandle(elementRef, () => {
+        if (localRef.current) {
+            localRef.current.focus = (options) => {
+                textInputRef.current.focus(options);
+            };
+            localRef.current.blur = () => {
+                textInputRef.current.blur();
+            };
+        }
+        return localRef.current;
+    }, [textInputRef, localRef]);
+    // Remap the Popup model's targetRef to be the visible ref. `ref` and `model.state.targetRef` are already linked. We have to override that.
     // Update the text value of the input
     const handleOnChange = (event) => {
         var _a;
@@ -117,13 +134,12 @@ exports.useSelectInput = common_1.composeHooks(combobox_1.useComboboxInput, comb
             (_a = textInputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
         },
         textInputProps: {
-            ref: textInputRef,
+            ref: textInputElementRef,
             onChange: noop,
             value: model.state.selectedIds.length > 0 && model.state.items.length > 0
                 ? model.navigation.getItem(model.state.selectedIds[0], model).textValue
                 : '',
         },
-        ref: elementRef,
         'aria-haspopup': 'menu',
     };
 }));

package/dist/es6/modal/lib/Modal.d.ts

@@ -162,7 +162,7 @@ export declare const Modal: import("@workday/canvas-kit-react/common").Component
     /**
      * The `Modal.Card` is wraps a {@link PopupCard Popup.Card} which wraps a {@link Card}. It is
      * the `role="dialog"` element and is uses `useModalCard` behavior hook which sets
-     * `aria-modal="true"` and sets the `aria-labelledby` that points to the `id` of the
+     * `aria-modal="false"` and sets the `aria-labelledby` that points to the `id` of the
      * {@link ModalHeading Modal.Heading}. If you don't use a `Modal.Heading`, add an `aria-label`
      * instead. The default element is a `div` and can be changed via the `as` prop.
      */

package/dist/es6/modal/lib/Modal.js

@@ -40,7 +40,7 @@ export const Modal = createContainer()({
         /**
          * The `Modal.Card` is wraps a {@link PopupCard Popup.Card} which wraps a {@link Card}. It is
          * the `role="dialog"` element and is uses `useModalCard` behavior hook which sets
-         * `aria-modal="true"` and sets the `aria-labelledby` that points to the `id` of the
+         * `aria-modal="false"` and sets the `aria-labelledby` that points to the `id` of the
          * {@link ModalHeading Modal.Heading}. If you don't use a `Modal.Heading`, add an `aria-label`
          * instead. The default element is a `div` and can be changed via the `as` prop.
          */

package/dist/es6/modal/lib/hooks/useModalCard.d.ts

@@ -19,6 +19,13 @@ export declare const useModalCard: import("@workday/canvas-kit-react/common").Be
     role: string;
     'aria-labelledby': string;
 } & {
+    /**
+     * `aria-modal` was added with the intent that screen readers would add support to properly define content within a modal,
+     * including popups like a Select. However, when aria-modal is true, it will hide other elements from screen readers,
+     * including popups owned by the modal because these popups are siblings to the modal and not ancestors. There is no defined time when Apple/VoiceOver
+     * might change this behavior and better support aria-owns, so for the time being we'll explicitly set this to false to provide a better
+     * VoiceOver experience.
+     */
     'aria-modal': boolean;
 }>;
 //# sourceMappingURL=useModalCard.d.ts.map

package/dist/es6/modal/lib/hooks/useModalCard.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useModalCard.d.ts","sourceRoot":"","sources":["../../../../../modal/lib/hooks/useModalCard.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,YAAY;;;;;;;;;;;;;;;;;;;;;;EAOxB,CAAC"}
+{"version":3,"file":"useModalCard.d.ts","sourceRoot":"","sources":["../../../../../modal/lib/hooks/useModalCard.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,YAAY;;;;;;;;;;;;;;;;;;;;;IAInB;;;;;;OAMG;;EAIR,CAAC"}

package/dist/es6/modal/lib/hooks/useModalCard.js

@@ -2,6 +2,13 @@ import { composeHooks, createElemPropsHook } from '@workday/canvas-kit-react/com
 import { usePopupCard, usePopupModel } from '@workday/canvas-kit-react/popup';
 export const useModalCard = composeHooks(usePopupCard, createElemPropsHook(usePopupModel)(() => {
     return {
-        'aria-modal': true,
+        /**
+         * `aria-modal` was added with the intent that screen readers would add support to properly define content within a modal,
+         * including popups like a Select. However, when aria-modal is true, it will hide other elements from screen readers,
+         * including popups owned by the modal because these popups are siblings to the modal and not ancestors. There is no defined time when Apple/VoiceOver
+         * might change this behavior and better support aria-owns, so for the time being we'll explicitly set this to false to provide a better
+         * VoiceOver experience.
+         */
+        'aria-modal': false,
     };
 }));

package/dist/es6/select/lib/Select.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Select.d.ts","sourceRoot":"","sources":["../../../../select/lib/Select.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAEL,YAAY,EAEZ,SAAS,EAEV,MAAM,kCAAkC,CAAC;AAC1C,OAAO,EAAC,QAAQ,EAAC,MAAM,oCAAoC,CAAC;AAE5D,OAAO,EAAa,SAAS,EAAC,MAAM,sCAAsC,CAAC;AAO3E,OAAO,EAAC,gBAAgB,EAAC,MAAM,8BAA8B,CAAC;AAC9D,OAAO,EAAe,OAAO,EAAC,MAAM,6BAA6B,CAAC;AAElE,MAAM,WAAW,gBAAiB,SAAQ,YAAY,CAAC,OAAO,SAAS,CAAC,EAAE,OAAO;IAC/E;;;;OAIG;IACH,cAAc,CAAC,EAAE,gBAAgB,CAAC;CACnC;AAqBD,eAAO,MAAM,WAAW;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA6EvB,CAAC;AAEF,eAAO,MAAM,UAAU;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAWrB,CAAC;AAEH,eAAO,MAAM,UAAU;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EASrB,CAAC;AAEH,MAAM,WAAW,WAAY,SAAQ,SAAS,EAAE,YAAY,CAAC,OAAO,QAAQ,CAAC;CAAG;AAChF;;;;;;;;;;;;;;;;;;;GAmBG;AACH,eAAO,MAAM,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAIf;;;;;;;;;;;;OAYG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAEH;;;;;;;;;;;;;OAaG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAEH;;;;;;;;;;;;;;;;;OAiBG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAEH;;;;;;;;;;;;;;;;;OAiBG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAEH;;;;;;;;;;;;;;;;;OAiBG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CASL,CAAC"}
+{"version":3,"file":"Select.d.ts","sourceRoot":"","sources":["../../../../select/lib/Select.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAEL,YAAY,EAEZ,SAAS,EACV,MAAM,kCAAkC,CAAC;AAC1C,OAAO,EAAC,QAAQ,EAAC,MAAM,oCAAoC,CAAC;AAE5D,OAAO,EAAa,SAAS,EAAC,MAAM,sCAAsC,CAAC;AAO3E,OAAO,EAAC,gBAAgB,EAAC,MAAM,8BAA8B,CAAC;AAC9D,OAAO,EAAe,OAAO,EAAC,MAAM,6BAA6B,CAAC;AAElE,MAAM,WAAW,gBAAiB,SAAQ,YAAY,CAAC,OAAO,SAAS,CAAC,EAAE,OAAO;IAC/E;;;;OAIG;IACH,cAAc,CAAC,EAAE,gBAAgB,CAAC;CACnC;AAqBD,eAAO,MAAM,WAAW;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAwDvB,CAAC;AAEF,eAAO,MAAM,UAAU;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAWrB,CAAC;AAEH,eAAO,MAAM,UAAU;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EASrB,CAAC;AAEH,MAAM,WAAW,WAAY,SAAQ,SAAS,EAAE,YAAY,CAAC,OAAO,QAAQ,CAAC;CAAG;AAChF;;;;;;;;;;;;;;;;;;;GAmBG;AACH,eAAO,MAAM,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAIf;;;;;;;;;;;;OAYG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAEH;;;;;;;;;;;;;OAaG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAEH;;;;;;;;;;;;;;;;;OAiBG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAEH;;;;;;;;;;;;;;;;;OAiBG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAEH;;;;;;;;;;;;;;;;;OAiBG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CASL,CAAC"}

package/dist/es6/select/lib/Select.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { createSubcomponent, createContainer, useLocalRef, } from '@workday/canvas-kit-react/common';
+import { createSubcomponent, createContainer, } from '@workday/canvas-kit-react/common';
 import { Combobox } from '@workday/canvas-kit-react/combobox';
 import { InputGroup, TextInput } from '@workday/canvas-kit-react/text-input';
 import { mergeStyles } from '@workday/canvas-kit-react/layout';
@@ -15,24 +15,10 @@ export const SelectInput = createSubcomponent(TextInput)({
     modelHook: useSelectModel,
     elemPropsHook: useSelectInput,
 })(({ placeholder = 'Choose an option', inputStartIcon, error, textInputProps, disabled, ref, onChange, onInput, value, name, ...elemProps }, Element, model) => {
-    const { localRef, elementRef } = useLocalRef(ref);
-    // We need to create a proxy between the multiple inputs. We need to redirect a few methods to
-    // the visible input
-    React.useImperativeHandle(elementRef, () => {
-        if (localRef.current) {
-            localRef.current.focus = (options) => {
-                textInputProps.ref.current.focus(options);
-            };
-            localRef.current.blur = () => {
-                textInputProps.ref.current.blur();
-            };
-        }
-        return localRef.current;
-    }, [textInputProps.ref, localRef]);
     return (React.createElement(InputGroup, null,
         inputStartIcon && model.state.selectedIds.length > 0 && (React.createElement(InputGroup.InnerStart, { pointerEvents: "none" },
             React.createElement(SystemIcon, { icon: inputStartIcon }))),
-        React.createElement(InputGroup.Input, { error: error, disabled: disabled, className: hiddenSelectStyles, tabIndex: -1, "aria-hidden": true, onChange: onChange, onInput: onInput, value: value, name: name, ref: elementRef }),
+        React.createElement(InputGroup.Input, { error: error, disabled: disabled, className: hiddenSelectStyles, tabIndex: -1, "aria-hidden": true, onChange: onChange, onInput: onInput, value: value, name: name, ref: ref }),
         React.createElement(InputGroup.Input, Object.assign({ as: Element, disabled: disabled, placeholder: placeholder, error: error }, textInputProps, mergeStyles(elemProps, [selectInputStyles]))),
         React.createElement(InputGroup.InnerEnd, { position: "absolute", pointerEvents: "none" },
             React.createElement(SystemIcon, { icon: caretDownSmallIcon }))));

package/dist/es6/select/lib/hooks/useSelectInput.d.ts

@@ -111,11 +111,10 @@ export declare const useSelectInput: import("@workday/canvas-kit-react/common").
     readonly autoComplete: "off";
     readonly onFocus: () => void;
     readonly textInputProps: {
-        readonly ref: React.RefObject<HTMLInputElement>;
+        readonly ref: (instance: HTMLInputElement | null) => void;
         readonly onChange: typeof noop;
         readonly value: string;
     };
-    readonly ref: (instance: HTMLInputElement | null) => void;
     readonly 'aria-haspopup': "menu";
 }>;
 export {};

package/dist/es6/select/lib/hooks/useSelectInput.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useSelectInput.d.ts","sourceRoot":"","sources":["../../../../../select/lib/hooks/useSelectInput.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAgB1B,iBAAS,IAAI,SAEZ;AAED;;GAEG;AACH,eAAO,MAAM,cAAc;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;gCAgGF,mBAAmB;+BArFP,MAAM,WAAW,CAAC,gBAAgB,CAAC;;;;;;;;;;EAmIvE,CAAC"}
+{"version":3,"file":"useSelectInput.d.ts","sourceRoot":"","sources":["../../../../../select/lib/hooks/useSelectInput.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAgB1B,iBAAS,IAAI,SAEZ;AAED;;GAEG;AACH,eAAO,MAAM,cAAc;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;gCA0HF,mBAAmB;+BArFP,MAAM,WAAW,CAAC,gBAAgB,CAAC;;;;;;;;;EAkIvE,CAAC"}

package/dist/es6/select/lib/hooks/useSelectInput.js

@@ -9,8 +9,25 @@ function noop() {
  * `useSelectInput` extends {@link useComboboxInput useComboboxInput}  and {@link useComboboxKeyboardTypeAhead useComboboxKeyboardTypeAhead} and adds type ahead functionality and Select-specific [keyboard support](https://www.w3.org/WAI/ARIA/apg/patterns/combobox/examples/combobox-select-only/).
  */
 export const useSelectInput = composeHooks(useComboboxInput, useComboboxKeyboardTypeAhead, useComboboxResetCursorToSelected, useComboboxMoveCursorToSelected, createElemPropsHook(useSelectModel)((model, ref, elemProps = {}) => {
-    const { elementRef } = useLocalRef(ref);
-    const textInputRef = React.useRef(null);
+    // const textInputRef = React.useRef<HTMLInputElement>(null);
+    const { elementRef: textInputElementRef, localRef: textInputRef } = useLocalRef(
+    // PopupModel says the targetRef is a `HTMLButtonElement`, but it is a `HTMLInputElement`
+    model.state.targetRef);
+    const { localRef, elementRef } = useLocalRef(ref);
+    // We need to create a proxy between the multiple inputs. We need to redirect a few methods to
+    // the visible input
+    React.useImperativeHandle(elementRef, () => {
+        if (localRef.current) {
+            localRef.current.focus = (options) => {
+                textInputRef.current.focus(options);
+            };
+            localRef.current.blur = () => {
+                textInputRef.current.blur();
+            };
+        }
+        return localRef.current;
+    }, [textInputRef, localRef]);
+    // Remap the Popup model's targetRef to be the visible ref. `ref` and `model.state.targetRef` are already linked. We have to override that.
     // Update the text value of the input
     const handleOnChange = (event) => {
         var _a;
@@ -111,13 +128,12 @@ export const useSelectInput = composeHooks(useComboboxInput, useComboboxKeyboard
             (_a = textInputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
         },
         textInputProps: {
-            ref: textInputRef,
+            ref: textInputElementRef,
             onChange: noop,
             value: model.state.selectedIds.length > 0 && model.state.items.length > 0
                 ? model.navigation.getItem(model.state.selectedIds[0], model).textValue
                 : '',
         },
-        ref: elementRef,
         'aria-haspopup': 'menu',
     };
 }));

package/modal/lib/Modal.tsx

@@ -42,7 +42,7 @@ export const Modal = createContainer()({
     /**
      * The `Modal.Card` is wraps a {@link PopupCard Popup.Card} which wraps a {@link Card}. It is
      * the `role="dialog"` element and is uses `useModalCard` behavior hook which sets
-     * `aria-modal="true"` and sets the `aria-labelledby` that points to the `id` of the
+     * `aria-modal="false"` and sets the `aria-labelledby` that points to the `id` of the
      * {@link ModalHeading Modal.Heading}. If you don't use a `Modal.Heading`, add an `aria-label`
      * instead. The default element is a `div` and can be changed via the `as` prop.
      */

package/modal/lib/hooks/useModalCard.ts

@@ -5,7 +5,14 @@ export const useModalCard = composeHooks(
   usePopupCard,
   createElemPropsHook(usePopupModel)(() => {
     return {
-      'aria-modal': true,
+      /**
+       * `aria-modal` was added with the intent that screen readers would add support to properly define content within a modal,
+       * including popups like a Select. However, when aria-modal is true, it will hide other elements from screen readers,
+       * including popups owned by the modal because these popups are siblings to the modal and not ancestors. There is no defined time when Apple/VoiceOver
+       * might change this behavior and better support aria-owns, so for the time being we'll explicitly set this to false to provide a better
+       * VoiceOver experience.
+       */
+      'aria-modal': false,
     };
   })
 );

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@workday/canvas-kit-react",
-  "version": "10.3.50",
+  "version": "10.3.52",
   "description": "The parent module that contains all Workday Canvas Kit React components",
   "author": "Workday, Inc. (https://www.workday.com)",
   "license": "Apache-2.0",
@@ -49,8 +49,8 @@
     "@emotion/styled": "^11.6.0",
     "@popperjs/core": "^2.5.4",
     "@workday/canvas-colors-web": "^2.0.0",
-    "@workday/canvas-kit-popup-stack": "^10.3.50",
-    "@workday/canvas-kit-styling": "^10.3.50",
+    "@workday/canvas-kit-popup-stack": "^10.3.52",
+    "@workday/canvas-kit-styling": "^10.3.52",
     "@workday/canvas-system-icons-web": "^3.0.0",
     "@workday/canvas-tokens-web": "^1.0.0",
     "@workday/design-assets-types": "^0.2.8",
@@ -68,5 +68,5 @@
     "@workday/canvas-accent-icons-web": "^3.0.0",
     "@workday/canvas-applet-icons-web": "^2.0.0"
   },
-  "gitHead": "419f977a18c6952dca36a9490b4eb2c3de9d1309"
+  "gitHead": "3dbd98287262af9e8a614dcc1942652ead4cb2b5"
 }

package/select/lib/Select.tsx

@@ -4,7 +4,6 @@ import {
   ExtractProps,
   createContainer,
   Themeable,
-  useLocalRef,
 } from '@workday/canvas-kit-react/common';
 import {Combobox} from '@workday/canvas-kit-react/combobox';
 
@@ -67,27 +66,6 @@ export const SelectInput = createSubcomponent(TextInput)({
     Element,
     model
   ) => {
-    const {localRef, elementRef} = useLocalRef(ref);
-
-    // We need to create a proxy between the multiple inputs. We need to redirect a few methods to
-    // the visible input
-    React.useImperativeHandle(
-      elementRef,
-      () => {
-        if (localRef.current) {
-          localRef.current.focus = (options?: FocusOptions) => {
-            textInputProps.ref.current!.focus(options);
-          };
-          localRef.current.blur = () => {
-            textInputProps.ref.current!.blur();
-          };
-        }
-
-        return localRef.current!;
-      },
-      [textInputProps.ref, localRef]
-    );
-
     return (
       <InputGroup>
         {inputStartIcon && model.state.selectedIds.length > 0 && (
@@ -106,7 +84,7 @@ export const SelectInput = createSubcomponent(TextInput)({
           onInput={onInput}
           value={value}
           name={name}
-          ref={elementRef}
+          ref={ref}
         />
         {/* Visual input */}
         <InputGroup.Input

package/select/lib/hooks/useSelectInput.ts

@@ -28,8 +28,34 @@ export const useSelectInput = composeHooks(
   useComboboxMoveCursorToSelected,
   createElemPropsHook(useSelectModel)(
     (model, ref, elemProps: {keySofar?: string; placeholder?: string; value?: string} = {}) => {
-      const {elementRef} = useLocalRef<HTMLInputElement>(ref as any);
-      const textInputRef = React.useRef<HTMLInputElement>(null);
+      // const textInputRef = React.useRef<HTMLInputElement>(null);
+      const {elementRef: textInputElementRef, localRef: textInputRef} = useLocalRef(
+        // PopupModel says the targetRef is a `HTMLButtonElement`, but it is a `HTMLInputElement`
+        model.state.targetRef as any as React.Ref<HTMLInputElement>
+      );
+
+      const {localRef, elementRef} = useLocalRef(ref as React.Ref<HTMLInputElement>);
+
+      // We need to create a proxy between the multiple inputs. We need to redirect a few methods to
+      // the visible input
+      React.useImperativeHandle(
+        elementRef,
+        () => {
+          if (localRef.current) {
+            localRef.current.focus = (options?: FocusOptions) => {
+              textInputRef.current!.focus(options);
+            };
+            localRef.current.blur = () => {
+              textInputRef.current!.blur();
+            };
+          }
+
+          return localRef.current!;
+        },
+        [textInputRef, localRef]
+      );
+
+      // Remap the Popup model's targetRef to be the visible ref. `ref` and `model.state.targetRef` are already linked. We have to override that.
 
       // Update the text value of the input
       const handleOnChange = (event: React.ChangeEvent<HTMLInputElement>) => {
@@ -151,14 +177,13 @@ export const useSelectInput = composeHooks(
           textInputRef.current?.focus();
         },
         textInputProps: {
-          ref: textInputRef,
+          ref: textInputElementRef,
           onChange: noop,
           value:
             model.state.selectedIds.length > 0 && model.state.items.length > 0
               ? model.navigation.getItem(model.state.selectedIds[0], model).textValue
               : '',
         },
-        ref: elementRef,
         'aria-haspopup': 'menu',
       } as const;
     }