@workday/canvas-kit-react 11.0.25 → 11.0.27

package/checkbox/lib/CheckboxInput.tsx

@@ -223,8 +223,8 @@ const checkboxInputStencil = createStencil({
 
 export const CheckboxInput = createComponent('input')({
   displayName: 'CheckboxInput',
-  Component: ({variant, error, ...elemProps}: CheckboxProps, ref, Element) => {
-    const {checked, disabled, indeterminate} = elemProps;
+  Component: ({variant, error, indeterminate, ...elemProps}: CheckboxProps, ref, Element) => {
+    const {checked, disabled} = elemProps;
 
     return (
       <Element

package/dist/commonjs/checkbox/lib/CheckboxInput.js

@@ -47,8 +47,8 @@ const checkboxInputStencil = canvas_kit_styling_1.createStencil({
 }, "checkbox-input-d394e3");
 exports.CheckboxInput = common_1.createComponent('input')({
     displayName: 'CheckboxInput',
-    Component: ({ variant, error, ...elemProps }, ref, Element) => {
-        const { checked, disabled, indeterminate } = elemProps;
+    Component: ({ variant, error, indeterminate, ...elemProps }, ref, Element) => {
+        const { checked, disabled } = elemProps;
         return (React.createElement(Element, Object.assign({ type: "checkbox", ref: ref, "aria-checked": indeterminate ? 'mixed' : checked }, canvas_kit_styling_1.handleCsProp(elemProps, checkboxInputStencil({ variant, disabled, error: !!error })))));
     },
 });

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/es6/checkbox/lib/CheckboxInput.js

@@ -25,8 +25,8 @@ const checkboxInputStencil = createStencil({
 }, "checkbox-input-d394e3");
 export const CheckboxInput = createComponent('input')({
     displayName: 'CheckboxInput',
-    Component: ({ variant, error, ...elemProps }, ref, Element) => {
-        const { checked, disabled, indeterminate } = elemProps;
+    Component: ({ variant, error, indeterminate, ...elemProps }, ref, Element) => {
+        const { checked, disabled } = elemProps;
         return (React.createElement(Element, Object.assign({ type: "checkbox", ref: ref, "aria-checked": indeterminate ? 'mixed' : checked }, handleCsProp(elemProps, checkboxInputStencil({ variant, disabled, error: !!error })))));
     },
 });

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/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": "11.0.25",
+  "version": "11.0.27",
   "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": "^11.0.25",
-    "@workday/canvas-kit-styling": "^11.0.25",
+    "@workday/canvas-kit-popup-stack": "^11.0.27",
+    "@workday/canvas-kit-styling": "^11.0.27",
     "@workday/canvas-system-icons-web": "^3.0.0",
     "@workday/canvas-tokens-web": "^2.0.0",
     "@workday/design-assets-types": "^0.2.8",
@@ -67,5 +67,5 @@
     "@workday/canvas-accent-icons-web": "^3.0.0",
     "@workday/canvas-applet-icons-web": "^2.0.0"
   },
-  "gitHead": "0da8599052bbf06aaa1f2c881f38589d022eb515"
+  "gitHead": "5b915c6804168b8a875d07adf64cf61c719b0f10"
 }