primereact 10.3.2 → 10.3.3

package/primereact.all.js

@@ -2812,7 +2812,27 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
       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,
@@ -10018,13 +10038,14 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
   }));
   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',
@@ -10103,6 +10124,7 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
       __TYPE: 'Calendar',
       appendTo: null,
       ariaLabelledBy: null,
+      ariaLabel: null,
       autoZIndex: true,
       autoFocus: false,
       baseZIndex: 0,
@@ -10210,6 +10232,10 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
           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', {
@@ -10266,6 +10292,10 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
       _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: {
@@ -10294,26 +10324,29 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
     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,
@@ -10321,7 +10354,7 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
           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;
         },
@@ -10351,21 +10384,34 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
       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) {
@@ -10428,28 +10474,40 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
       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();
@@ -10482,7 +10540,7 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
     };
     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) {
@@ -10500,6 +10558,27 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
         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();
@@ -10629,6 +10708,7 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
       props.onTodayButtonClick && props.onTodayButtonClick(event);
     };
     var onClearButtonClick = function onClearButtonClick(event) {
+      isClearClicked.current = true;
       updateModel(event, null);
       updateInputfield(null);
       hide();
@@ -11110,23 +11190,29 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
     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 = {
@@ -11137,46 +11223,58 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
             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);
@@ -11184,19 +11282,23 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
             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);
@@ -11204,27 +11306,75 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
             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;
           }
       }
@@ -11251,18 +11401,18 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
           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;
@@ -11275,51 +11425,162 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
             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;
@@ -11436,10 +11697,16 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
       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();
     };
@@ -11580,7 +11847,6 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
     var onOverlayEntered = function onOverlayEntered() {
       bindOverlayListener();
       props.onShow && props.onShow();
-      DomHandler.focusFirstElement(overlayRef.current);
       setFocusedState(false);
     };
     var onOverlayExit = function onOverlayExit() {
@@ -12451,6 +12717,10 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
       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) {
@@ -12498,8 +12768,14 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
       // 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);
@@ -12590,12 +12866,16 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
       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 ? {
@@ -12615,9 +12895,15 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
       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
@@ -12641,9 +12927,15 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
       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
@@ -12700,6 +12992,8 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
       }
       var monthTitleProps = mergeProps({
         className: cx('monthTitle'),
+        onKeyDown: onContainerButtonKeydown,
+        'aria-label': localeOption('chooseMonth', props.locale),
         onClick: switchToMonthView,
         disabled: switchViewButtonDisabled()
       }, ptm('monthTitle'));
@@ -12758,6 +13052,7 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
       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);
         },
@@ -12816,25 +13111,33 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
     };
     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) {
@@ -12848,6 +13151,7 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
           className: cx('day', {
             date: date
           }),
+          'aria-label': date.day,
           'data-p-today': date.today,
           'data-p-other-month': date.otherMonth
         }, ptm('day', {
@@ -12896,6 +13200,7 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
         key: UniqueComponentId('calendar_container_')
       }, ptm('container'));
       var tableProps = mergeProps({
+        role: 'grid',
         className: cx('table')
       }, ptm('table'));
       var tableHeaderProps = mergeProps(ptm('tableHeader'));
@@ -12999,6 +13304,9 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
         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')
@@ -13006,26 +13314,30 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
       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)));
     };
@@ -13034,6 +13346,9 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
       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')
@@ -13041,32 +13356,39 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
       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;
@@ -13076,26 +13398,30 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
         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)));
       }
@@ -13104,6 +13430,9 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
     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;
@@ -13113,26 +13442,30 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
         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)));
       }
@@ -13141,6 +13474,9 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
     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'));
@@ -13150,6 +13486,7 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
         var incrementButtonProps = mergeProps({
           type: 'button',
           className: cx('incrementButton'),
+          'aria-label': am,
           onClick: function onClick(e) {
             return toggleAmPm(e);
           }
@@ -13157,6 +13494,7 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
         var decrementButtonProps = mergeProps({
           type: 'button',
           className: cx('decrementButton'),
+          'aria-label': pm,
           onClick: function onClick(e) {
             return toggleAmPm(e);
           }
@@ -13188,6 +13526,7 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
           id: props.inputId,
           name: props.name,
           type: "text",
+          role: "combobox",
           className: props.inputClassName,
           style: props.inputStyle,
           readOnly: props.readOnlyInput,
@@ -13200,7 +13539,12 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
           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,
@@ -13220,6 +13564,10 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
           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: {
@@ -13239,21 +13587,27 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
     };
     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,
@@ -13283,6 +13637,7 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
           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,
@@ -13297,18 +13652,23 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
               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;
@@ -13319,6 +13679,7 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
           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,
@@ -13328,19 +13689,27 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
             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;
@@ -13367,7 +13736,8 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
       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'));
@@ -13375,6 +13745,8 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
       ref: elementRef
     }, rootProps), content, /*#__PURE__*/React__namespace.createElement(CalendarPanel, {
       hostName: "Calendar",
+      id: panelId,
+      locale: props.locale,
       ref: overlayRef,
       className: panelClassName,
       style: props.panelStyle,
@@ -18584,7 +18956,7 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
         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 = [];
@@ -18603,7 +18975,7 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
         processedItems.push(newItem);
       });
       return processedItems;
-    };
+    }, []);
     var onLeafClick = function onLeafClick(event) {
       setResetMenuState(true);
       hide(event);
@@ -18651,11 +19023,11 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
         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);
