@procore/core-react 12.53.3 → 12.53.4

package/CHANGELOG.md

@@ -1,5 +1,14 @@
 # Change Log
 
+## 12.53.4
+
+### Patch Changes
+
+- a51cf67: Prevent Tearsheet from becoming stuck closed when the `open` prop changes rapidly during animations.
+- be0ada1: Fix insufficient focus indicator contrast on `DateInput`/`DateSelect` date segments (WCAG 2.1 SC 1.4.11). The focused `mm`/`dd`/`yyyy` segment previously used a very light `blue96` background (~1.12:1 against the field background). It now uses `blue40` with white text, meeting the 3:1 minimum contrast ratio.
+- f781141: Fixed an accessibility issue in Section where collapsible sections could not be expanded or collapsed with Enter or Space when using NVDA (Windows).
+- 22e1882: Fixed an accessibility issue where required selects gave screen-reader users no signal that the field was mandatory (WCAG 3.3.2, 4.1.2). `SuperSelect` now accepts a `required` prop that sets `aria-required` on the element carrying `role="combobox"`, and `Form.Select`, `Form.MultiSelect`, `Form.GroupSelect`, `Form.TieredSelect` and `Form.PillSelect` now forward the field's required state to their combobox. `MultiSelect` also accepts `aria-required` directly.
+
 ## 12.53.3
 
 ### Patch Changes

package/dist/AnchorNavigation/AnchorNavigation.styles.js

@@ -5,15 +5,15 @@ import { getEllipsis } from '../_styles/mixins';
 import { spacing } from '../_styles/spacing';
 export var StyledAnchorNavigationLandmark = /*#__PURE__*/styled.nav.withConfig({
   displayName: "StyledAnchorNavigationLandmark",
-  componentId: "core-12_53_3__sc-aacdj4-0"
+  componentId: "core-12_53_4__sc-aacdj4-0"
 })([""]);
 export var StyledAnchorNavigation = /*#__PURE__*/styled.ul.withConfig({
   displayName: "StyledAnchorNavigation",
-  componentId: "core-12_53_3__sc-aacdj4-1"
+  componentId: "core-12_53_4__sc-aacdj4-1"
 })(["max-width:200px;margin:0;padding-inline-start:0;"]);
 export var StyledAnchorSection = /*#__PURE__*/styled.li.withConfig({
   displayName: "StyledAnchorSection",
-  componentId: "core-12_53_3__sc-aacdj4-2"
+  componentId: "core-12_53_4__sc-aacdj4-2"
 })(["display:flex;cursor:pointer;border-left:", "px solid ", ";background-color:", ";border-top-right-radius:4px;border-bottom-right-radius:4px;:hover{border-left:", "px solid ", ";background-color:", ";}"], spacing.xs, function (_ref) {
   var $selected = _ref.$selected;
   return $selected ? colors.gray15 : colors.gray90;
@@ -26,7 +26,7 @@ export var StyledAnchorSection = /*#__PURE__*/styled.li.withConfig({
 }, colors.gray90);
 export var StyledAnchor = /*#__PURE__*/styled.a.withConfig({
   displayName: "StyledAnchor",
-  componentId: "core-12_53_3__sc-aacdj4-3"
+  componentId: "core-12_53_4__sc-aacdj4-3"
 })(["box-sizing:border-box;display:block;flex:1;min-width:0;width:100%;padding:6px ", "px;color:inherit;text-decoration:none;&:visited{color:inherit;}", " ", ";", " :focus-visible{box-shadow:inset 0 0 0 2px ", ";outline:none;}"], spacing.sm, getTypographyIntent('body'), function (_ref4) {
   var $selected = _ref4.$selected;
   return $selected ? css(["font-weight:600;"]) : '';

package/dist/Avatar/Avatar.styles.js

@@ -28,26 +28,26 @@ var iconSize = {
 };
 export var StyledAvatarOverlay = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledAvatarOverlay",
-  componentId: "core-12_53_3__sc-7q2ydl-0"
+  componentId: "core-12_53_4__sc-7q2ydl-0"
 })(["width:100%;height:100%;position:absolute;top:0;left:0;border-radius:100%;opacity:0;"]);
 export var StyledIconContainer = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledIconContainer",
-  componentId: "core-12_53_3__sc-7q2ydl-1"
+  componentId: "core-12_53_4__sc-7q2ydl-1"
 })(["display:inline-flex;"]);
 export var StyledLabelContainer = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledLabelContainer",
