primereact 10.3.2 → 10.3.3

package/primereact.all.cjs.js

@@ -2818,7 +2818,27 @@ var locales = {
     dayNamesMin: ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'],
     monthNames: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
     monthNamesShort: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
+    chooseYear: 'Choose Year',
+    chooseMonth: 'Choose Month',
+    chooseDate: 'Choose Date',
+    prevDecade: 'Previous Decade',
+    nextDecade: 'Next Decade',
+    prevYear: 'Previous Year',
+    nextYear: 'Next Year',
+    prevMonth: 'Previous Month',
+    nextMonth: 'Next Month',
+    prevHour: 'Previous Hour',
+    nextHour: 'Next Hour',
+    prevMinute: 'Previous Minute',
+    nextMinute: 'Next Minute',
+    prevSecond: 'Previous Second',
+    nextSecond: 'Next Second',
+    prevMilliSecond: 'Previous Second',
+    nextMilliSecond: 'Next Second',
+    am: 'am',
+    pm: 'pm',
     today: 'Today',
+    now: 'Now',
     weekHeader: 'Wk',
     firstDayOfWeek: 0,
     showMonthAfterYear: false,
@@ -10024,13 +10044,14 @@ var BreadCrumb = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespa
 }));
 BreadCrumb.displayName = 'BreadCrumb';
 
-var styles$Y = "\n@layer primereact {\n    .p-calendar {\n        position: relative;\n        display: inline-flex;\n        max-width: 100%;\n    }\n    \n    .p-calendar .p-inputtext {\n        flex: 1 1 auto;\n        width: 1%;\n    }\n    \n    .p-calendar-w-btn-right .p-inputtext {\n        border-top-right-radius: 0;\n        border-bottom-right-radius: 0;\n    }\n    \n    .p-calendar-w-btn-right .p-datepicker-trigger {\n        border-top-left-radius: 0;\n        border-bottom-left-radius: 0;\n    }\n    \n    .p-calendar-w-btn-left .p-inputtext {\n        border-top-left-radius: 0;\n        border-bottom-left-radius: 0;\n    }\n    \n    .p-calendar-w-btn-left .p-datepicker-trigger {\n        border-top-right-radius: 0;\n        border-bottom-right-radius: 0;\n    }\n    \n    /* Fluid */\n    .p-fluid .p-calendar {\n        display: flex;\n    }\n    \n    .p-fluid .p-calendar .p-inputtext {\n        width: 1%;\n    }\n    \n    /* Datepicker */\n    .p-calendar .p-datepicker {\n        min-width: 100%;\n    }\n    \n    .p-datepicker {\n        width: auto;\n        position: absolute;\n        top: 0;\n        left: 0;\n    }\n    \n    .p-datepicker-inline {\n        display: inline-block;\n        position: static;\n        overflow-x: auto;\n    }\n    \n    /* Header */\n    .p-datepicker-header {\n        display: flex;\n        align-items: center;\n        justify-content: space-between;\n    }\n    \n    .p-datepicker-header .p-datepicker-title {\n        margin: 0 auto;\n    }\n    \n    .p-datepicker-prev,\n    .p-datepicker-next {\n        cursor: pointer;\n        display: inline-flex;\n        justify-content: center;\n        align-items: center;\n        overflow: hidden;\n        position: relative;\n    }\n    \n    /* Multiple Month DatePicker */\n    .p-datepicker-multiple-month .p-datepicker-group-container {\n        display: flex;\n    }\n    \n    .p-datepicker-multiple-month .p-datepicker-group-container .p-datepicker-group {\n        flex: 1 1 auto;\n    }\n    \n    /* Multiple Month DatePicker */\n    .p-datepicker-multiple-month .p-datepicker-group-container {\n        display: flex;\n    }\n    \n    /* DatePicker Table */\n    .p-datepicker table {\n        width: 100%;\n        border-collapse: collapse;\n    }\n    \n    .p-datepicker td > span {\n        display: flex;\n        justify-content: center;\n        align-items: center;\n        cursor: pointer;\n        margin: 0 auto;\n        overflow: hidden;\n        position: relative;\n    }\n    \n    /* Month Picker */\n    .p-monthpicker-month {\n        width: 33.3%;\n        display: inline-flex;\n        align-items: center;\n        justify-content: center;\n        cursor: pointer;\n        overflow: hidden;\n        position: relative;\n    }\n    \n    /*  Button Bar */\n    .p-datepicker-buttonbar {\n        display: flex;\n        justify-content: space-between;\n        align-items: center;\n    }\n    \n    /* Time Picker */\n    .p-timepicker {\n        display: flex;\n        justify-content: center;\n        align-items: center;\n    }\n    \n    .p-timepicker button {\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        cursor: pointer;\n        overflow: hidden;\n        position: relative;\n    }\n    \n    .p-timepicker > div {\n        display: flex;\n        align-items: center;\n        flex-direction: column;\n    }\n    \n    /* Touch UI */\n    .p-datepicker-touch-ui,\n    .p-calendar .p-datepicker-touch-ui {\n        position: fixed;\n        top: 50%;\n        left: 50%;\n        min-width: 80vw;\n        transform: translate(-50%, -50%);\n    }\n    \n    /* Year Picker */\n    .p-yearpicker-year {\n        width: 50%;\n        display: inline-flex;\n        align-items: center;\n        justify-content: center;\n        cursor: pointer;\n        overflow: hidden;\n        position: relative;\n    }\n}\n";
+var styles$Y = "\n@layer primereact {\n    .p-calendar {\n        position: relative;\n        display: inline-flex;\n        max-width: 100%;\n    }\n\n    .p-calendar .p-inputtext {\n        flex: 1 1 auto;\n        width: 1%;\n    }\n\n    .p-calendar-w-btn-right .p-inputtext {\n        border-top-right-radius: 0;\n        border-bottom-right-radius: 0;\n    }\n\n    .p-calendar-w-btn-right .p-datepicker-trigger {\n        border-top-left-radius: 0;\n        border-bottom-left-radius: 0;\n    }\n\n    .p-calendar-w-btn-left .p-inputtext {\n        border-top-left-radius: 0;\n        border-bottom-left-radius: 0;\n    }\n\n    .p-calendar-w-btn-left .p-datepicker-trigger {\n        border-top-right-radius: 0;\n        border-bottom-right-radius: 0;\n    }\n\n    /* Fluid */\n    .p-fluid .p-calendar {\n        display: flex;\n    }\n\n    .p-fluid .p-calendar .p-inputtext {\n        width: 1%;\n    }\n\n    /* Datepicker */\n    .p-calendar .p-datepicker {\n        min-width: 100%;\n    }\n\n    .p-datepicker {\n        width: auto;\n        position: absolute;\n        top: 0;\n        left: 0;\n    }\n\n    .p-datepicker-inline {\n        display: inline-block;\n        position: static;\n        overflow-x: auto;\n    }\n\n    /* Header */\n    .p-datepicker-header {\n        display: flex;\n        align-items: center;\n        justify-content: space-between;\n    }\n\n    .p-datepicker-header .p-datepicker-title {\n        margin: 0 auto;\n    }\n\n    .p-datepicker-prev,\n    .p-datepicker-next {\n        cursor: pointer;\n        display: inline-flex;\n        justify-content: center;\n        align-items: center;\n        overflow: hidden;\n        position: relative;\n    }\n\n    /* Multiple Month DatePicker */\n    .p-datepicker-multiple-month .p-datepicker-group-container {\n        display: flex;\n    }\n\n    .p-datepicker-multiple-month .p-datepicker-group-container .p-datepicker-group {\n        flex: 1 1 auto;\n    }\n\n    /* Multiple Month DatePicker */\n    .p-datepicker-multiple-month .p-datepicker-group-container {\n        display: flex;\n    }\n\n    /* DatePicker Table */\n    .p-datepicker table {\n        width: 100%;\n        border-collapse: collapse;\n    }\n\n    .p-datepicker td > span {\n        display: flex;\n        justify-content: center;\n        align-items: center;\n        cursor: pointer;\n        margin: 0 auto;\n        overflow: hidden;\n        position: relative;\n    }\n\n    /* Month Picker */\n    .p-monthpicker-month {\n        width: 33.3%;\n        display: inline-flex;\n        align-items: center;\n        justify-content: center;\n        cursor: pointer;\n        overflow: hidden;\n        position: relative;\n    }\n\n    /*  Button Bar */\n    .p-datepicker-buttonbar {\n        display: flex;\n        justify-content: space-between;\n        align-items: center;\n    }\n\n    /* Time Picker */\n    .p-timepicker {\n        display: flex;\n        justify-content: center;\n        align-items: center;\n    }\n\n    .p-timepicker button {\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        cursor: pointer;\n        overflow: hidden;\n        position: relative;\n    }\n\n    .p-timepicker > div {\n        display: flex;\n        align-items: center;\n        flex-direction: column;\n    }\n\n    /* Touch UI */\n    .p-datepicker-touch-ui,\n    .p-calendar .p-datepicker-touch-ui {\n        position: fixed;\n        top: 50%;\n        left: 50%;\n        min-width: 80vw;\n        transform: translate(-50%, -50%);\n    }\n\n    /* Year Picker */\n    .p-yearpicker-year {\n        width: 50%;\n        display: inline-flex;\n        align-items: center;\n        justify-content: center;\n        cursor: pointer;\n        overflow: hidden;\n        position: relative;\n    }\n}\n";
 var classes$11 = {
   root: function root(_ref) {
     var props = _ref.props,
       focusedState = _ref.focusedState,
-      isFilled = _ref.isFilled;
-    return classNames('p-calendar p-component p-inputwrapper', _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, "p-calendar-w-btn p-calendar-w-btn-".concat(props.iconPos), props.showIcon), 'p-calendar-disabled', props.disabled), 'p-calendar-timeonly', props.timeOnly), 'p-inputwrapper-filled', props.value || isFilled), 'p-inputwrapper-focus', focusedState));
+      isFilled = _ref.isFilled,
+      panelVisible = _ref.panelVisible;
+    return classNames('p-calendar p-component p-inputwrapper', _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, "p-calendar-w-btn p-calendar-w-btn-".concat(props.iconPos), props.showIcon), 'p-calendar-disabled', props.disabled), 'p-calendar-timeonly', props.timeOnly), 'p-inputwrapper-filled', props.value || isFilled), 'p-inputwrapper-focus', focusedState), 'p-focus', focusedState || panelVisible));
   },
   dropdownButton: 'p-datepicker-trigger',
   buttonbar: 'p-datepicker-buttonbar',