@@ -23968,6 +24340,7 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
           var rowEditorSaveButtonProps = mergeProps({
             type: 'button',
             name: 'row-save',
+            'aria-label': ariaLabel$1('saveEdit'),
             onClick: rowEditorProps.onSaveClick,
             className: rowEditorProps.saveClassName,
             tabIndex: props.tabIndex,
@@ -23976,6 +24349,7 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
           var rowEditorCancelButtonProps = mergeProps({
             type: 'button',
             name: 'row-cancel',
+            'aria-label': ariaLabel$1('cancelEdit'),
             onClick: rowEditorProps.onCancelClick,
             className: rowEditorProps.cancelClassName,
             tabIndex: props.tabIndex
@@ -23990,6 +24364,7 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
           var rowEditorInitButtonProps = mergeProps({
             type: 'button',
             name: 'row-edit',
+            'aria-label': ariaLabel$1('editRow'),
             onClick: rowEditorProps.onInitClick,
             className: rowEditorProps.initClassName,
             tabIndex: props.tabIndex,
@@ -29181,7 +29556,7 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
   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',
@@ -29196,7 +29571,7 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
       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',
@@ -29230,6 +29605,7 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
       loadingIcon: null,
       gutter: false,
       itemTemplate: null,
+      listTemplate: null,
       onPage: null,
       children: undefined
     },
@@ -29252,7 +29628,7 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
     },
     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', {
@@ -29387,6 +29763,15 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
         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
@@ -29474,23 +29859,8 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
     };
     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,
@@ -29502,14 +29872,21 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
       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;
@@ -38435,7 +38812,7 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
         });
       }
     };
-    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] : '';
@@ -38454,7 +38831,7 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
         _processedItems.push(newItem);
       });
       return _processedItems;
-    };
+    }, []);
     useMountEffect(function () {
       if (!idState) {
         setIdState(UniqueComponentId());
@@ -38471,11 +38848,11 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
         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;
@@ -48841,7 +49218,7 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
         });
       }
     };
-    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] : '';
@@ -48860,7 +49237,7 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
         processedItems.push(newItem);
       });
       return processedItems;
-    };
+    }, []);
     var createStyle = function createStyle() {
       if (!styleElementRef.current) {
         styleElementRef.current = DomHandler.createInlineStyle(context && context.nonce || PrimeReact.nonce, context && context.styleContainer);
@@ -48916,11 +49293,11 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
         !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;
@@ -54921,6 +55298,7 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
     var align = getColumnProp('align');
     /* eslint-enable */
     var bodyCellProps = mergeProps({
+      role: 'cell',
       className: classNames(bodyClassName || props.className, cx('bodyCell', {
         bodyProps: props,
         editingState: editingState,
@@ -55016,11 +55394,13 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
       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);
     };
@@ -55201,49 +55581,147 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
         });
       }
     };
-    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;
         }
       }
     };
@@ -55428,6 +55906,12 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
     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);
@@ -55619,6 +56103,8 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
         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,
@@ -55682,6 +56168,7 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
     };
     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);
@@ -55728,7 +56215,8 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
       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
@@ -55757,6 +56245,7 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
     var content = props.columnGroup ? createColumnGroup() : createColumns(props.columns);
     if (hasFooter()) {
       var tfootProps = mergeProps({
+        role: 'rowgroup',
         className: cx('tfoot')
       }, ptm('tfoot', {
         hostName: props.hostName
@@ -55817,7 +56306,7 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
       }
     };
     var onHeaderKeyDown = function onHeaderKeyDown(event, column) {
-      if (event.key === 'Enter') {
+      if (event.key === 'Enter' && event.key === 'Space') {
         onHeaderClick(event, column);
         event.preventDefault();
       }
@@ -55991,6 +56480,7 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
       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,
@@ -56022,11 +56512,14 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
         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,
@@ -56037,7 +56530,8 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
             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);
           },
@@ -56048,25 +56542,16 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
             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,
@@ -56101,7 +56586,9 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
       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);
     };
@@ -56112,7 +56599,8 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
     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) {
@@ -56129,7 +56617,9 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
             });
           })));
         } 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,
@@ -56143,6 +56633,7 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
     };
     var content = props.columnGroup ? createColumnGroup() : createColumns(props.columns);
     var theadProps = mergeProps({
+      role: 'rowgroup',
       className: cx('thead')
     }, ptm('thead', {
       hostName: props.hostName
@@ -56393,6 +56884,7 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
     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) {
@@ -56417,10 +56909,19 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
       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) {
@@ -57123,6 +57624,17 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
       }
       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,
@@ -57272,6 +57784,7 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
         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'));
@@ -57355,6 +57868,7 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
       ref: reorderIndicatorDownRef
     }, reorderIndicatorDownProps), reorderIndicatorDownIcon);
     var rootProps = mergeProps({
+      role: 'table',
       id: props.id,
       className: classNames(props.className, ptCallbacks.cx('root', {
         isRowSelectionMode: isRowSelectionMode