-  componentId: "core-12_53_3__sc-7q2ydl-2"
+  componentId: "core-12_53_4__sc-7q2ydl-2"
 })(["text-transform:uppercase;"]);
 export var StyledPortraitContainer = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledPortraitContainer",
-  componentId: "core-12_53_3__sc-7q2ydl-3"
+  componentId: "core-12_53_4__sc-7q2ydl-3"
 })(["background-color:", ";background-position:center;background-repeat:no-repeat;background-size:cover;height:100%;width:100%;", ""], colors.white, function (_ref) {
   var $imageUrl = _ref.$imageUrl;
   return css(["background-image:url(", ");"], $imageUrl);
 });
 export var StyledAvatarContainer = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledAvatarContainer",
-  componentId: "core-12_53_3__sc-7q2ydl-4"
+  componentId: "core-12_53_4__sc-7q2ydl-4"
 })(["display:inline-flex;justify-content:center;align-items:center;border-radius:100%;overflow:hidden;position:relative;cursor:default;color:", ";background-color:", ";text-decoration:none;a:has(> &){text-decoration:none;}&:focus{", "}a:focus:has(> &){", " border-radius:100%;}", " ", ";"], colors.white, colors.gray30, getGapOutlineFocus('outside'), getGapOutlineFocus('outside'), function (_ref2) {
   var _ref2$$size = _ref2.$size,
     $size = _ref2$$size === void 0 ? 'md' : _ref2$$size;

package/dist/AvatarStack/AvatarStack.styles.js

@@ -8,36 +8,36 @@ import { spacing } from '../_styles/spacing';
 var maxModalWidth = 528;
 var StyledBaseAvatar = /*#__PURE__*/styled(Avatar).withConfig({
   displayName: "StyledBaseAvatar",
-  componentId: "core-12_53_3__sc-ft72hu-0"
+  componentId: "core-12_53_4__sc-ft72hu-0"
 })(["border-color:", ";border-style:solid;border-width:1px;&:hover{z-index:1;}"], colors.white);
 export var StyledAvatar = /*#__PURE__*/styled(StyledBaseAvatar).withConfig({
   displayName: "StyledAvatar",
-  componentId: "core-12_53_3__sc-ft72hu-1"
+  componentId: "core-12_53_4__sc-ft72hu-1"
 })(["background-color:", ";"], function (props) {
   return colors[props.$color];
 });
 export var StyledFoldedPopoverContent = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledFoldedPopoverContent",
-  componentId: "core-12_53_3__sc-ft72hu-2"
+  componentId: "core-12_53_4__sc-ft72hu-2"
 })(["display:flex;flex-direction:column;max-height:var(", ",100vh);"], OVERLAY_AVAILABLE_HEIGHT_VAR);
 export var StyledContactItems = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledContactItems",
-  componentId: "core-12_53_3__sc-ft72hu-3"
+  componentId: "core-12_53_4__sc-ft72hu-3"
 })(["padding-top:", "px;padding-left:", "px;flex:1 1 auto;min-height:0;overflow-y:auto;"], spacing.sm, spacing.xs);
 export var StyledWrapper = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledWrapper",
-  componentId: "core-12_53_3__sc-ft72hu-4"
+  componentId: "core-12_53_4__sc-ft72hu-4"
 })(["display:flex;", " + ", "{margin-left:-", "px;}"], StyledAvatar, StyledAvatar, spacing.sm);
 export var StyledViewAllWrapper = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledViewAllWrapper",