@@ -10109,6 +10130,7 @@ var CalendarBase = ComponentBase.extend({
     __TYPE: 'Calendar',
     appendTo: null,
     ariaLabelledBy: null,
+    ariaLabel: null,
     autoZIndex: true,
     autoFocus: false,
     baseZIndex: 0,
@@ -10216,6 +10238,10 @@ var CalendarPanel = /*#__PURE__*/React__namespace.forwardRef(function (props, re
         panelClassName: props.className
       }),
       style: props.style,
+      role: props.inline ? null : 'dialog',
+      id: props.id,
+      'aria-label': localeOption('chooseDate', props.locale),
+      'aria-modal': props.inline ? null : 'true',
       onClick: props.onClick,
       onMouseUp: props.onMouseUp
     }, props.ptm('panel', {
@@ -10272,6 +10298,10 @@ var Calendar = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespace
     _React$useState6 = _slicedToArray(_React$useState5, 2),
     viewDateState = _React$useState6[0],
     setViewDateState = _React$useState6[1];
+  var _React$useState7 = React__namespace.useState(props.id),
+    _React$useState8 = _slicedToArray(_React$useState7, 2),
+    idState = _React$useState8[0],
+    setIdState = _React$useState8[1];
   var metaData = {
     props: props,
     state: {
@@ -10300,26 +10330,29 @@ var Calendar = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespace
   var isOverlayClicked = React__namespace.useRef(false);
   var previousButton = React__namespace.useRef(false);
   var nextButton = React__namespace.useRef(false);
+  var viewChangedWithKeyDown = React__namespace.useRef(false);
   var onChangeRef = React__namespace.useRef(null);
-  var _React$useState7 = React__namespace.useState('date'),
-    _React$useState8 = _slicedToArray(_React$useState7, 2),
-    currentView = _React$useState8[0],
-    setCurrentView = _React$useState8[1];
-  var _React$useState9 = React__namespace.useState(null),
+  var isClearClicked = React__namespace.useRef(false);
+  var _React$useState9 = React__namespace.useState('date'),
     _React$useState10 = _slicedToArray(_React$useState9, 2),
-    currentMonth = _React$useState10[0],
-    setCurrentMonth = _React$useState10[1];
+    currentView = _React$useState10[0],
+    setCurrentView = _React$useState10[1];
   var _React$useState11 = React__namespace.useState(null),
     _React$useState12 = _slicedToArray(_React$useState11, 2),
-    currentYear = _React$useState12[0],
-    setCurrentYear = _React$useState12[1];
-  var _React$useState13 = React__namespace.useState([]),
+    currentMonth = _React$useState12[0],
+    setCurrentMonth = _React$useState12[1];
+  var _React$useState13 = React__namespace.useState(null),
     _React$useState14 = _slicedToArray(_React$useState13, 2),
-    yearOptions = _React$useState14[0],
-    setYearOptions = _React$useState14[1];
+    currentYear = _React$useState14[0],
+    setCurrentYear = _React$useState14[1];
+  var _React$useState15 = React__namespace.useState([]),
+    _React$useState16 = _slicedToArray(_React$useState15, 2),
+    yearOptions = _React$useState16[0],
+    setYearOptions = _React$useState16[1];
   var previousValue = usePrevious(props.value);
   var visible = props.inline || (props.onVisibleChange ? props.visible : overlayVisibleState);
   var attributeSelector = UniqueComponentId();
+  var panelId = idState + '_panel';
   var _useOverlayListener = useOverlayListener({
       target: elementRef,
       overlay: overlayRef,
@@ -10327,7 +10360,7 @@ var Calendar = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespace
         var type = _ref.type,
           valid = _ref.valid;
         if (valid) {
-          type === 'outside' ? !isOverlayClicked.current && !isNavIconClicked(event.target) && hide('outside') : hide();
+          type === 'outside' ? !isOverlayClicked.current && !isNavIconClicked(event.target) && hide('outside', reFocusInputField) : hide(null, reFocusInputField);
         }
         isOverlayClicked.current = false;
       },
@@ -10357,21 +10390,34 @@ var Calendar = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespace
     setFocusedState(false);
   };
   var onInputKeyDown = function onInputKeyDown(event) {
-    switch (event.which) {
-      //escape
-      case 27:
+    switch (event.code) {
+      case 'ArrowDown':
         {
-          hide();
+          if (!overlayVisibleState) {
+            show();
+          } else {
+            focusToFirstCell();
+            event.preventDefault();
+          }
           break;
         }
-
-      //tab
-      case 9:
+      case 'Escape':
         {
-          visible && trapFocus(event);
+          hide();
           props.touchUI && disableModality();
           break;
         }
+      case 'Tab':
+        {
+          if (overlayRef && overlayRef.current) {
+            DomHandler.getFocusableElements(overlayRef.current).forEach(function (el) {
+              return el.tabIndex = '-1';
+            });
+            hide();
+            props.touchUI && disableModality();
+          }
+          break;
+        }
     }
   };
   var onUserInput = function onUserInput(event) {
@@ -10434,28 +10480,40 @@ var Calendar = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespace
     navForward(event);
   };
   var onContainerButtonKeydown = function onContainerButtonKeydown(event) {
-    switch (event.which) {
-      //tab
-      case 9:
-        trapFocus(event);
+    switch (event.code) {
+      case 'Tab':
+        !props.inline && trapFocus(event);
         break;
-
-      //escape
-      case 27:
+      case 'Escape':
         hide(null, reFocusInputField);
         event.preventDefault();
         break;
     }
   };
+  var onPickerKeyDown = function onPickerKeyDown(event, type, direction) {
+    if (event.code === 'Enter' || event.code === 'Space') {
+      onTimePickerElementMouseDown(event, type, direction);
+      event.preventDefault();
+      return;
+    }
+    onContainerButtonKeydown(event);
+  };
+  var onPickerKeyUp = function onPickerKeyUp(event) {
+    if (event.code === 'Enter' || event.code === 'Space') {
+      onTimePickerElementMouseUp();
+      event.preventDefault();
+      return;
+    }
+  };
   var trapFocus = function trapFocus(event) {
-    event.preventDefault();
+    event === null || event === void 0 || event.preventDefault();
     var focusableElements = DomHandler.getFocusableElements(overlayRef.current);
     if (focusableElements && focusableElements.length > 0) {
       if (!document.activeElement) {
         focusableElements[0].focus();
       } else {
         var focusedIndex = focusableElements.indexOf(document.activeElement);
-        if (event.shiftKey) {
+        if (event !== null && event !== void 0 && event.shiftKey) {
           if (focusedIndex === -1 || focusedIndex === 0) focusableElements[focusableElements.length - 1].focus();else focusableElements[focusedIndex - 1].focus();
         } else {
           if (focusedIndex === -1 || focusedIndex === focusableElements.length - 1) focusableElements[0].focus();else focusableElements[focusedIndex + 1].focus();
@@ -10488,7 +10546,7 @@ var Calendar = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespace
   };
   var initFocusableCell = function initFocusableCell() {
     var cell;
-    if (props.view === 'month') {
+    if (currentView === 'month') {
       var cells = DomHandler.find(overlayRef.current, '[data-pc-section="monthpicker"] [data-pc-section="month"]');
       var selectedCell = DomHandler.findSingle(overlayRef.current, '[data-pc-section="monthpicker"] [data-pc-section="month"][data-p-highlight="true"]');
       cells.forEach(function (cell) {
@@ -10506,6 +10564,27 @@ var Calendar = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespace
       cell.tabIndex = '0';
     }
   };
+  var focusToFirstCell = function focusToFirstCell() {
+    if (currentView) {
+      var cell;
+      if (currentView === 'date') {
+        cell = DomHandler.findSingle(overlayRef.current, 'span[data-p-highlight="true"]');
+        if (!cell) {
+          var todayCell = DomHandler.findSingle(overlayRef.current, 'td.p-datepicker-today span:not(.p-disabled)');
+          cell = todayCell || DomHandler.findSingle(overlayRef.current, 'table td span:not([data-p-disabled="true"])');
+        }
+      } else if (currentView === 'month' || currentView === 'year') {
+        cell = DomHandler.findSingle(overlayRef.current, 'span[data-p-highlight="true"]');
+        if (!cell) {
+          cell = DomHandler.findSingle(overlayRef.current, "[data-pc-section=\"".concat(currentView, "picker\"] [data-pc-section=\"").concat(currentView, "\"]:not([data-p-disabled=\"true\"])"));
+        }
+      }
+      if (cell) {
+        cell.tabIndex = '0';
+        cell && cell.focus();
+      }
+    }
+  };
   var navBackward = function navBackward(event) {
     if (props.disabled) {
       event.preventDefault();
@@ -10635,6 +10714,7 @@ var Calendar = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespace
     props.onTodayButtonClick && props.onTodayButtonClick(event);
   };
   var onClearButtonClick = function onClearButtonClick(event) {
+    isClearClicked.current = true;
     updateModel(event, null);
     updateInputfield(null);
     hide();
@@ -11116,23 +11196,29 @@ var Calendar = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespace
   var onDateCellKeydown = function onDateCellKeydown(event, date, groupIndex) {
     var cellContent = event.currentTarget;
     var cell = cellContent.parentElement;
-    switch (event.which) {
-      //down arrow
-      case 40:
+    var cellIndex = DomHandler.index(cell);
+    switch (event.code) {
+      case 'ArrowDown':
         {
           cellContent.tabIndex = '-1';
-          var cellIndex = DomHandler.index(cell);
           var nextRow = cell.parentElement.nextElementSibling;
           if (nextRow) {
-            var focusCell = nextRow.children[cellIndex].children[0];
-            if (DomHandler.hasClass(focusCell, 'p-disabled')) {
+            var tableRowIndex = DomHandler.index(cell.parentElement);
+            var tableRows = Array.from(cell.parentElement.parentElement.children);
+            var nextTableRows = tableRows.slice(tableRowIndex + 1);
+            var hasNextFocusableDate = nextTableRows.find(function (el) {
+              var focusCell = el.children[cellIndex].children[0];
+              return !DomHandler.getAttribute(focusCell, 'data-p-disabled');
+            });
+            if (hasNextFocusableDate) {
+              var focusCell = hasNextFocusableDate.children[cellIndex].children[0];
+              focusCell.tabIndex = '0';
+              focusCell.focus();
+            } else {
               navigation.current = {
                 backward: false
               };
               navForward(event);
-            } else {
-              nextRow.children[cellIndex].children[0].tabIndex = '0';
-              nextRow.children[cellIndex].children[0].focus();
             }
           } else {
             navigation.current = {
@@ -11143,46 +11229,58 @@ var Calendar = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespace
           event.preventDefault();
           break;
         }
-
-      //up arrow
-      case 38:
+      case 'ArrowUp':
         {
           cellContent.tabIndex = '-1';
-          var _cellIndex = DomHandler.index(cell);
-          var prevRow = cell.parentElement.previousElementSibling;
-          if (prevRow) {
-            var _focusCell = prevRow.children[_cellIndex].children[0];
-            if (DomHandler.hasClass(_focusCell, 'p-disabled')) {
+          if (event.altKey) {
+            hide(null, reFocusInputField);
+          } else {
+            var prevRow = cell.parentElement.previousElementSibling;
+            if (prevRow) {
+              var _tableRowIndex = DomHandler.index(cell.parentElement);
+              var _tableRows = Array.from(cell.parentElement.parentElement.children);
+              var prevTableRows = _tableRows.slice(0, _tableRowIndex).reverse();
+              var _hasNextFocusableDate = prevTableRows.find(function (el) {
+                var focusCell = el.children[cellIndex].children[0];
+                return !DomHandler.getAttribute(focusCell, 'data-p-disabled');
+              });
+              if (_hasNextFocusableDate) {
+                var _focusCell = _hasNextFocusableDate.children[cellIndex].children[0];
+                _focusCell.tabIndex = '0';
+                _focusCell.focus();
+              } else {
+                navigation.current = {
+                  backward: true
+                };
+                navBackward(event);
+              }
+            } else {
               navigation.current = {
                 backward: true
               };
               navBackward(event);
-            } else {
-              _focusCell.tabIndex = '0';
-              _focusCell.focus();
             }
-          } else {
-            navigation.current = {
-              backward: true
-            };
-            navBackward(event);
           }
           event.preventDefault();
           break;
         }
-
-      //left arrow
-      case 37:
+      case 'ArrowLeft':
         {
           cellContent.tabIndex = '-1';
           var prevCell = cell.previousElementSibling;
           if (prevCell) {
-            var _focusCell2 = prevCell.children[0];
-            if (DomHandler.hasClass(_focusCell2, 'p-disabled')) {
-              navigateToMonth(true, groupIndex, event);
-            } else {
+            var cells = Array.from(cell.parentElement.children);
+            var prevCells = cells.slice(0, cellIndex).reverse();
+            var _hasNextFocusableDate2 = prevCells.find(function (el) {
+              var focusCell = el.children[0];
+              return !DomHandler.getAttribute(focusCell, 'data-p-disabled');
+            });
+            if (_hasNextFocusableDate2) {
+              var _focusCell2 = _hasNextFocusableDate2.children[0];
               _focusCell2.tabIndex = '0';
               _focusCell2.focus();
+            } else {
+              navigateToMonth(true, groupIndex, event);
             }
           } else {
             navigateToMonth(true, groupIndex, event);
@@ -11190,19 +11288,23 @@ var Calendar = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespace
           event.preventDefault();
           break;
         }
-
-      //right arrow
-      case 39:
+      case 'ArrowRight':
         {
           cellContent.tabIndex = '-1';
           var nextCell = cell.nextElementSibling;
           if (nextCell) {
-            var _focusCell3 = nextCell.children[0];
-            if (DomHandler.hasClass(_focusCell3, 'p-disabled')) {
-              navigateToMonth(false, groupIndex, event);
-            } else {
+            var _cells = Array.from(cell.parentElement.children);
+            var nextCells = _cells.slice(cellIndex + 1);
+            var _hasNextFocusableDate3 = nextCells.find(function (el) {
+              var focusCell = el.children[0];
+              return !DomHandler.getAttribute(focusCell, 'data-p-disabled');
+            });
+            if (_hasNextFocusableDate3) {
+              var _focusCell3 = _hasNextFocusableDate3.children[0];
               _focusCell3.tabIndex = '0';
               _focusCell3.focus();
+            } else {
+              navigateToMonth(false, groupIndex, event);
             }
           } else {
             navigateToMonth(false, groupIndex, event);
@@ -11210,27 +11312,75 @@ var Calendar = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespace
           event.preventDefault();
           break;
         }
-
-      //enter
-      case 13:
+      case 'Enter':
+      case 'NumpadEnter':
+      case 'Space':
         {
           onDateSelect(event, date);
           event.preventDefault();
           break;
         }
-
-      //escape
-      case 27:
+      case 'Escape':
         {
           hide(null, reFocusInputField);
           event.preventDefault();
           break;
         }
-
-      //tab
-      case 9:
+      case 'Tab':
         {
-          trapFocus(event);
+          if (!props.inline) trapFocus(event);
+          break;
+        }
+      case 'Home':
+        {
+          cellContent.tabIndex = '-1';
+          var currentRow = cell.parentElement;
+          var _focusCell4 = currentRow.children[0].children[0];
+          if (DomHandler.getAttribute(_focusCell4, 'data-p-disabled')) {
+            navigateToMonth(groupIndex, true, event);
+          } else {
+            _focusCell4.tabIndex = '0';
+            _focusCell4.focus();
+          }
+          event.preventDefault();
+          break;
+        }
+      case 'End':
+        {
+          cellContent.tabIndex = '-1';
+          var _currentRow = cell.parentElement;
+          var _focusCell5 = _currentRow.children[_currentRow.children.length - 1].children[0];
+          if (DomHandler.getAttribute(_focusCell5, 'data-p-disabled')) {
+            navigateToMonth(groupIndex, false, event);
+          } else {
+            _focusCell5.tabIndex = '0';
+            _focusCell5.focus();
+          }
+          event.preventDefault();
+          break;
+        }
+      case 'PageUp':
+        {
+          cellContent.tabIndex = '-1';
+          if (event.shiftKey) {
+            navigation.current = {
+              backward: true
+            };
+            navBackward(event);
+          } else navigateToMonth(groupIndex, true, event);
+          event.preventDefault();
+          break;
+        }
+      case 'PageDown':
+        {
+          cellContent.tabIndex = '-1';
+          if (event.shiftKey) {
+            navigation.current = {
+              backward: false
+            };
+            navForward(event);
+          } else navigateToMonth(groupIndex, false, event);
+          event.preventDefault();
           break;
         }
     }
@@ -11257,18 +11407,18 @@ var Calendar = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespace
         navForward(event);
       } else {
         var nextMonthContainer = overlayRef.current.children[groupIndex + 1];
-        var _focusCell4 = DomHandler.findSingle(nextMonthContainer, 'table td span:not([data-p-disabled="true"])');
-        _focusCell4.tabIndex = '0';
-        _focusCell4.focus();
+        var _focusCell6 = DomHandler.findSingle(nextMonthContainer, 'table td span:not([data-p-disabled="true"])');
+        _focusCell6.tabIndex = '0';
+        _focusCell6.focus();
       }
     }
   };
   var onMonthCellKeydown = function onMonthCellKeydown(event, index) {
     var cell = event.currentTarget;
-    switch (event.which) {
+    switch (event.code) {
       //arrows
-      case 38:
-      case 40:
+      case 'ArrowUp':
+      case 'ArrowDown':
         {
           cell.tabIndex = '-1';
           var cells = cell.parentElement.children;
@@ -11281,51 +11431,162 @@ var Calendar = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespace
           event.preventDefault();
           break;
         }
-
-      //left arrow
-      case 37:
+      case 'ArrowLeft':
         {
           cell.tabIndex = '-1';
           var prevCell = cell.previousElementSibling;
           if (prevCell) {
             prevCell.tabIndex = '0';
             prevCell.focus();
+          } else {
+            navigation.current = {
+              backward: true
+            };
+            navBackward(event);
           }
           event.preventDefault();
           break;
         }
-
-      //right arrow
-      case 39:
+      case 'ArrowRight':
         {
           cell.tabIndex = '-1';
           var _nextCell = cell.nextElementSibling;
           if (_nextCell) {
             _nextCell.tabIndex = '0';
             _nextCell.focus();
+          } else {
+            navigation.current = {
+              backward: false
+            };
+            navForward(event);
           }
           event.preventDefault();
           break;
         }
-
-      //enter
-      case 13:
+      case 'PageUp':
+        {
+          if (event.shiftKey) return;
+          navigation.current = {
+            backward: true
+          };
+          navBackward(event);
+          break;
+        }
+      case 'PageDown':
+        {
+          if (event.shiftKey) return;
+          navigation.current = {
+            backward: false
+          };
+          navForward(event);
+          break;
+        }
+      case 'Enter':
+      case 'NumpadEnter':
+      case 'Space':
         {
+          if (props.view !== 'month') viewChangedWithKeyDown.current = true;
           onMonthSelect(event, index);
           event.preventDefault();
           break;
         }
-
-      //escape
-      case 27:
+      case 'Escape':
         {
           hide(null, reFocusInputField);
           event.preventDefault();
           break;
         }
-
-      //tab
-      case 9:
+      case 'Tab':
+        {
+          trapFocus(event);
+          break;
+        }
+    }
+  };
+  var onYearCellKeydown = function onYearCellKeydown(event, index) {
+    var cell = event.currentTarget;
+    switch (event.code) {
+      //arrows
+      case 'ArrowUp':
+      case 'ArrowDown':
+        {
+          cell.tabIndex = '-1';
+          var cells = cell.parentElement.children;
+          var cellIndex = DomHandler.index(cell);
+          var nextCell = cells[event.code === 'ArrowDown' ? cellIndex + 2 : cellIndex - 2];
+          if (nextCell) {
+            nextCell.tabIndex = '0';
+            nextCell.focus();
+          }
+          event.preventDefault();
+          break;
+        }
+      case 'ArrowLeft':
+        {
+          cell.tabIndex = '-1';
+          var prevCell = cell.previousElementSibling;
+          if (prevCell) {
+            prevCell.tabIndex = '0';
+            prevCell.focus();
+          } else {
+            navigation.current = {
+              backward: true
+            };
+            navBackward(event);
+          }
+          event.preventDefault();
+          break;
+        }
+      case 'ArrowRight':
+        {
+          cell.tabIndex = '-1';
+          var _nextCell2 = cell.nextElementSibling;
+          if (_nextCell2) {
+            _nextCell2.tabIndex = '0';
+            _nextCell2.focus();
+          } else {
+            navigation.current = {
+              backward: false
+            };
+            navForward(event);
+          }
+          event.preventDefault();
+          break;
+        }
+      case 'PageUp':
+        {
+          if (event.shiftKey) return;
+          navigation.current = {
+            backward: true
+          };
+          navBackward(event);
+          break;
+        }
+      case 'PageDown':
+        {
+          if (event.shiftKey) return;
+          navigation.current = {
+            backward: false
+          };
+          navForward(event);
+          break;
+        }
+      case 'Enter':
+      case 'NumpadEnter':
+      case 'Space':
+        {
+          if (props.view !== 'year') viewChangedWithKeyDown.current = true;
+          onYearSelect(event, index);
+          event.preventDefault();
+          break;
+        }
+      case 'Escape':
+        {
+          hide(null, reFocusInputField);
+          event.preventDefault();
+          break;
+        }
+      case 'Tab':
         {
           trapFocus(event);
           break;
@@ -11442,10 +11703,16 @@ var Calendar = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespace
     return _currentYear;
   };
   var switchToMonthView = function switchToMonthView(event) {
+    if (event && event.code && (event.code === 'Enter' || event.code === 'Space')) {
+      viewChangedWithKeyDown.current = true;
+    }
     setCurrentView('month');
     event.preventDefault();
   };
   var switchToYearView = function switchToYearView(event) {
+    if (event && event.code && (event.code === 'Enter' || event.code === 'Space')) {
+      viewChangedWithKeyDown.current = true;
+    }
     setCurrentView('year');
     event.preventDefault();
   };
@@ -11586,7 +11853,6 @@ var Calendar = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespace
   var onOverlayEntered = function onOverlayEntered() {
     bindOverlayListener();
     props.onShow && props.onShow();
-    DomHandler.focusFirstElement(overlayRef.current);
     setFocusedState(false);
   };
   var onOverlayExit = function onOverlayExit() {
@@ -12457,6 +12723,10 @@ var Calendar = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespace
     setCurrentMonth(viewDate.getMonth());
     setCurrentYear(viewDate.getFullYear());
     setCurrentView(props.view);
+    if (!idState) {
+      var uniqueId = UniqueComponentId();
+      !idState && setIdState(uniqueId);
+    }
     if (props.inline) {
       overlayRef && overlayRef.current.setAttribute(attributeSelector, '');
       if (!props.disabled) {
@@ -12504,8 +12774,14 @@ var Calendar = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespace
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [props.disabled, props.mask, props.readOnlyInput]);
   useUpdateEffect(function () {
-    setCurrentView(props.view);
+    if (viewChangedWithKeyDown.current) {
+      setCurrentView(props.view);
+    }
+    viewChangedWithKeyDown.current = false;
   }, [props.view]);
+  useUpdateEffect(function () {
+    focusToFirstCell();
+  }, [currentView]);
   useUpdateEffect(function () {
     if (!props.onViewDateChange && !viewStateChanged.current) {
       setValue(props.value);
@@ -12596,12 +12872,16 @@ var Calendar = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespace
     if (Array.isArray(prevPropValue)) {
       prevPropValue = prevPropValue[0];
     }
+    var viewDate = props.viewDate && isValidDate(props.viewDate) ? props.viewDate : propValue && isValidDate(propValue) ? propValue : new Date();
+    if (isClearClicked.current && props.showTime) {
+      viewDate.setHours(0, 0, 0);
+      isClearClicked.current = false;
+    }
     if (!prevPropValue && propValue || propValue && propValue instanceof Date && propValue.getTime() !== prevPropValue.getTime()) {
-      var viewDate = props.viewDate && isValidDate(props.viewDate) ? props.viewDate : propValue && isValidDate(propValue) ? propValue : new Date();
       validateDate(viewDate);
-      setViewDateState(viewDate);
-      viewStateChanged.current = true;
     }
+    setViewDateState(viewDate);
+    viewStateChanged.current = true;
   };
   var createBackwardNavigator = function createBackwardNavigator(isVisible) {
     var navigatorProps = isVisible ? {
@@ -12621,9 +12901,15 @@ var Calendar = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespace
     var backwardNavigatorIcon = IconUtils.getJSXIcon(icon, _objectSpread$1z({}, previousIconProps), {
       props: props
     });
+    var _localeOptions4 = localeOptions(props.locale),
+      prevDecade = _localeOptions4.prevDecade,
+      prevYear = _localeOptions4.prevYear,
+      prevMonth = _localeOptions4.prevMonth;
+    var previousButtonLabel = currentView === 'year' ? prevDecade : currentView === 'month' ? prevYear : prevMonth;
     var previousButtonProps = mergeProps(_objectSpread$1z({
       type: 'button',
-      className: cx('previousButton')
+      className: cx('previousButton'),
+      'aria-label': previousButtonLabel
     }, navigatorProps), ptm('previousButton'));
     return /*#__PURE__*/React__namespace.createElement("button", _extends({
       ref: previousButton
@@ -12647,9 +12933,15 @@ var Calendar = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespace
     var forwardNavigatorIcon = IconUtils.getJSXIcon(icon, _objectSpread$1z({}, nextIconProps), {
       props: props
     });
+    var _localeOptions5 = localeOptions(props.locale),
+      nextDecade = _localeOptions5.nextDecade,
+      nextYear = _localeOptions5.nextYear,
+      nextMonth = _localeOptions5.nextMonth;
+    var nextButtonLabel = currentView === 'year' ? nextDecade : currentView === 'month' ? nextYear : nextMonth;
     var nextButtonProps = mergeProps(_objectSpread$1z({
       type: 'button',
-      className: cx('nextButton')
+      className: cx('nextButton'),
+      'aria-label': nextButtonLabel
     }, navigatorProps), ptm('nextButton'));
     return /*#__PURE__*/React__namespace.createElement("button", _extends({
       ref: nextButton
@@ -12706,6 +12998,8 @@ var Calendar = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespace
     }
     var monthTitleProps = mergeProps({
       className: cx('monthTitle'),
+      onKeyDown: onContainerButtonKeydown,
+      'aria-label': localeOption('chooseMonth', props.locale),
       onClick: switchToMonthView,
       disabled: switchViewButtonDisabled()
     }, ptm('monthTitle'));
@@ -12764,6 +13058,7 @@ var Calendar = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespace
     var displayYear = props.numberOfMonths > 1 ? metaYear : currentYear;
     var yearTitleProps = mergeProps({
       className: cx('yearTitle'),
+      'aria-label': localeOption('chooseYear', props.locale),
       onClick: function onClick(e) {
         return switchToYearView(e);
       },
@@ -12822,25 +13117,33 @@ var Calendar = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespace
   };
   var createDateCellContent = function createDateCellContent(date, className, groupIndex) {
     var content = props.dateTemplate ? props.dateTemplate(date) : date.day;
+    var selected = isSelected(date);
     var dayLabelProps = mergeProps({
       className: cx('dayLabel', {
         className: className
       }),
+      'aria-selected': selected,
+      'aria-disabled': !date.selectable,
       onClick: function onClick(e) {
         return onDateSelect(e, date);
       },
       onKeyDown: function onKeyDown(e) {
         return onDateCellKeydown(e, date, groupIndex);
       },
-      'data-p-highlight': isSelected(date),
+      'data-p-highlight': selected,
       'data-p-disabled': !date.selectable
     }, ptm('dayLabel', {
       context: {
-        selected: isSelected(date),
+        selected: selected,
         disabled: !date.selectable
       }
     }));
-    return /*#__PURE__*/React__namespace.createElement("span", dayLabelProps, content);
+    return /*#__PURE__*/React__namespace.createElement("span", dayLabelProps, content, selected && /*#__PURE__*/React__namespace.createElement("div", {
+      "aria-live": "polite",
+      className: "p-hidden-accessible",
+      "data-p-hidden-accessible": true,
+      pt: ptm('hiddenSelectedDay')
+    }));
   };
   var createWeek = function createWeek(weekDates, weekNumber, groupIndex) {
     var week = weekDates.map(function (date) {
@@ -12854,6 +13157,7 @@ var Calendar = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespace
         className: cx('day', {
           date: date
         }),
+        'aria-label': date.day,
         'data-p-today': date.today,
         'data-p-other-month': date.otherMonth
       }, ptm('day', {
@@ -12902,6 +13206,7 @@ var Calendar = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespace
       key: UniqueComponentId('calendar_container_')
     }, ptm('container'));
     var tableProps = mergeProps({
+      role: 'grid',
       className: cx('table')
     }, ptm('table'));
     var tableHeaderProps = mergeProps(ptm('tableHeader'));
@@ -13005,6 +13310,9 @@ var Calendar = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespace
       if (hour === 0) hour = 12;else if (hour > 11 && hour !== 12) hour = hour - 12;
     }
     var hourProps = mergeProps(ptm('hour'));
+    var _localeOptions6 = localeOptions(props.locale),
+      nextHour = _localeOptions6.nextHour,
+      prevHour = _localeOptions6.prevHour;
     var hourDisplay = hour < 10 ? '0' + hour : hour;
     var hourPickerProps = mergeProps({
       className: cx('hourPicker')
@@ -13012,26 +13320,30 @@ var Calendar = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespace
     var incrementButtonProps = mergeProps({
       type: 'button',
       className: cx('incrementButton'),
+      'aria-label': nextHour,
       onMouseDown: function onMouseDown(e) {
         return onTimePickerElementMouseDown(e, 0, 1);
       },
       onMouseUp: onTimePickerElementMouseUp,
       onMouseLeave: onTimePickerElementMouseLeave,
       onKeyDown: function onKeyDown(e) {
-        return onContainerButtonKeydown(e);
-      }
+        return onPickerKeyDown(e, 0, 1);
+      },
+      onKeyUp: onPickerKeyUp
     }, ptm('incrementButton'));
     var decrementButtonProps = mergeProps({
       type: 'button',
       className: cx('decrementButton'),
+      'aria-label': prevHour,
       onMouseDown: function onMouseDown(e) {
         return onTimePickerElementMouseDown(e, 0, -1);
       },
       onMouseUp: onTimePickerElementMouseUp,
       onMouseLeave: onTimePickerElementMouseLeave,
       onKeyDown: function onKeyDown(e) {
-        return onContainerButtonKeydown(e);
-      }
+        return onPickerKeyDown(e, 0, -1);
+      },
+      onKeyUp: onPickerKeyUp
     }, ptm('decrementButton'));
     return /*#__PURE__*/React__namespace.createElement("div", hourPickerProps, /*#__PURE__*/React__namespace.createElement("button", incrementButtonProps, incrementIcon, /*#__PURE__*/React__namespace.createElement(Ripple, null)), /*#__PURE__*/React__namespace.createElement("span", hourProps, hourDisplay), /*#__PURE__*/React__namespace.createElement("button", decrementButtonProps, decrementIcon, /*#__PURE__*/React__namespace.createElement(Ripple, null)));
   };
@@ -13040,6 +13352,9 @@ var Calendar = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespace
     var minute = doStepMinute(currentTime.getMinutes());
     minute = minute > 59 ? minute - 60 : minute;
     var minuteProps = mergeProps(ptm('minute'));
+    var _localeOptions7 = localeOptions(props.locale),
+      nextMinute = _localeOptions7.nextMinute,
+      prevMinute = _localeOptions7.prevMinute;
     var minuteDisplay = minute < 10 ? '0' + minute : minute;
     var minutePickerProps = mergeProps({
       className: cx('minutePicker')
@@ -13047,32 +13362,39 @@ var Calendar = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespace
     var incrementButtonProps = mergeProps({
       type: 'button',
       className: cx('incrementButton'),
+      'aria-label': nextMinute,
       onMouseDown: function onMouseDown(e) {
         return onTimePickerElementMouseDown(e, 1, 1);
       },
       onMouseUp: onTimePickerElementMouseUp,
       onMouseLeave: onTimePickerElementMouseLeave,
       onKeyDown: function onKeyDown(e) {
-        return onContainerButtonKeydown(e);
-      }
+        return onPickerKeyDown(e, 1, 1);
+      },
+      onKeyUp: onPickerKeyUp
     }, ptm('incrementButton'));
     var decrementButtonProps = mergeProps({
       type: 'button',
       className: cx('decrementButton'),
+      'aria-label': prevMinute,
       onMouseDown: function onMouseDown(e) {
         return onTimePickerElementMouseDown(e, 1, -1);
       },
       onMouseUp: onTimePickerElementMouseUp,
       onMouseLeave: onTimePickerElementMouseLeave,
       onKeyDown: function onKeyDown(e) {
-        return onContainerButtonKeydown(e);
-      }
+        return onPickerKeyDown(e, 1, -1);
+      },
+      onKeyUp: onPickerKeyUp
     }, ptm('decrementButton'));
     return /*#__PURE__*/React__namespace.createElement("div", minutePickerProps, /*#__PURE__*/React__namespace.createElement("button", incrementButtonProps, incrementIcon, /*#__PURE__*/React__namespace.createElement(Ripple, null)), /*#__PURE__*/React__namespace.createElement("span", minuteProps, minuteDisplay), /*#__PURE__*/React__namespace.createElement("button", decrementButtonProps, decrementIcon, /*#__PURE__*/React__namespace.createElement(Ripple, null)));
   };
   var createSecondPicker = function createSecondPicker() {
     if (props.showSeconds) {
       var currentTime = getCurrentDateTime();
+      var _localeOptions8 = localeOptions(props.locale),
+        nextSecond = _localeOptions8.nextSecond,
+        prevSecond = _localeOptions8.prevSecond;
       var secondProps = mergeProps(ptm('second'));
       var second = currentTime.getSeconds();
       var secondDisplay = second < 10 ? '0' + second : second;
@@ -13082,26 +13404,30 @@ var Calendar = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespace
       var incrementButtonProps = mergeProps({
         type: 'button',
         className: cx('incrementButton'),
+        'aria-label': nextSecond,
         onMouseDown: function onMouseDown(e) {
           return onTimePickerElementMouseDown(e, 2, 1);
         },
         onMouseUp: onTimePickerElementMouseUp,
         onMouseLeave: onTimePickerElementMouseLeave,
         onKeyDown: function onKeyDown(e) {
-          return onContainerButtonKeydown(e);
-        }
+          return onPickerKeyDown(e, 2, 1);
+        },
+        onKeyUp: onPickerKeyUp
       }, ptm('incrementButton'));
       var decrementButtonProps = mergeProps({
         type: 'button',
         className: cx('decrementButton'),
+        'aria-label': prevSecond,
         onMouseDown: function onMouseDown(e) {
           return onTimePickerElementMouseDown(e, 2, -1);
         },
         onMouseUp: onTimePickerElementMouseUp,
         onMouseLeave: onTimePickerElementMouseLeave,
         onKeyDown: function onKeyDown(e) {
-          return onContainerButtonKeydown(e);
-        }
+          return onPickerKeyDown(e, 2, -1);
+        },
+        onKeyUp: onPickerKeyUp
       }, ptm('decrementButton'));
       return /*#__PURE__*/React__namespace.createElement("div", secondPickerProps, /*#__PURE__*/React__namespace.createElement("button", incrementButtonProps, incrementIcon, /*#__PURE__*/React__namespace.createElement(Ripple, null)), /*#__PURE__*/React__namespace.createElement("span", secondProps, secondDisplay), /*#__PURE__*/React__namespace.createElement("button", decrementButtonProps, decrementIcon, /*#__PURE__*/React__namespace.createElement(Ripple, null)));
     }
@@ -13110,6 +13436,9 @@ var Calendar = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespace
   var createMiliSecondPicker = function createMiliSecondPicker() {
     if (props.showMillisec) {
       var currentTime = getCurrentDateTime();
+      var _localeOptions9 = localeOptions(props.locale),
+        nextMilliSecond = _localeOptions9.nextMilliSecond,
+        prevMilliSecond = _localeOptions9.prevMilliSecond;
       var millisecondProps = mergeProps(ptm('millisecond'));
       var millisecond = currentTime.getMilliseconds();
       var millisecondDisplay = millisecond < 100 ? (millisecond < 10 ? '00' : '0') + millisecond : millisecond;
@@ -13119,26 +13448,30 @@ var Calendar = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespace
       var incrementButtonProps = mergeProps({
         type: 'button',
         className: cx('incrementButton'),
+        'aria-label': nextMilliSecond,
         onMouseDown: function onMouseDown(e) {
           return onTimePickerElementMouseDown(e, 3, 1);
         },
         onMouseUp: onTimePickerElementMouseUp,
         onMouseLeave: onTimePickerElementMouseLeave,
         onKeyDown: function onKeyDown(e) {
-          return onContainerButtonKeydown(e);
-        }
+          return onPickerKeyDown(e, 3, 1);
+        },
+        onKeyUp: onPickerKeyUp
       }, ptm('incrementButton'));
       var decrementButtonProps = mergeProps({
         type: 'button',
         className: cx('decrementButton'),
+        'aria-label': prevMilliSecond,
         onMouseDown: function onMouseDown(e) {
           return onTimePickerElementMouseDown(e, 3, -1);
         },
         onMouseUp: onTimePickerElementMouseUp,
         onMouseLeave: onTimePickerElementMouseLeave,
         onKeyDown: function onKeyDown(e) {
-          return onContainerButtonKeydown(e);
-        }
+          return onPickerKeyDown(e, 3, -1);
+        },
+        onKeyUp: onPickerKeyUp
       }, ptm('decrementButton'));
       return /*#__PURE__*/React__namespace.createElement("div", millisecondPickerProps, /*#__PURE__*/React__namespace.createElement("button", incrementButtonProps, incrementIcon, /*#__PURE__*/React__namespace.createElement(Ripple, null)), /*#__PURE__*/React__namespace.createElement("span", millisecondProps, millisecondDisplay), /*#__PURE__*/React__namespace.createElement("button", decrementButtonProps, decrementIcon, /*#__PURE__*/React__namespace.createElement(Ripple, null)));
     }
@@ -13147,6 +13480,9 @@ var Calendar = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespace
   var createAmPmPicker = function createAmPmPicker() {
     if (props.hourFormat === '12') {
       var currentTime = getCurrentDateTime();
+      var _localeOptions10 = localeOptions(props.locale),
+        am = _localeOptions10.am,
+        pm = _localeOptions10.pm;
       var hour = currentTime.getHours();
       var display = hour > 11 ? 'PM' : 'AM';
       var ampmProps = mergeProps(ptm('ampm'));
@@ -13156,6 +13492,7 @@ var Calendar = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespace
       var incrementButtonProps = mergeProps({
         type: 'button',
         className: cx('incrementButton'),
+        'aria-label': am,
         onClick: function onClick(e) {
           return toggleAmPm(e);
         }
@@ -13163,6 +13500,7 @@ var Calendar = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespace
       var decrementButtonProps = mergeProps({
         type: 'button',
         className: cx('decrementButton'),
+        'aria-label': pm,
         onClick: function onClick(e) {
           return toggleAmPm(e);
         }
@@ -13194,6 +13532,7 @@ var Calendar = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespace
         id: props.inputId,
         name: props.name,
         type: "text",
+        role: "combobox",
         className: props.inputClassName,
         style: props.inputStyle,
         readOnly: props.readOnlyInput,
@@ -13206,7 +13545,12 @@ var Calendar = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespace
         onFocus: onInputFocus,
         onBlur: onInputBlur,
         onKeyDown: onInputKeyDown,
+        "aria-expanded": overlayVisibleState,
+        "aria-autocomplete": "none",
+        "aria-haspopup": "dialog",
+        "aria-controls": panelId,
         "aria-labelledby": props.ariaLabelledBy,
+        "aria-label": props.ariaLabel,
         inputMode: props.inputMode,
         tooltip: props.tooltip,
         tooltipOptions: props.tooltipOptions,
@@ -13226,6 +13570,10 @@ var Calendar = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespace
         onClick: onButtonClick,
         tabIndex: "-1",
         disabled: props.disabled,
+        "aria-haspopup": "dialog",
+        "aria-label": localeOption('chooseDate', props.locale),
+        "aria-expanded": overlayVisibleState,
+        "aria-controls": panelId,
         className: cx('dropdownButton'),
         pt: ptm('dropdownButton'),
         __parentMetadata: {
@@ -13245,21 +13593,27 @@ var Calendar = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespace
   };
   var createButtonBar = function createButtonBar() {
     if (props.showButtonBar) {
-      var _localeOptions4 = localeOptions(props.locale),
-        today = _localeOptions4.today,
-        clear = _localeOptions4.clear;
+      var _localeOptions11 = localeOptions(props.locale),
+        today = _localeOptions11.today,
+        clear = _localeOptions11.clear,
+        now = _localeOptions11.now;
+      var nowDate = new Date();
+      var isHidden = props.minDate && props.minDate > nowDate || props.maxDate && props.maxDate < nowDate;
       var buttonbarProps = mergeProps({
         className: cx('buttonbar')
       }, ptm('buttonbar'));
       return /*#__PURE__*/React__namespace.createElement("div", buttonbarProps, /*#__PURE__*/React__namespace.createElement(Button, {
         type: "button",
-        label: today,
+        label: props.showTime ? now : today,
         onClick: onTodayButtonClick,
         onKeyDown: function onKeyDown(e) {
           return onContainerButtonKeydown(e);
         },
         className: classNames(props.todayButtonClassName, cx('todayButton')),
-        pt: ptm('todayButton')
+        pt: ptm('todayButton'),
+        style: isHidden ? {
+          visibility: 'hidden'
+        } : undefined
       }), /*#__PURE__*/React__namespace.createElement(Button, {
         type: "button",
         label: clear,
@@ -13289,6 +13643,7 @@ var Calendar = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespace
         className: cx('monthPicker')
       }, ptm('monthPicker'));
       return /*#__PURE__*/React__namespace.createElement("div", monthPickerProps, monthPickerValues().map(function (m, i) {
+        var selected = isMonthSelected(i);
         var monthProps = mergeProps({
           className: cx('month', {
             isMonthSelected: isMonthSelected,
@@ -13303,18 +13658,23 @@ var Calendar = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespace
             return onMonthCellKeydown(event, i);
           },
           'data-p-disabled': isMonthYearDisabled(i, currentYear),
-          'data-p-highlight': isMonthSelected(i)
+          'data-p-highlight': selected
         }, ptm('month', {
           context: {
             month: m,
             monthIndex: i,
-            selected: isMonthSelected(i),
+            selected: selected,
             disabled: isMonthYearDisabled(i, currentYear)
           }
         }));
         return /*#__PURE__*/React__namespace.createElement("span", _extends({}, monthProps, {
           key: "month".concat(i + 1)
-        }), m);
+        }), m, selected && /*#__PURE__*/React__namespace.createElement("div", {
+          "aria-live": "polite",
+          className: "p-hidden-accessible",
+          "data-p-hidden-accessible": true,
+          pt: ptm('hiddenMonth')
+        }, m));
       }));
     }
     return null;
@@ -13325,6 +13685,7 @@ var Calendar = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespace
         className: cx('yearPicker')
       }, ptm('yearPicker'));
       return /*#__PURE__*/React__namespace.createElement("div", yearPickerProps, yearPickerValues().map(function (y, i) {
+        var selected = isYearSelected(y);
         var yearProps = mergeProps({
           className: cx('year', {
             isYearSelected: isYearSelected,
@@ -13334,19 +13695,27 @@ var Calendar = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespace
           onClick: function onClick(event) {
             return onYearSelect(event, y);
           },
+          onKeyDown: function onKeyDown(event) {
+            return onYearCellKeydown(event, y);
+          },
           'data-p-highlight': isYearSelected(y),
           'data-p-disabled': isMonthYearDisabled(-1, y)
         }, ptm('year', {
           context: {
             year: y,
             yearIndex: i,
-            selected: isYearSelected(i),
+            selected: selected,
             disabled: isMonthYearDisabled(-1, y)
           }
         }));
         return /*#__PURE__*/React__namespace.createElement("span", _extends({}, yearProps, {
           key: "year".concat(i + 1)
-        }), y);
+        }), y, selected && /*#__PURE__*/React__namespace.createElement("div", {
+          "aria-live": "polite",
+          className: "p-hidden-accessible",
+          "data-p-hidden-accessible": true,
+          pt: ptm('hiddenYear')
+        }, y));
       }));
     }
     return null;
@@ -13373,7 +13742,8 @@ var Calendar = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespace
     id: props.id,
     className: classNames(props.className, cx('root', {
       focusedState: focusedState,
-      isFilled: isFilled
+      isFilled: isFilled,
+      panelVisible: visible
     })),
     style: props.style
   }, CalendarBase.getOtherProps(props), ptm('root'));
@@ -13381,6 +13751,8 @@ var Calendar = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespace
     ref: elementRef
   }, rootProps), content, /*#__PURE__*/React__namespace.createElement(CalendarPanel, {
     hostName: "Calendar",
+    id: panelId,
+    locale: props.locale,
     ref: overlayRef,
     className: panelClassName,
     style: props.panelStyle,
@@ -18590,7 +18962,7 @@ var ContextMenu = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namesp
       menuRef.current.style.top = top + 'px';
     }
   };
-  var createProcessedItems = function createProcessedItems(items, level) {
+  var createProcessedItems = React__namespace.useCallback(function (items, level) {
     var parent = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
     var parentKey = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : '';
     var processedItems = [];
@@ -18609,7 +18981,7 @@ var ContextMenu = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namesp
       processedItems.push(newItem);
     });
     return processedItems;
-  };
+  }, []);
   var onLeafClick = function onLeafClick(event) {
     setResetMenuState(true);
     hide(event);
@@ -18657,11 +19029,11 @@ var ContextMenu = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namesp
       show(currentEvent.current);
     }
   }, [reshowState]);
-  useUpdateEffect(function () {
+  React__namespace.useEffect(function () {
     var itemsToProcess = props.model || [];
     var processed = createProcessedItems(itemsToProcess, 0, null, '');
     setProcessedItems(processed);
-  }, [props.model]);
+  }, [props.model, createProcessedItems]);
   useUpdateEffect(function () {
     var _focusedItemId = focusedItemInfo.index !== -1 ? "".concat(idState).concat(ObjectUtils.isNotEmpty(focusedItemInfo.parentKey) ? '_' + focusedItemInfo.parentKey : '', "_").concat(focusedItemInfo.index) : null;
     setFocusedItemId(_focusedItemId);
@@ -23974,6 +24346,7 @@ var BodyCell = /*#__PURE__*/React__namespace.memo(function (props) {
         var rowEditorSaveButtonProps = mergeProps({
           type: 'button',
           name: 'row-save',
+          'aria-label': ariaLabel$1('saveEdit'),
           onClick: rowEditorProps.onSaveClick,
           className: rowEditorProps.saveClassName,
           tabIndex: props.tabIndex,
@@ -23982,6 +24355,7 @@ var BodyCell = /*#__PURE__*/React__namespace.memo(function (props) {
         var rowEditorCancelButtonProps = mergeProps({
           type: 'button',
           name: 'row-cancel',
+          'aria-label': ariaLabel$1('cancelEdit'),
           onClick: rowEditorProps.onCancelClick,
           className: rowEditorProps.cancelClassName,
           tabIndex: props.tabIndex
@@ -23996,6 +24370,7 @@ var BodyCell = /*#__PURE__*/React__namespace.memo(function (props) {
         var rowEditorInitButtonProps = mergeProps({
           type: 'button',
           name: 'row-edit',
+          'aria-label': ariaLabel$1('editRow'),
           onClick: rowEditorProps.onInitClick,
           className: rowEditorProps.initClassName,
           tabIndex: props.tabIndex,
@@ -29187,7 +29562,7 @@ DataTable.displayName = 'DataTable';
 var classes$M = {
   loadingIcon: 'p-dataview-loading-icon',
   loadingOverlay: 'p-dataview-loading-overlay p-component-overlay',
-  emptyMessage: 'p-col-12 col-12 p-dataview-emptymessage',
+  emptyMessage: 'p-dataview-emptymessage',
   header: 'p-dataview-header',
   footer: 'p-dataview-footer',
   content: 'p-dataview-content',
@@ -29202,7 +29577,7 @@ var classes$M = {
     return classNames('p-dataview p-component', _defineProperty(_defineProperty({}, "p-dataview-".concat(props.layout), !!props.layout), 'p-dataview-loading', props.loading));
   }
 };
-var styles$I = "\n@layer primereact {\n    .p-dataview-loading {\n        position: relative;\n        min-height: 4rem;\n    }\n    \n    .p-dataview .p-dataview-loading-overlay {\n        position: absolute;\n        z-index: 1;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n    }\n}\n";
+var styles$I = "\n@layer primereact {\n    .p-dataview-loading {\n        position: relative;\n        min-height: 4rem;\n    }\n\n    .p-dataview .p-dataview-loading-overlay {\n        position: absolute;\n        z-index: 1;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n    }\n}\n";
 var DataViewBase = ComponentBase.extend({
   defaultProps: {
     __TYPE: 'DataView',
@@ -29236,6 +29611,7 @@ var DataViewBase = ComponentBase.extend({
     loadingIcon: null,
     gutter: false,
     itemTemplate: null,
+    listTemplate: null,
     onPage: null,
     children: undefined
   },
@@ -29258,7 +29634,7 @@ var DataViewLayoutOptionsBase = ComponentBase.extend({
   },
   css: {
     classes: {
-      root: 'p-dataview-layout-options p-selectbutton p-buttonset',
+      root: 'p-dataview p-component p-dataview-layout-options p-selectbutton p-buttonset',
       listButton: function listButton(_ref3) {
         var props = _ref3.props;
         return classNames('p-button p-button-icon-only', {
@@ -29393,6 +29769,15 @@ var DataView = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespace
       setRowsState(event.rows);
     }
   };
+  var getItems = function getItems(value) {
+    if (props.paginator) {
+      var currentFirst = props.lazy ? 0 : first;
+      var totalRecords = getTotalRecords();
+      var last = Math.min(rows + currentFirst, totalRecords);
+      return value.slice(currentFirst, last) || [];
+    }
+    return value;
+  };
   var sort = function sort() {
     if (props.value) {
       // performance optimization to prevent resolving field data in each loop
@@ -29480,23 +29865,8 @@ var DataView = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespace
   };
   var createItems = function createItems(value) {
     if (ObjectUtils.isNotEmpty(value)) {
-      if (props.paginator) {
-        var currentFirst = props.lazy ? 0 : first;
-        var totalRecords = getTotalRecords();
-        var last = Math.min(rows + currentFirst, totalRecords);
-        var items = [];
-        for (var i = currentFirst; i < last; i++) {
-          var val = value[i];
-          val && items.push( /*#__PURE__*/React__namespace.createElement(DataViewItem, {
-            key: getItemRenderKey(value) || i,
-            template: props.itemTemplate,
-            layout: props.layout,
-            item: val
-          }));
-        }
-        return items;
-      }
-      return value.map(function (item, index) {
+      var items = getItems(value);
+      return items.map(function (item, index) {
         return /*#__PURE__*/React__namespace.createElement(DataViewItem, {
           key: getItemRenderKey(item) || index,
           template: props.itemTemplate,
@@ -29508,14 +29878,21 @@ var DataView = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespace
     return createEmptyMessage();
   };
   var createContent = function createContent(value) {
-    var items = createItems(value);
-    var gridProps = mergeProps({
-      className: cx('grid')
-    }, ptm('grid'));
     var contentProps = mergeProps({
       className: cx('content')
     }, ptm('content'));
-    return /*#__PURE__*/React__namespace.createElement("div", contentProps, /*#__PURE__*/React__namespace.createElement("div", gridProps, items));
+    var content = null;
+    if (props.listTemplate) {
+      var items = getItems(value);
+      content = ObjectUtils.getJSXElement(props.listTemplate, items, props.layout);
+    } else {
+      var _items = createItems(value);
+      var gridProps = mergeProps({
+        className: cx('grid')
+      }, ptm('grid'));
+      content = /*#__PURE__*/React__namespace.createElement("div", gridProps, _items);
+    }
+    return /*#__PURE__*/React__namespace.createElement("div", contentProps, content);
   };
   var processData = function processData() {
     var data = props.value;
@@ -38441,7 +38818,7 @@ var Menubar = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespace.
       });
     }
   };
-  var createProcessedItems = function createProcessedItems(items) {
+  var createProcessedItems = React__namespace.useCallback(function (items) {
     var level = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
     var parent = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
     var parentKey = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : '';
@@ -38460,7 +38837,7 @@ var Menubar = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespace.
       _processedItems.push(newItem);
     });
     return _processedItems;
-  };
+  }, []);
   useMountEffect(function () {
     if (!idState) {
       setIdState(UniqueComponentId());
@@ -38477,11 +38854,11 @@ var Menubar = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespace.
       ZIndexUtils.clear(rootMenuRef.current);
     }
   }, [mobileActiveState]);
-  useUpdateEffect(function () {
+  React__namespace.useEffect(function () {
     var itemsToProcess = props.model || [];
     var processed = createProcessedItems(itemsToProcess, 0, null, '');
     setProcessedItems(processed);
-  }, [props.model]);
+  }, [props.model, createProcessedItems]);
   useUpdateEffect(function () {
     var processedItem = activeItemPath.find(function (p) {
       return p.key === focusedItemInfo.parentKey;
@@ -48847,7 +49224,7 @@ var TieredMenu = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespa
       });
     }
   };
-  var createProcessedItems = function createProcessedItems(items) {
+  var createProcessedItems = React__namespace.useCallback(function (items) {
     var level = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
     var parent = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
     var parentKey = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : '';
@@ -48866,7 +49243,7 @@ var TieredMenu = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespa
       processedItems.push(newItem);
     });
     return processedItems;
-  };
+  }, []);
   var createStyle = function createStyle() {
     if (!styleElementRef.current) {
       styleElementRef.current = DomHandler.createInlineStyle(context && context.nonce || PrimeReact.nonce, context && context.styleContainer);
@@ -48922,11 +49299,11 @@ var TieredMenu = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespa
       !attributeSelectorState && setAttributeSelectorState(uniqueId);
     }
   });
-  useUpdateEffect(function () {
+  React__namespace.useEffect(function () {
     var itemsToProcess = props.model || [];
     var processed = createProcessedItems(itemsToProcess);
     setProcessedItems(processed);
-  }, props.model);
+  }, [props.model, createProcessedItems]);
   useUpdateEffect(function () {
     var processedItem = activeItemPath.find(function (p) {
       return p.key === focusedItemInfo.parentKey;
@@ -54927,6 +55304,7 @@ var TreeTableBodyCell = function TreeTableBodyCell(props) {
   var align = getColumnProp('align');
   /* eslint-enable */
   var bodyCellProps = mergeProps({
+    role: 'cell',
     className: classNames(bodyClassName || props.className, cx('bodyCell', {
       bodyProps: props,
       editingState: editingState,
@@ -55022,11 +55400,13 @@ var TreeTableRow = /*#__PURE__*/React__namespace.memo(function (props) {
     event.stopPropagation();
   };
   var expand = function expand(event) {
+    var navigateFocusToChild = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
     var expandedKeys = props.expandedKeys ? _objectSpread$5({}, props.expandedKeys) : {};
     expandedKeys[props.node.key] = true;
     props.onToggle({
       originalEvent: event,
-      value: expandedKeys
+      value: expandedKeys,
+      navigateFocusToChild: navigateFocusToChild
     });
     invokeToggleEvents(event, true);
   };
@@ -55207,49 +55587,147 @@ var TreeTableRow = /*#__PURE__*/React__namespace.memo(function (props) {
       });
     }
   };
-  var _onKeyDown = function onKeyDown(event) {
-    if (event.target === elementRef.current) {
-      var rowElement = event.currentTarget;
-      switch (event.which) {
-        //down arrow
-        case 40:
-          var nextRow = rowElement.nextElementSibling;
-          if (nextRow) {
-            nextRow.focus();
-          }
-          event.preventDefault();
-          break;
+  var _onKeyDown = function onKeyDown(event, item) {
+    switch (event.code) {
+      case 'ArrowDown':
+        onArrowDownKey(event);
+        break;
+      case 'ArrowUp':
+        onArrowUpKey(event);
+        break;
+      case 'ArrowLeft':
+        onArrowLeftKey(event);
+        break;
+      case 'ArrowRight':
+        onArrowRightKey(event);
+        break;
+      case 'Home':
+        onHomeKey(event);
+        break;
+      case 'End':
+        onEndKey(event);
+        break;
+      case 'Enter':
+      case 'NumpadEnter':
+      case 'Space':
+        if (!DomHandler.isClickable(event.target)) {
+          onEnterKey(event);
+        }
+        break;
+      case 'Tab':
+        onTabKey();
+        break;
+    }
+  };
+  var onArrowDownKey = function onArrowDownKey(event) {
+    var nextElementSibling = event.currentTarget.nextElementSibling;
+    nextElementSibling && focusRowChange(event.currentTarget, nextElementSibling);
+    event.preventDefault();
+  };
+  var onArrowUpKey = function onArrowUpKey(event) {
+    var previousElementSibling = event.currentTarget.previousElementSibling;
+    previousElementSibling && focusRowChange(event.currentTarget, previousElementSibling);
+    event.preventDefault();
+  };
+  var onArrowRightKey = function onArrowRightKey(event) {
+    var ishiddenIcon = DomHandler.findSingle(event.currentTarget, 'button').style.visibility === 'hidden';
+    DomHandler.findSingle(elementRef.current, '[data-pc-section="rowtoggler"]');
+    if (ishiddenIcon) return;
 
-        //up arrow
-        case 38:
-          var previousRow = rowElement.previousElementSibling;
-          if (previousRow) {
-            previousRow.focus();
-          }
-          event.preventDefault();
-          break;
+    // !expanded && togglerElement.click();
+    !expanded && expand(event, true);
 
-        //right arrow
-        case 39:
-          if (!expanded) {
-            expand(event);
-          }
-          event.preventDefault();
-          break;
+    // this.$nextTick(() => {
+    //     this.onArrowDownKey(event);
+    // });
 
-        //left arrow
-        case 37:
-          if (expanded) {
-            collapse(event);
-          }
-          event.preventDefault();
-          break;
+    event.preventDefault();
+  };
+  var onArrowLeftKey = function onArrowLeftKey(event) {
+    if (props.level === 0 && !expanded) {
+      return;
+    }
+    var currentTarget = event.currentTarget;
+    var ishiddenIcon = DomHandler.findSingle(currentTarget, 'button').style.visibility === 'hidden';
+    DomHandler.findSingle(currentTarget, '[data-pc-section="rowtoggler"]');
+    if (expanded && !ishiddenIcon) {
+      // togglerElement.click();
+      collapse(event);
+      return;
+    }
+    var target = findBeforeClickableNode(currentTarget);
+    target && focusRowChange(currentTarget, target);
+  };
+  var onHomeKey = function onHomeKey(event) {
+    var findFirstElement = DomHandler.findSingle(event.currentTarget.parentElement, "tr[aria-level=\"".concat(props.level + 1, "\"]"));
+    findFirstElement && DomHandler.focus(findFirstElement);
+    event.preventDefault();
+  };
+  var onEndKey = function onEndKey(event) {
+    var nodes = DomHandler.find(event.currentTarget.parentElement, "tr[aria-level=\"".concat(props.level + 1, "\"]"));
+    var findFirstElement = nodes[nodes.length - 1];
+    DomHandler.focus(findFirstElement);
+    event.preventDefault();
+  };
+  var onEnterKey = function onEnterKey(event) {
+    event.preventDefault();
+    setTabIndexForSelectionMode(event, nodeTouched.current);
+    if (props.selectionMode === 'checkbox') {
+      // this.toggleCheckbox();
+      onCheckboxChange(event);
+      return;
+    }
 
-        //enter
-        case 13:
-          _onClick(event);
-          event.preventDefault();
-          break;
+    // this.$emit('node-click', {
+    //     originalEvent: event,
+    //     nodeTouched: nodeTouched.current,
+    //     node: this.node
+    // });
+
+    props.onRowClick(event, props.node);
+    nodeTouched.current = false;
+  };
+  var onTabKey = function onTabKey() {
+    var rows = _toConsumableArray(DomHandler.find(elementRef.current.parentElement, 'tr'));
+    var hasSelectedRow = rows.some(function (row) {
+      return DomHandler.getAttribute(row, 'data-p-highlight') || row.getAttribute('aria-checked') === 'true';
+    });
+    rows.forEach(function (row) {
+      row.tabIndex = -1;
+    });
+    if (hasSelectedRow) {
+      var selectedNodes = rows.filter(function (node) {
+        return DomHandler.getAttribute(node, 'data-p-highlight') || node.getAttribute('aria-checked') === 'true';
+      });
+      selectedNodes[0].tabIndex = 0;
+      return;
+    }
+    rows[0].tabIndex = 0;
+  };
+  var focusRowChange = function focusRowChange(firstFocusableRow, currentFocusedRow) {
+    firstFocusableRow.tabIndex = '-1';
+    currentFocusedRow.tabIndex = '0';
+    DomHandler.focus(currentFocusedRow);
+  };
+  var findBeforeClickableNode = function findBeforeClickableNode(node) {
+    var prevNode = node.previousElementSibling;
+    if (prevNode) {
+      var prevNodeButton = prevNode.querySelector('button');
+      if (prevNodeButton && prevNodeButton.style.visibility !== 'hidden') {
+        return prevNode;
+      }
+      return findBeforeClickableNode(prevNode);
+    }
+    return null;
+  };
+  var setTabIndexForSelectionMode = function setTabIndexForSelectionMode(event, nodeTouched) {
+    if (props.selectionMode !== null) {
+      var elements = _toConsumableArray(DomHandler.find(elementRef.current.parentElement, 'tr'));
+      event.currentTarget.tabIndex = nodeTouched === false ? -1 : 0;
+      if (elements.every(function (element) {
+        return element.tabIndex === -1;
+      })) {
+        elements[0].tabIndex = 0;
       }
     }
   };
@@ -55434,6 +55912,12 @@ var TreeTableRow = /*#__PURE__*/React__namespace.memo(function (props) {
   var rowProps = mergeProps({
     tabIndex: 0,
     className: className,
+    'aria-expanded': expanded,
+    'aria-level': props.level + 1,
+    'aria-posinset': props.ariaPosInSet,
+    'aria-setsize': props.ariaSetSize,
+    'aria-checked': isChecked(),
+    'aria-selected': isSelected(),
     style: props.node.style,
     onClick: function onClick(e) {
       return _onClick(e);
@@ -55625,6 +56109,8 @@ var TreeTableBody = /*#__PURE__*/React__namespace.memo(function (props) {
       key: "".concat(node.key || JSON.stringify(node.data), "_").concat(index),
       level: 0,
       rowIndex: index,
+      ariaSetSize: props.value.length,
+      ariaPosInSet: index + 1,
       selectOnEdit: props.selectOnEdit,
       node: node,
       originalOptions: props.originalOptions,
@@ -55688,6 +56174,7 @@ var TreeTableBody = /*#__PURE__*/React__namespace.memo(function (props) {
   };
   var content = props.value && props.value.length ? createRows() : createEmptyMessage();
   var tbodyProps = mergeProps({
+    role: 'rowgroup',
     className: cx('tbody')
   }, getPTOptions('tbody'));
   return /*#__PURE__*/React__namespace.createElement("tbody", tbodyProps, content);
@@ -55734,7 +56221,8 @@ var TreeTableFooter = /*#__PURE__*/React__namespace.memo(function (props) {
     var rowColumns = React__namespace.Children.toArray(RowBase.getCProp(row, 'children'));
     var rowFooterCells = rowColumns.map(createFooterCell);
     var footerRowProps = mergeProps(ptm('footerRow', {
-      hostName: props.hostName
+      hostName: props.hostName,
+      role: 'row'
     }));
     return /*#__PURE__*/React__namespace.createElement("tr", _extends({}, footerRowProps, {
       key: index
@@ -55763,6 +56251,7 @@ var TreeTableFooter = /*#__PURE__*/React__namespace.memo(function (props) {
   var content = props.columnGroup ? createColumnGroup() : createColumns(props.columns);
   if (hasFooter()) {
     var tfootProps = mergeProps({
+      role: 'rowgroup',
       className: cx('tfoot')
     }, ptm('tfoot', {
       hostName: props.hostName
@@ -55823,7 +56312,7 @@ var TreeTableHeader = /*#__PURE__*/React__namespace.memo(function (props) {
     }
   };
   var onHeaderKeyDown = function onHeaderKeyDown(event, column) {
-    if (event.key === 'Enter') {
+    if (event.key === 'Enter' && event.key === 'Space') {
       onHeaderClick(event, column);
       event.preventDefault();
     }
@@ -55997,6 +56486,7 @@ var TreeTableHeader = /*#__PURE__*/React__namespace.memo(function (props) {
     if (options.filterOnly) {
       var frozen = getColumnProp(column, 'frozen');
       var headerCellProps = mergeProps({
+        role: 'columnheader',
         key: getColumnProp(column, 'columnKey') || getColumnProp(column, 'field') || options.index,
         className: classNames(cx('headerCell', {
           options: options,
@@ -56028,11 +56518,14 @@ var TreeTableHeader = /*#__PURE__*/React__namespace.memo(function (props) {
       var sortIconElement = createSortIcon(column, sorted, sortOrder);
       var ariaSortData = getAriaSort(column, sorted, sortOrder);
       var sortBadge = createSortBadge(column, sortMetaDataIndex);
+      var ariaSort = sorted ? sortOrder ? sortOrder < 0 ? 'descending' : 'ascending' : 'none' : null;
       var headerTooltip = getColumnProp(column, 'headerTooltip');
       var hasTooltip = ObjectUtils.isNotEmpty(headerTooltip);
       var title = createTitle(column, options);
       var resizer = createResizer(column);
-      var _headerCellProps = mergeProps({
+      var sortable = getColumnProp(column, 'sortable');
+      var _headerCellProps = mergeProps(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({
+        role: 'columnheader',
         className: classNames(getColumnProp(column, 'headerClassName') || getColumnProp(column, 'className'), cx('headerCell', {
           headerProps: props,
           frozen: _frozen,
@@ -56043,7 +56536,8 @@ var TreeTableHeader = /*#__PURE__*/React__namespace.memo(function (props) {
           align: align
         })),
         style: getColumnProp(column, 'headerStyle') || getColumnProp(column, 'style'),
-        tabIndex: getColumnProp(column, 'sortable') ? props.tabIndex : null,
+        tabIndex: sortable ? props.tabIndex : null,
+        'aria-sort': ariaSort,
         onClick: function onClick(e) {
           return onHeaderClick(e, column);
         },
@@ -56054,25 +56548,16 @@ var TreeTableHeader = /*#__PURE__*/React__namespace.memo(function (props) {
           return onHeaderKeyDown(e, column);
         },
         rowSpan: getColumnProp(column, 'rowSpan'),
-        colSpan: getColumnProp(column, 'colSpan'),
-        'aria-sort': ariaSortData,
-        onDragStart: function onDragStart(e) {
-          return _onDragStart(e, column);
-        },
-        onDragOver: function onDragOver(e) {
-          return _onDragOver(e, column);
-        },
-        onDragLeave: function onDragLeave(e) {
-          return _onDragLeave(e, column);
-        },
-        onDrop: function onDrop(e) {
-          return _onDrop(e, column);
-        },
-        'data-p-sortable-column': getColumnProp(column, 'sortable'),
-        'data-p-resizable-column': props.resizableColumns,
-        'data-p-highlight': sorted,
-        'data-p-frozen-column': getColumnProp(column, 'frozen')
-      }, getColumnPTOptions(column, 'root'), getColumnPTOptions(column, 'headerCell', {
+        colSpan: getColumnProp(column, 'colSpan')
+      }, "aria-sort", ariaSortData), "onDragStart", function onDragStart(e) {
+        return _onDragStart(e, column);
+      }), "onDragOver", function onDragOver(e) {
+        return _onDragOver(e, column);
+      }), "onDragLeave", function onDragLeave(e) {
+        return _onDragLeave(e, column);
+      }), "onDrop", function onDrop(e) {
+        return _onDrop(e, column);
+      }), 'data-p-sortable-column', sortable), 'data-p-resizable-column', props.resizableColumns), 'data-p-highlight', sorted), 'data-p-frozen-column', getColumnProp(column, 'frozen')), getColumnPTOptions(column, 'root'), getColumnPTOptions(column, 'headerCell', {
         context: {
           sorted: sorted,
           frozen: _frozen,
@@ -56107,7 +56592,9 @@ var TreeTableHeader = /*#__PURE__*/React__namespace.memo(function (props) {
     var headerRowProps = mergeProps(ptm('headerRow', {
       hostName: props.hostName
     }));
-    return /*#__PURE__*/React__namespace.createElement("tr", _extends({}, headerRowProps, {
+    return /*#__PURE__*/React__namespace.createElement("tr", _extends({
+      role: "row"
+    }, headerRowProps, {
       key: index
     }), rowHeaderCells);
   };
@@ -56118,7 +56605,8 @@ var TreeTableHeader = /*#__PURE__*/React__namespace.memo(function (props) {
   var createColumns = function createColumns(columns) {
     if (columns) {
       var headerRowProps = mergeProps(ptm('headerRow', {
-        hostName: props.hostName
+        hostName: props.hostName,
+        role: 'row'
       }));
       if (hasColumnFilter(columns)) {
         return /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, /*#__PURE__*/React__namespace.createElement("tr", headerRowProps, columns.map(function (col, i) {
@@ -56135,7 +56623,9 @@ var TreeTableHeader = /*#__PURE__*/React__namespace.memo(function (props) {
           });
         })));
       } else {
-        return /*#__PURE__*/React__namespace.createElement("tr", headerRowProps, columns.map(function (col, i) {
+        return /*#__PURE__*/React__namespace.createElement("tr", _extends({
+          role: "row"
+        }, headerRowProps), columns.map(function (col, i) {
           return createHeaderCell(col, {
             index: i,
             filterOnly: false,
@@ -56149,6 +56639,7 @@ var TreeTableHeader = /*#__PURE__*/React__namespace.memo(function (props) {
   };
   var content = props.columnGroup ? createColumnGroup() : createColumns(props.columns);
   var theadProps = mergeProps({
+    role: 'rowgroup',
     className: cx('thead')
   }, ptm('thead', {
     hostName: props.hostName
@@ -56399,6 +56890,7 @@ var TreeTable = /*#__PURE__*/React__namespace.forwardRef(function (inProps, ref)
   var columnSortable = React__namespace.useRef(null);
   var columnSortFunction = React__namespace.useRef(null);
   var columnField = React__namespace.useRef(null);
+  var childFocusEvent = React__namespace.useRef(null);
   var _useEventListener = useEventListener({
       type: 'mousemove',
       listener: function listener(event) {
@@ -56423,10 +56915,19 @@ var TreeTable = /*#__PURE__*/React__namespace.forwardRef(function (inProps, ref)
     bindDocumentMouseUpListener = _useEventListener4[0],
     unbindDocumentMouseUpListener = _useEventListener4[1];
   var onToggle = function onToggle(event) {
+    var originalEvent = event.originalEvent,
+      value = event.value,
+      navigateFocusToChild = event.navigateFocusToChild;
     if (props.onToggle) {
-      props.onToggle(event);
+      props.onToggle({
+        originalEvent: originalEvent,
+        value: value
+      });
     } else {
-      setExpandedKeysState(event.value);
+      if (navigateFocusToChild) {
+        childFocusEvent.current = originalEvent;
+      }
+      setExpandedKeysState(value);
     }
   };
   var onPageChange = function onPageChange(event) {
@@ -57129,6 +57630,17 @@ var TreeTable = /*#__PURE__*/React__namespace.forwardRef(function (inProps, ref)
     }
     return data;
   };
+  useUpdateEffect(function () {
+    if (childFocusEvent.current) {
+      var nodeElement = childFocusEvent.current.target;
+      var nextElementSibling = nodeElement.nextElementSibling;
+      if (nextElementSibling) {
+        nodeElement.tabIndex = '-1';
+        nextElementSibling.tabIndex = '0';
+        DomHandler.focus(nextElementSibling);
+      }
+    }
+  }, [expandedKeysState]);
   React__namespace.useImperativeHandle(ref, function () {
     return {
       props: props,
@@ -57278,6 +57790,7 @@ var TreeTable = /*#__PURE__*/React__namespace.forwardRef(function (inProps, ref)
       className: ptCallbacks.cx('wrapper')
     }, ptCallbacks.ptm('wrapper'));
     var tableProps = mergeProps({
+      role: 'table',
       style: props.tableStyle,
       className: classNames(props.tableClassName, ptCallbacks.cx('table'))
     }, ptCallbacks.ptm('table'));
@@ -57361,6 +57874,7 @@ var TreeTable = /*#__PURE__*/React__namespace.forwardRef(function (inProps, ref)
     ref: reorderIndicatorDownRef
   }, reorderIndicatorDownProps), reorderIndicatorDownIcon);
   var rootProps = mergeProps({
+    role: 'table',
     id: props.id,
     className: classNames(props.className, ptCallbacks.cx('root', {
       isRowSelectionMode: isRowSelectionMode