-  componentId: "core-12_53_3__sc-ft72hu-5"
+  componentId: "core-12_53_4__sc-ft72hu-5"
 })(["display:flex;margin-left:", "px;margin-top:", "px;margin-bottom:", "px;"], spacing.md, spacing.md, spacing.md);
 export var StyledModalBody = /*#__PURE__*/styled(Modal.Body).withConfig({
   displayName: "StyledModalBody",
-  componentId: "core-12_53_3__sc-ft72hu-6"
+  componentId: "core-12_53_4__sc-ft72hu-6"
 })(["max-width:", "px;"], maxModalWidth);
 export var StyledContactItem = /*#__PURE__*/styled(ContactItem).withConfig({
   displayName: "StyledContactItem",
-  componentId: "core-12_53_3__sc-ft72hu-7"
+  componentId: "core-12_53_4__sc-ft72hu-7"
 })(["flex-shrink:0;"]);
 //# sourceMappingURL=AvatarStack.styles.js.map

package/dist/Badge/Badge.styles.js

@@ -1,10 +1,10 @@
 import styled from 'styled-components';
 export var StyledBadge = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledBadge",
-  componentId: "core-12_53_3__sc-rpertu-0"
+  componentId: "core-12_53_4__sc-rpertu-0"
 })(["display:inline-block;position:relative;"]);
 export var StyledBadgeLabel = /*#__PURE__*/styled.span.withConfig({
   displayName: "StyledBadgeLabel",
-  componentId: "core-12_53_3__sc-rpertu-1"
+  componentId: "core-12_53_4__sc-rpertu-1"
 })(["bottom:100%;position:absolute;right:0;transform:translateX(50%) translateY(50%);"]);
 //# sourceMappingURL=Badge.styles.js.map

package/dist/BadgePill/BadgePill.styles.js

@@ -3,11 +3,11 @@ import { getTypographyIntent } from '../Typography';
 import { colors } from '../_styles/colors';
 export var StyledBadgeContainer = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledBadgeContainer",
-  componentId: "core-12_53_3__sc-s2n9gd-0"
+  componentId: "core-12_53_4__sc-s2n9gd-0"
 })(["display:inline-flex;position:relative;"]);
 export var StyledBadgeContent = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledBadgeContent",
-  componentId: "core-12_53_3__sc-s2n9gd-1"
+  componentId: "core-12_53_4__sc-s2n9gd-1"
 })(["position:relative;", " ", " pointer-events:none;user-select:none;"], function (_ref) {
   var $overlapping = _ref.$overlapping,
     _ref$$xOffset = _ref.$xOffset,
@@ -20,13 +20,13 @@ export var StyledBadgeContent = /*#__PURE__*/styled.div.withConfig({
 });
 export var StyledBadgeDotIndicator = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledBadgeDotIndicator",
-  componentId: "core-12_53_3__sc-s2n9gd-2"
+  componentId: "core-12_53_4__sc-s2n9gd-2"
 })(["width:6px;height:6px;border-radius:50%;background-color:", ";"], colors.orange50);
 var oneDigitStyles = "\n  border-radius: 50%;\n  padding: 2px;\n  min-width: 21.5px;\n  min-height: 21.5px;\n";
 var multiDigitStyles = "\n  border-radius: 10px;\n  padding: 2px 8px;\n";
 export var StyledBadgeCounter = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledBadgeCounter",
-  componentId: "core-12_53_3__sc-s2n9gd-3"
+  componentId: "core-12_53_4__sc-s2n9gd-3"
 })(["display:inline-flex;justify-content:center;align-items:center;color:", ";background-color:", ";", " ", ""], colors.white, colors.orange50, getTypographyIntent('small'), function (props) {
   return props.$oneDigit ? oneDigitStyles : multiDigitStyles;
 });

package/dist/Banner/Banner.styles.js

@@ -39,7 +39,7 @@ var expandContent = function expandContent(maxHeight) {
 };
 export var StyledBannerContainer = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledBannerContainer",
-  componentId: "core-12_53_3__sc-149wm7c-0"
+  componentId: "core-12_53_4__sc-149wm7c-0"
 })(["align-items:center;border-left:", "px solid;border-radius:", "px;color:", ";display:flex;justify-content:space-between;min-height:52px;padding:0 ", "px;", " ", " ", ""], bannerLeft, borderRadius.md, colors.gray15, spacing.lg, bannerShadow, function (_ref) {
   var $variant = _ref.$variant;
   var _bannerVariantColors$ = bannerVariantColors[$variant],
@@ -52,15 +52,15 @@ export var StyledBannerContainer = /*#__PURE__*/styled.div.withConfig({
 });
 export var StyledContent = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledContent",
-  componentId: "core-12_53_3__sc-149wm7c-1"
+  componentId: "core-12_53_4__sc-149wm7c-1"
 })(["align-self:center;margin:", "px ", "px ", "px 0;width:100%;"], spacing.sm, spacing.lg, spacing.sm);
 export var StyledExpandableContentContainer = /*#__PURE__*/styled(Flex).withConfig({
   displayName: "StyledExpandableContentContainer",
-  componentId: "core-12_53_3__sc-149wm7c-2"
+  componentId: "core-12_53_4__sc-149wm7c-2"
 })(["color:", ";min-height:52px;padding:0 ", "px;position:relative;z-index:1;", ""], colors.gray15, spacing.lg, bannerShadow);
 export var StyledExpandableContent = /*#__PURE__*/styled(Flex).withConfig({
   displayName: "StyledExpandableContent",
-  componentId: "core-12_53_3__sc-149wm7c-3"
+  componentId: "core-12_53_4__sc-149wm7c-3"
 })(["animation-duration:450ms;animation-fill-mode:forwards;animation-timing-function:ease-out;background-color:", ";box-sizing:border-box;font-size:14px;font-weight:500;letter-spacing:0.25px;line-height:20px;overflow-y:auto;padding:0 ", "px;position:relative;z-index:0;", " ", ""], colors.white, spacing.xl * 2 + spacing.sm, function (_ref3) {
   var $isOverflowingY = _ref3.$isOverflowingY;
   return $isOverflowingY && focusable;
@@ -70,23 +70,23 @@ export var StyledExpandableContent = /*#__PURE__*/styled(Flex).withConfig({
 });
 export var StyledTitle = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledTitle",
-  componentId: "core-12_53_3__sc-149wm7c-4"
+  componentId: "core-12_53_4__sc-149wm7c-4"
 })(["", " color:", ";font-weight:", ";"], getTypographyIntent('body'), colors.gray15, typographyWeights.semibold);
 export var StyledBody = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledBody",
-  componentId: "core-12_53_3__sc-149wm7c-5"
+  componentId: "core-12_53_4__sc-149wm7c-5"
 })(["", " color:", ";"], getTypographyIntent('body'), colors.gray15);
 export var StyledIconContainer = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledIconContainer",
-  componentId: "core-12_53_3__sc-149wm7c-6"
+  componentId: "core-12_53_4__sc-149wm7c-6"
 })(["flex:0 0 auto;margin:", "px 0;"], spacing.lg);
 export var StyledActionsTrigger = /*#__PURE__*/styled(DropdownButton).withConfig({
   displayName: "StyledActionsTrigger",
-  componentId: "core-12_53_3__sc-149wm7c-7"
+  componentId: "core-12_53_4__sc-149wm7c-7"
 })(["flex-shrink:0;& + ", ",& + ", "{margin-left:-", "px;}"], StyledButton, StyledLinkButton, spacing.sm);
 export var StyledAction = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledAction",
-  componentId: "core-12_53_3__sc-149wm7c-8"
+  componentId: "core-12_53_4__sc-149wm7c-8"
 })(["margin:", "px 0 ", "px -", "px;& + ", ",& + ", ",& + ", "{margin-left:-", "px;}", ",", "{background:rgba(0,0,0,0.05);color:", ";&:hover{background:", ";color:", ";}}"], spacing.sm, spacing.sm, spacing.sm, StyledButton, StyledLinkButton, StyledActionsTrigger, spacing.sm, StyledButton, StyledLinkButton, colors.gray15, colors.gray85, colors.gray15);
 function getMiniBannerIconColor(_ref5) {
   var variant = _ref5.variant;
@@ -94,6 +94,6 @@ function getMiniBannerIconColor(_ref5) {
 }
 export var StyledMiniBannerContainer = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledMiniBannerContainer",
-  componentId: "core-12_53_3__sc-149wm7c-9"
+  componentId: "core-12_53_4__sc-149wm7c-9"
 })(["align-items:center;background-color:", ";display:flex;justify-content:space-between;padding:0 ", "px;", " ", " & ", "{margin:", "px;}"], colors.gray96, spacing.md, getTypographyIntent('small'), getMiniBannerIconColor, StyledContent, spacing.sm);
 //# sourceMappingURL=Banner.styles.js.map

package/dist/Box/Box.styles.js

@@ -21,7 +21,7 @@ function sizeToPx(size) {
 }
 export var StyledBox = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledBox",
-  componentId: "core-12_53_3__sc-fgsy0p-0"
+  componentId: "core-12_53_4__sc-fgsy0p-0"
 })(["", " ", ""], function (_ref) {
   var as = _ref.as;
   if (as === 'ol' || as === 'ul') {

package/dist/Breadcrumbs/Breadcrumbs.styles.js

@@ -4,19 +4,19 @@ import { colors } from '../_styles/colors';
 import { spacing } from '../_styles/spacing';
 export var StyledContainer = /*#__PURE__*/styled.nav.withConfig({
   displayName: "StyledContainer",
-  componentId: "core-12_53_3__sc-1q6nqfz-0"
+  componentId: "core-12_53_4__sc-1q6nqfz-0"
 })(["color:", ";display:flex;align-items:center;a,a:hover{display:inline-flex;text-decoration:none;}"], colors.gray50);
 export var StyledList = /*#__PURE__*/styled.ol.withConfig({
   displayName: "StyledList",
-  componentId: "core-12_53_3__sc-1q6nqfz-1"
+  componentId: "core-12_53_4__sc-1q6nqfz-1"
 })(["display:flex;margin:0;padding-left:0;"]);
 export var StyledSeparator = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledSeparator",
-  componentId: "core-12_53_3__sc-1q6nqfz-2"
+  componentId: "core-12_53_4__sc-1q6nqfz-2"
 })(["align-items:center;display:inline-flex;justify-content:center;margin:0px ", "px;"], spacing.xs);
 export var StyledCrumb = /*#__PURE__*/styled.li.withConfig({
   displayName: "StyledCrumb",
-  componentId: "core-12_53_3__sc-1q6nqfz-3"
+  componentId: "core-12_53_4__sc-1q6nqfz-3"
 })(["", " align-items:center;color:", ";display:inline-flex;min-height:24px;text-decoration:none;&:hover{cursor:", ";text-decoration:", ";}> a{color:", ";", "}", ""], getTypographyIntent('body'), colors.gray40, function (_ref) {
   var active = _ref.active;
   return active ? 'default' : 'pointer';

package/dist/Button/Button.styles.js

@@ -92,11 +92,11 @@ function getColors(loading, variant) {
 }
 export var StyledContent = /*#__PURE__*/styled.span.withConfig({
   displayName: "StyledContent",
-  componentId: "core-12_53_3__sc-c5bhwh-0"
+  componentId: "core-12_53_4__sc-c5bhwh-0"
 })(["align-items:center;display:flex;overflow:hidden;"]);
 export var StyledSpinner = /*#__PURE__*/styled(Spinner).withConfig({
   displayName: "StyledSpinner",
-  componentId: "core-12_53_3__sc-c5bhwh-1"
+  componentId: "core-12_53_4__sc-c5bhwh-1"
 })(["box-sizing:border-box;display:none;position:absolute;transform:translateZ(0);@media ", "{left:50%;top:50%;", "}"], mediaIE11Hack, function (_ref) {
   var size = _ref.size;
   var margin = -1 * (spinnerDimensions[size !== null && size !== void 0 ? size : defaultSpinnerSize] / 2);
@@ -104,14 +104,14 @@ export var StyledSpinner = /*#__PURE__*/styled(Spinner).withConfig({
 });
 export var StyledLabel = /*#__PURE__*/styled.span.withConfig({
   displayName: "StyledLabel",
-  componentId: "core-12_53_3__sc-c5bhwh-2"
+  componentId: "core-12_53_4__sc-c5bhwh-2"
 })(["overflow:hidden;padding:0 6px;text-overflow:ellipsis;white-space:nowrap;& + span{padding-left:0;}"]);
 export function getButtonStyles(block, disabled, loading, size, variant) {
   return css(["", " &.focus,&:focus{outline:2px solid ", ";outline-offset:var(--core-button-focus-outline-offset,-1px);}", " ", " align-items:center;border-radius:", "px;border:0;box-sizing:border-box;cursor:pointer;display:inline-flex;flex-direction:row;flex-shrink:0;font-family:inherit;font-weight:", ";height:", "px;justify-content:center;margin:0;overflow:hidden;padding:0 ", "px;position:relative;pointer-events:", ";text-overflow:ellipsis;user-select:", ";vertical-align:middle;white-space:nowrap;width:", ";[data-icon-prop='true']{pointer-events:none;height:", "px;width:", "px;}", ""], getTypographyIntent(typographySizes[size]), colors.blue40, variant === 'UNSAFE_helixNav' && css(["&.focus,&:focus{outline:none;box-shadow:0 0 0 2px ", ";}"], colors.blue70), getColors(loading, variant), borderRadius.md, typographyWeights.semibold, heights[size], paddingX[size], disabled || loading ? 'none' : 'inherit', disabled || loading ? 'none' : 'inherit', block && '100%', size === 'sm' ? 16 : 24, size === 'sm' ? 16 : 24, loading && css(["", "{pointer-events:none;visibility:hidden;}", "{display:block;}"], StyledContent, StyledSpinner));
 }
 export var StyledButton = /*#__PURE__*/styled.button.withConfig({
   displayName: "StyledButton",
-  componentId: "core-12_53_3__sc-c5bhwh-3"
+  componentId: "core-12_53_4__sc-c5bhwh-3"
 })(["", ""], function (_ref2) {
   var $block = _ref2.$block,
     disabled = _ref2.disabled,
@@ -122,7 +122,7 @@ export var StyledButton = /*#__PURE__*/styled.button.withConfig({
 });
 export var StyledLinkButton = /*#__PURE__*/styled.a.withConfig({
   displayName: "StyledLinkButton",
-  componentId: "core-12_53_3__sc-c5bhwh-4"
+  componentId: "core-12_53_4__sc-c5bhwh-4"
 })(["&,&:hover{text-decoration:none;}", ""], function (_ref3) {
   var $block = _ref3.$block,
     $disabled = _ref3.$disabled,

package/dist/Calendar/Calendar.js

@@ -4,6 +4,12 @@ var _excluded = ["dueDateTime", "displayDate", "disabledDate", "onSelect", "sele
   _excluded4 = ["dueDateTime", "displayDate", "disabledDate", "monthRef", "onNavigate", "onSelect", "selectedEnd", "selectedStart", "yearRef"];
 function _objectDestructuringEmpty(t) { if (null == t) throw new TypeError("Cannot destructure " + t); }
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
+function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
 function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
 function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
 import { ChevronLeft, ChevronRight } from '@procore/core-icons/dist';
@@ -17,11 +23,47 @@ import { addSubcomponents } from '../_utils/addSubcomponents';
 import { addMonths, format, getDates, getDayOfWeekLabel, getMonth, getMonthLabel, getMonthOptions, getRows, getYear, getYearOptions, isSameDay, isSameMonth, isWithinRange, subMonths, updateMonth, updateYear } from '../_utils/CalendarHelpers';
 import { Select as SelectBase } from '../Select/Select';
 import { getFormatterLocale } from '../_utils/i18n';
-import { StyledContainer, StyledDayCell, StyledDayHeaderCell, StyledNavigation, StyledPaginator, StyledSelect, StyledWeekRow } from './Calendar.styles';
+import { StyledCalendarGrid, StyledContainer, StyledDayCell, StyledDayHeaderCell, StyledNavigation, StyledPaginator, StyledSelect, StyledWeekRow } from './Calendar.styles';
 function noop() {}
 function returnFalse() {
   return false;
 }
+function getInitialActiveIndex(dates, selectedStart, today, displayDate) {
+  var selectedIndex = selectedStart ? dates.findIndex(function (date) {
+    return isSameDay(date, selectedStart);
+  }) : -1;
+  if (selectedIndex >= 0) {
+    return selectedIndex;
+  }
+  var todayIndex = dates.findIndex(function (date) {
+    return isSameDay(date, today);
+  });
+  if (todayIndex >= 0) {
+    return todayIndex;
+  }
+  var firstOfMonthIndex = dates.findIndex(function (date) {
+    return isSameMonth(date, displayDate);
+  });
+  return firstOfMonthIndex >= 0 ? firstOfMonthIndex : 0;
+}
+var daysPerWeek = 7;
+var lastWeekIndex = 5;
+function getNextDayIndex(key, flatIndex) {
+  var row = Math.floor(flatIndex / daysPerWeek);
+  var col = flatIndex % daysPerWeek;
+  switch (key) {
+    case 'ArrowLeft':
+      return col > 0 ? flatIndex - 1 : undefined;
+    case 'ArrowRight':
+      return col < daysPerWeek - 1 ? flatIndex + 1 : undefined;
+    case 'ArrowUp':
+      return row > 0 ? flatIndex - daysPerWeek : undefined;
+    case 'ArrowDown':
+      return row < lastWeekIndex ? flatIndex + daysPerWeek : undefined;
+    default:
+      return undefined;
+  }
+}
 
 /**
  * @parent Calendar
@@ -52,11 +94,44 @@ export function Body(_ref) {
   var onSelect = function onSelect(day) {
     onSelect_(dateTime.shiftZonedTimeToUtc(day, 'Calendar Body onSelect'));
   };
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Weekdays, null), getRows(dates).map(function (row) {
+  var dayRefs = React.useRef([]);
+  var _React$useState = React.useState(function () {
+      return getInitialActiveIndex(dates, selectedStart, startOfDay(dateTime.newDate()), displayDate);
+    }),
+    _React$useState2 = _slicedToArray(_React$useState, 2),
+    activeIndex = _React$useState2[0],
+    setActiveIndex = _React$useState2[1];
+
+  /* eslint-disable react-hooks/exhaustive-deps */
+  React.useEffect(function () {
+    setActiveIndex(getInitialActiveIndex(dates, selectedStart, startOfDay(dateTime.newDate()), displayDate));
+  }, [format(displayDate, 'yyyy-MM')]);
+  var onDayKeyDown = function onDayKeyDown(event, flatIndex) {
+    var _dayRefs$current$next;
+    var nextIndex = getNextDayIndex(event.key, flatIndex);
+    if (nextIndex === undefined) {
+      return;
+    }
+    event.preventDefault();
+    (_dayRefs$current$next = dayRefs.current[nextIndex]) === null || _dayRefs$current$next === void 0 || _dayRefs$current$next.focus();
+  };
+  return /*#__PURE__*/React.createElement(StyledCalendarGrid, {
+    "aria-label": dateTime.format(displayDate, 'none', {
+      month: 'long',
+      year: 'numeric'
+    }),
+    role: "grid"
+  }, /*#__PURE__*/React.createElement(Weekdays, null), getRows(dates).map(function (row, rowIndex) {
     return /*#__PURE__*/React.createElement(Week, {
       key: "week-".concat(format(row[0], 'yyyy-MMMM-dddd'))
-    }, row.map(function (day) {
-      return /*#__PURE__*/React.createElement(Day, _extends({
+    }, row.map(function (day, columnIndex) {
+      var flatIndex = rowIndex * daysPerWeek + columnIndex;
+      var selected = isWithinRange(day, selectedStart, selectedEnd);
+      return /*#__PURE__*/React.createElement("div", {
+        "aria-selected": selected || undefined,
+        key: "day-".concat(format(day, 'yyyy-MMMM-dddd')),
+        role: "gridcell"
+      }, /*#__PURE__*/React.createElement(Day, _extends({
         "aria-label": dateTime.format(day, 'weekday-date', {
           timeZone: undefined
         }),
@@ -65,16 +140,25 @@ export function Body(_ref) {
         isRangeEnd: selectedEnd && isSameDay(day, selectedEnd),
         isRangeStart: selectedStart && isSameDay(day, selectedStart),
         isToday: isSameDay(day, startOfDay(dateTime.newDate())),
-        key: "day-".concat(format(day, 'yyyy-MMMM-dddd')),
         onClick: function onClick() {
           return onSelect(day);
         },
-        selected: isWithinRange(day, selectedStart, selectedEnd)
+        onFocus: function onFocus() {
+          return setActiveIndex(flatIndex);
+        },
+        onKeyDown: function onKeyDown(event) {
+          return onDayKeyDown(event, flatIndex);
+        },
+        ref: function ref(element) {
+          dayRefs.current[flatIndex] = element;
+        },
+        selected: selected,
+        tabIndex: flatIndex === activeIndex ? 0 : -1
       }, props), format(day, 'd'), dueDateTime && isSameDay(day, startOfDay(dueDateTime)) && /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("em", {
         style: isAfter(dateTime.newDate(), dueDateTime) ? {
           color: 'red'
         } : undefined
-      }, dateTime.format(dueDateTime_, 'time'))));
+      }, dateTime.format(dueDateTime_, 'time')))));
     }));
   }));
 }
@@ -189,7 +273,8 @@ export var Prev = /*#__PURE__*/React.forwardRef(function Prev(props, ref) {
  */
 export var Week = /*#__PURE__*/React.forwardRef(function Week(props, ref) {
   return /*#__PURE__*/React.createElement(StyledWeekRow, _extends({
-    ref: ref
+    ref: ref,
+    role: "row"
   }, props));
 });
 
@@ -208,10 +293,12 @@ export var Weekdays = /*#__PURE__*/React.forwardRef(function Weekdays(props, ref
   var startDayOfWeek = getStartDayOfTheWeek(formatterLocale);
   return /*#__PURE__*/React.createElement(StyledWeekRow, _extends({
     ref: ref,
-    "aria-hidden": "true"
+    role: "row",
+    "aria-hidden": true
   }, props), range(startDayOfWeek, startDayOfWeek + 7).map(function (day) {
     return /*#__PURE__*/React.createElement(StyledDayHeaderCell, {
-      key: "day-".concat(day)
+      key: "day-".concat(day),
+      role: "columnheader"
     }, getDayOfWeekLabel(day, formatterLocale));
   }));
 });