@pega/lists-react 8.0.0-build.27.14

package/lib/Core/Views/Table/TableA11y.js

@@ -0,0 +1,638 @@
+import { BaseA11y, rowErrorColumnMeta } from 'pega-repeating-structures-core';
+const sortOrder = {
+    row: 'aria-rowindex',
+    column: 'aria-colindex'
+};
+const TAB_INDEX = 'tabindex';
+const DATA_INDEX = 'data-index';
+const HEADER_MENU = '.header-menu';
+const HEADER = 'header';
+function gainFocus(element) {
+    element.setAttribute(TAB_INDEX, 0);
+    element.focus();
+}
+function getHeaderColumnToFocusOnCtrlHome(columns) {
+    return columns.find(column => {
+        return !!column.querySelector(HEADER_MENU);
+    });
+}
+function setFocusToFocusableElementOrCell(focusableElements, cell) {
+    if (focusableElements.length === 1)
+        focusableElements[0].focus();
+    else
+        gainFocus(cell);
+}
+class TableA11y extends BaseA11y {
+    constructor(selectors, focusableSelectors, 
+    // eslint-disable-next-line default-param-last
+    customKeys = {}, container, announcePolite, translate, actionableSelectors, ariaLabel) {
+        super(selectors, focusableSelectors, customKeys, container, actionableSelectors, ariaLabel);
+        this.nextRowIndex = null;
+        this.nextColumnIndex = null;
+        this.targetIndex = -2;
+        this.ctrlHomeKeyPressed = false;
+        this.announcePolite = announcePolite;
+        this.translate = translate;
+        this.isTableLoaderFocussed = false;
+        this.dataEntryMode = false;
+    }
+    reset() {
+        this.nextRowIndex = null;
+        this.nextColumnIndex = null;
+    }
+    getFocusableElementsInCell(column, isCalledFromEsc = false) {
+        if (column) {
+            const scalarListTag = '.scalarlist-component';
+            const scalarListComponent = column.querySelector(scalarListTag);
+            if (scalarListComponent)
+                return [scalarListComponent];
+            const elementsInColumn = column.querySelectorAll(this.focusableSelectors.concat(this.actionableSelectors).join(','));
+            if (!isCalledFromEsc && elementsInColumn.length > 1) {
+                return [];
+            }
+            return column.querySelectorAll(this.focusableSelectors.join(','));
+        }
+    }
+    getActionableElementsInCell(column) {
+        return column.querySelectorAll(this.actionableSelectors.join(','));
+    }
+    getSortedColumns(row) {
+        return [...row.querySelectorAll(this.selectors.focusElementSelector)].sort((colA, colB) => colA.getAttribute(sortOrder.column) - colB.getAttribute(sortOrder.column));
+    }
+    handleRightKeyPressForExpandCollapseAll(selectAllSelector) {
+        const row = this.container.querySelector(this.selectors.parentElementSelector);
+        let firstActionMenuSelector;
+        if (row) {
+            const sortedColumns = this.getSortedColumns(row);
+            if (sortedColumns.length > 0) {
+                const firstSortedColumnSelector = sortedColumns[0];
+                firstActionMenuSelector = this.getFocusableElementsInCell(firstSortedColumnSelector);
+                if (firstActionMenuSelector.length > 0) {
+                    return gainFocus(firstActionMenuSelector[0]);
+                }
+                const selectAllCheckboxSelector = this.container.querySelectorAll(selectAllSelector);
+                if (selectAllCheckboxSelector.length === 0 && firstActionMenuSelector.length === 0) {
+                    return gainFocus(firstSortedColumnSelector);
+                }
+            }
+        }
+        return null;
+    }
+    // Below method is added to handle key events for expand and collapse all button
+    handleExpandCollapseAllEvents(event, selectAllSelector) {
+        const { keyCode, shiftKey } = event;
+        switch (keyCode) {
+            case this.keys.RIGHT: {
+                event.preventDefault();
+                this.handleRightKeyPressForExpandCollapseAll(selectAllSelector);
+                break;
+            }
+            case this.keys.DOWN: {
+                event.preventDefault();
+                const stickyCells = this.container.querySelector(this.selectors.stickyGroupHeaderSelector);
+                const nextfirstCell = stickyCells;
+                const nextfirstCellChild = nextfirstCell.nextSibling;
+                gainFocus(nextfirstCellChild);
+                break;
+            }
+            case this.keys.UP:
+            case this.keys.LEFT:
+                event.preventDefault();
+                break;
+            case this.keys.TAB: {
+                const currentCol = document.activeElement.closest(this.selectors.focusElementSelector);
+                this.containerTabHandler(event, currentCol, shiftKey);
+                break;
+            }
+            default:
+                break;
+        }
+    }
+    // Below method is added to add/remove aria-label for rows with errors. Aria-label is added on first focus and removed if traversing in the same row
+    handleAnnouncementForErrors(nextItem, currentCol, keyCode) {
+        let elementWithErrorMessage = currentCol.querySelector('[data-error-message-set]');
+        elementWithErrorMessage = currentCol.dataset.errorMessageSet
+            ? currentCol
+            : elementWithErrorMessage;
+        const ARIA_LABEL = 'aria-label';
+        if (elementWithErrorMessage) {
+            const { ariaLabel: previousAriaLabel } = elementWithErrorMessage.dataset ?? {};
+            if (previousAriaLabel)
+                elementWithErrorMessage.setAttribute(ARIA_LABEL, previousAriaLabel);
+            else
+                elementWithErrorMessage.removeAttribute(ARIA_LABEL);
+        }
+        if ((keyCode !== this.keys.UP && keyCode !== this.keys.DOWN) ||
+            nextItem
+                .closest(this.selectors.focusElementSelector)
+                ?.classList.contains(rowErrorColumnMeta.options.classList[0]))
+            return;
+        let errorMessage = nextItem.closest(this.selectors.parentElementSelector)?.dataset.errorMessage;
+        if (errorMessage) {
+            if (!nextItem.classList.contains(this.selectors.focusElementSelector.split('.')[1])) {
+                if (nextItem.hasAttribute(ARIA_LABEL)) {
+                    errorMessage += `, ${nextItem.getAttribute(ARIA_LABEL)}`;
+                    nextItem.dataset.ariaLabel = nextItem.getAttribute(ARIA_LABEL);
+                }
+                else
+                    errorMessage += `, ${nextItem.textContent}`;
+            }
+            nextItem.setAttribute(ARIA_LABEL, errorMessage);
+            nextItem.dataset.errorMessageSet = true;
+        }
+    }
+    // Below method is added to set the focus on expand and collapse all button if left arrow key is pressed from actions button or select all checkbox
+    handleKeyleftForButtonMoreSelectAll(event, selectAllSelector) {
+        const { keyCode } = event;
+        const row = this.container.querySelector(this.selectors.parentElementSelector);
+        let firstActionMenuSelector;
+        if (row) {
+            const sortedColumns = this.getSortedColumns(row);
+            if (sortedColumns.length > 0) {
+                const firstSortedColumnSelector = sortedColumns[0];
+                firstActionMenuSelector = this.getFocusableElementsInCell(firstSortedColumnSelector);
+                const selectAllCheckboxSelector = this.container.querySelectorAll(selectAllSelector);
+                if (((firstActionMenuSelector.length > 0 && event.target === firstActionMenuSelector[0]) ||
+                    (selectAllCheckboxSelector.length === 0 &&
+                        firstActionMenuSelector.length === 0 &&
+                        event.target === firstSortedColumnSelector)) &&
+                    keyCode === this.keys.LEFT &&
+                    this.container.querySelector(this.selectors.expandCollpaseAll)) {
+                    const expandCollapseSelector = this.container.querySelector(this.selectors.expandCollpaseAll);
+                    const expandCollapseButton = this.getFocusableElementsInCell(expandCollapseSelector);
+                    gainFocus(expandCollapseButton[0]);
+                    return true;
+                }
+            }
+        }
+        return false;
+    }
+    handleScrollOnUpArrowForGroupHeaders(event, pContainerSelector) {
+        const pContainer = this.container.querySelector(pContainerSelector);
+        if (pContainer &&
+            event.keyCode === this.keys.UP &&
+            event.target.getBoundingClientRect().y -
+                (pContainer.firstChild.getBoundingClientRect().y +
+                    pContainer.firstChild.getBoundingClientRect().height) <
+                event.target.getBoundingClientRect().height * 2) {
+            pContainer.scrollTop -= event.target.getBoundingClientRect().height * 2;
+        }
+    }
+    // Used to update this.targetIndex on keydown which is later used by handleGroupHeaderEvents
+    updateTargetColumnIndexForGroupHeader(event) {
+        const { target, keyCode } = event;
+        if (this.targetIndex === null ||
+            this.targetIndex === -1 ||
+            keyCode === this.keys.UP ||
+            keyCode === this.keys.DOWN) {
+            if (target.closest(this.selectors.expandCollpaseAll)) {
+                this.targetIndex = -1;
+                return;
+            }
+            const cell = target.closest(this.selectors.focusElementSelector);
+            let row = target.closest(this.selectors.parentElementSelector);
+            row = this.getSortedColumns(row);
+            this.targetIndex = [...row].indexOf(cell);
+        }
+    }
+    handleUpDownKeyPressForGroupHeader(keyCode, target, cellToFocus, event) {
+        // If the group header is at the last row and DOWN key is press then
+        if (keyCode === this.keys.DOWN &&
+            target.closest(this.selectors.parentElementSelector).nextElementSibling === null) {
+            // if footer exists
+            const footer = this.container.querySelector(this.selectors.footer);
+            const index = this.targetIndex < 0 ? 0 : this.targetIndex;
+            if (footer) {
+                const cell = this.getSortedColumns(footer.querySelector(this.selectors.parentElementSelector))[index];
+                setFocusToFocusableElementOrCell(this.getFocusableElementsInCell(cell), cell);
+            }
+            return true;
+        }
+        // If the focus came to the group header from the expand all button
+        if (keyCode === this.keys.UP && this.targetIndex === -1) {
+            this.container.querySelector(this.selectors.expandCollpaseAll).children[0].focus();
+        }
+        else {
+            event.preventDefault();
+            // If initially the group header is clicked and the keyboard is used
+            if (cellToFocus && !cellToFocus.hasAttribute('tabindex')) {
+                cellToFocus.setAttribute('tabindex', -1);
+            }
+            // Flushing the -1 index
+            if (keyCode === this.keys.DOWN && this.targetIndex === -1) {
+                this.targetIndex = 0;
+            }
+            if (cellToFocus) {
+                cellToFocus.focus();
+            }
+        }
+        return true;
+    }
+    handleLeftRightKeyPressForGroupHeader(keyCode, target, cellToFocus) {
+        if (cellToFocus && !cellToFocus.hasAttribute('tabindex')) {
+            cellToFocus.setAttribute('tabindex', -1);
+        }
+        if (!this.targetIndex)
+            this.targetIndex = 0;
+        if (cellToFocus) {
+            setFocusToFocusableElementOrCell(this.getFocusableElementsInCell(cellToFocus), cellToFocus);
+        }
+    }
+    handleGroupHeaderEvents(event) {
+        const { keyCode, target, ctrlKey } = event;
+        const index = this.targetIndex < 0 ? 0 : this.targetIndex;
+        const cellToFocus = this.getSortedColumns(target.closest(this.selectors.parentElementSelector))[index];
+        switch (keyCode) {
+            case this.keys.UP:
+            case this.keys.DOWN: {
+                return this.handleUpDownKeyPressForGroupHeader(keyCode, target, cellToFocus, event);
+            }
+            case this.keys.RIGHT:
+                {
+                    // To Prevent Scrolling
+                    event.preventDefault();
+                    const row = target.closest(this.selectors.parentElementSelector);
+                    if (row.querySelector('.aggregate-button')) {
+                        const firstFocusableElementInRow = this.getSortedColumns(row)[0];
+                        this.handleLeftRightKeyPressForGroupHeader(keyCode, target, firstFocusableElementInRow);
+                        return false;
+                    }
+                }
+                break;
+            case this.keys.TAB:
+                if (cellToFocus) {
+                    cellToFocus.focus();
+                }
+                break;
+            case this.keys.HOME:
+                if (ctrlKey) {
+                    this.handleCtrlHomeKeypress();
+                }
+                break;
+            default:
+                break;
+        }
+        return true;
+    }
+    checkEventsForGroupHeader(event) {
+        if (event.target &&
+            (event.target.closest(this.selectors.focusElementSelector) ||
+                event.target.closest(this.selectors.expandCollpaseAll))) {
+            this.updateTargetColumnIndexForGroupHeader(event);
+        }
+        else if (event.target && event.target.closest(this.selectors.stickyGroupHeaderSelector)) {
+            return this.handleGroupHeaderEvents(event);
+        }
+        return true;
+    }
+    stopEventHandler(event) {
+        return ((!event.target.closest(this.selectors.stickyGroupHeaderSelector) &&
+            event.target.getAttribute('aria-expanded')) === 'true' ||
+            event.target.closest('.popper') ||
+            !Object.values(this.keys).includes(event.keyCode));
+    }
+    handleLeftKeyPressOnAggregateCells(target, aggregateCell) {
+        const firstCell = this.getSortedColumns(target.closest(this.selectors.parentElementSelector))[0];
+        if (firstCell === target.closest(aggregateCell)) {
+            const groupHeaderButton = target
+                .closest(this.selectors.parentElementSelector)
+                ?.querySelector('.stickyGroupHeader > button');
+            groupHeaderButton.focus();
+            return false;
+        }
+        return true;
+    }
+    // eslint-disable-next-line class-methods-use-this
+    isAccessibleElement(element) {
+        return (!(element.hasAttribute('aria-hidden') && element.getAttribute('aria-hidden') === 'true') &&
+            !(element.hasAttribute(TAB_INDEX) && element.getAttribute(TAB_INDEX) === '-1'));
+    }
+    getNextAccessibleElement(cellInputableElements, shiftKey = false, currentElementIndex = -1) {
+        if (shiftKey) {
+            cellInputableElements = [...cellInputableElements]
+                .reverse()
+                .slice(currentElementIndex !== -1 ? cellInputableElements.length - currentElementIndex : 0, cellInputableElements.length);
+        }
+        else {
+            cellInputableElements = [...cellInputableElements].slice(currentElementIndex + 1, cellInputableElements.length);
+        }
+        return cellInputableElements.find(element => this.isAccessibleElement(element));
+    }
+    getAdjacentColumnCell(shiftKey, currentColumnIndex, currentEleParentIndex, sortedColumns, parentElements, currentCol) {
+        let nextColumnCell = null;
+        if (shiftKey) {
+            if (currentColumnIndex - 1 >= 0) {
+                nextColumnCell = sortedColumns[sortedColumns.indexOf(currentCol) - 1];
+            }
+            else if (currentEleParentIndex - 1 >= 0) {
+                sortedColumns = [
+                    ...parentElements[currentEleParentIndex - 1].querySelectorAll(this.selectors.focusElementSelector)
+                ];
+                currentEleParentIndex -= 1;
+                nextColumnCell = sortedColumns[sortedColumns.length - 1];
+            }
+        }
+        else if (currentColumnIndex + 1 < sortedColumns.length) {
+            nextColumnCell = sortedColumns[sortedColumns.indexOf(currentCol) + 1];
+        }
+        else if (currentEleParentIndex + 1 < parentElements.length) {
+            sortedColumns = [
+                ...parentElements[currentEleParentIndex + 1].querySelectorAll(this.selectors.focusElementSelector)
+            ];
+            currentEleParentIndex += 1;
+            nextColumnCell = sortedColumns[0];
+        }
+        return [nextColumnCell, sortedColumns, currentEleParentIndex];
+    }
+    // This method is to recursively find the next column cell with actionable or focusable elements and skip any empty cells
+    getNextColumnCellInTaborder(sortedColumns, currentCol, shiftKey, parentElements, currentEleParentIndex) {
+        if (!currentCol) {
+            return null;
+        }
+        let nextColumnCell = null;
+        const currentColumnIndex = sortedColumns.indexOf(currentCol);
+        [nextColumnCell, sortedColumns, currentEleParentIndex] = this.getAdjacentColumnCell(shiftKey, currentColumnIndex, currentEleParentIndex, sortedColumns, parentElements, currentCol);
+        const elements = nextColumnCell &&
+            nextColumnCell.querySelectorAll([...this.actionableSelectors, ...this.focusableSelectors].join(','));
+        if (elements?.length) {
+            return nextColumnCell;
+        }
+        return this.getNextColumnCellInTaborder(sortedColumns, nextColumnCell, shiftKey, parentElements, currentEleParentIndex);
+    }
+    isFocusableElement(element) {
+        const colItem = element?.closest(this.selectors.focusElementSelector);
+        if (!colItem)
+            return false;
+        return [...colItem.querySelectorAll(this.focusableSelectors.join(','))].includes(element);
+    }
+    handleTabKey(shiftKey) {
+        const parentElements = this.container.querySelectorAll(this.selectors.parentElementSelector);
+        const currentCol = document.activeElement?.closest(this.selectors.focusElementSelector);
+        const currentEleParentIndex = [...parentElements].indexOf(currentCol.closest(this.selectors.parentElementSelector));
+        const currentColumnElements = Array.from(currentCol.querySelectorAll([...this.actionableSelectors, ...this.focusableSelectors].join(',')));
+        const currentEleIndex = currentColumnElements.indexOf(document.activeElement);
+        const sortedColumns = this.getSortedColumns(currentCol.closest(this.selectors.parentElementSelector));
+        const nextColumnCell = this.getNextColumnCellInTaborder(sortedColumns, currentCol, shiftKey, parentElements, currentEleParentIndex);
+        if ((!shiftKey && currentEleIndex + 1 < currentColumnElements.length) ||
+            (shiftKey && currentEleIndex - 1 >= 0)) {
+            return false;
+        }
+        if (nextColumnCell) {
+            const nextColumnCellElements = nextColumnCell.querySelectorAll([...this.actionableSelectors, ...this.focusableSelectors].join(','));
+            if (nextColumnCellElements.length !== 0)
+                return false;
+        }
+        this.updateDataEntry();
+        return true;
+    }
+    updateDataEntry(updateForHandler, focusElements, nextFocusElement) {
+        switch (updateForHandler) {
+            case 'click':
+                if (focusElements.length === 1) {
+                    const hasFocusableElement = Array.from(focusElements).some(element => this.focusableSelectors.some(selector => element.matches(selector)));
+                    this.dataEntryMode = !hasFocusableElement;
+                }
+                else if (nextFocusElement) {
+                    this.dataEntryMode = true;
+                }
+                else {
+                    this.dataEntryMode = false;
+                }
+                break;
+            case 'enter':
+                this.dataEntryMode = true;
+                break;
+            default:
+                this.dataEntryMode = false;
+        }
+    }
+    clickHandler(event) {
+        const cell = event?.target?.closest(this.selectors.focusElementSelector);
+        if (cell && cell !== event.target) {
+            const focusElements = cell.querySelectorAll(this.focusableSelectors.concat(this.actionableSelectors).join(','));
+            const nextFocusElement = this.getNextAccessibleElement(focusElements);
+            this.updateDataEntry('click', focusElements, nextFocusElement);
+        }
+        else {
+            this.updateDataEntry();
+        }
+    }
+    handleEnterKey(target) {
+        const focusElements = target.querySelectorAll(this.focusableSelectors.concat(this.actionableSelectors).join(','));
+        const nextFocusElement = this.getNextAccessibleElement(focusElements);
+        // register escape event for RTE to support event bubbling
+        if (nextFocusElement?.nodeName === 'IFRAME') {
+            this.registerEscapeEventForRTE(nextFocusElement);
+            target.tabIndex = -1;
+        }
+        else if (nextFocusElement) {
+            this.updateDataEntry('enter');
+            gainFocus(nextFocusElement);
+            target.tabIndex = -1;
+        }
+    }
+    handleEscapeKey(target) {
+        const cell = target.closest(this.selectors.focusElementSelector);
+        if (cell &&
+            (this.getFocusableElementsInCell(cell, true).length > 1 ||
+                this.getActionableElementsInCell(cell).length >= 1)) {
+            this.updateDataEntry();
+            gainFocus(cell);
+        }
+        if (this.getFocusableElementsInCell(cell, true).length === 1) {
+            this.updateDataEntry();
+        }
+        return !cell;
+    }
+    registerEscapeEventForRTE(target) {
+        const iframeContent = target.contentWindow || target.contentDocument;
+        if (iframeContent?.document) {
+            this.updateDataEntry('enter');
+            iframeContent.document.querySelector("[contenteditable='true']").focus();
+            if (!iframeContent.document.escapeKeyHandlerInjected) {
+                iframeContent.document.addEventListener('keydown', event => {
+                    if (event.keyCode === this.keys.ESCAPE) {
+                        const escapeEvent = new KeyboardEvent('keydown', {
+                            key: 'Escape',
+                            code: 'Escape',
+                            keyCode: this.keys.ESCAPE,
+                            bubbles: true
+                        });
+                        target.dispatchEvent(escapeEvent);
+                    }
+                });
+            }
+            iframeContent.document.escapeKeyHandlerInjected = true;
+        }
+    }
+    tableLoaderHandler(event) {
+        const { keyCode } = event;
+        switch (keyCode) {
+            case this.keys.LEFT:
+            case this.keys.RIGHT:
+            case this.keys.UP:
+            case this.keys.DOWN: {
+                event.preventDefault();
+                break;
+            }
+            case this.keys.TAB: {
+                this.tabHandler(event);
+                this.isTableLoaderFocussed = false;
+                break;
+            }
+            default:
+                break;
+        }
+    }
+    // Below method is overridden to handle key events for expand and collapse all button, group headers
+    a11yHandler(event) {
+        const buttonMoreSelector = '.button-more';
+        const selectAllSelector = '.select-all-checkbox';
+        const selectHeaderWithoutCheckbox = '.row-select-handle';
+        const pContainerSelector = '.pContainer';
+        const aggregateCell = '.aggregateCell';
+        let shouldCallSuper = true;
+        const tableLoader = this.container.querySelector(this.selectors.tableLoader);
+        const currentCol = document.activeElement.closest(this.selectors.focusElementSelector);
+        // Handling the key handling events for Loading indicator
+        if (tableLoader && tableLoader === event.target) {
+            this.tableLoaderHandler(event);
+            return;
+        }
+        // Handling events related to group header
+        if (this.container.querySelector(this.selectors.stickyGroupHeaderSelector)) {
+            shouldCallSuper = this.checkEventsForGroupHeader(event);
+        }
+        // To handle left click from first aggregate cell
+        if (event.target && event.target.closest(aggregateCell) && event.keyCode === this.keys.LEFT) {
+            shouldCallSuper = this.handleLeftKeyPressOnAggregateCells(event.target, aggregateCell);
+        }
+        // Arrow key handlers restriction for data entry mode
+        if (event.target &&
+            this.dataEntryMode &&
+            currentCol !== document.activeElement &&
+            (event.keyCode === this.keys.RIGHT ||
+                event.keyCode === this.keys.LEFT ||
+                event.keyCode === this.keys.UP ||
+                event.keyCode === this.keys.DOWN)) {
+            return;
+        }
+        // Enter key handler
+        if (event.target && event.keyCode === this.keys.ENTER) {
+            this.handleEnterKey(event.target);
+        }
+        // Escape key handler
+        if (event.target && event.keyCode === this.keys.ESCAPE) {
+            this.handleEscapeKey(event.target);
+        }
+        // Tab key handler
+        if (event.target &&
+            event.keyCode === this.keys.TAB &&
+            this.dataEntryMode &&
+            currentCol !== document.activeElement) {
+            shouldCallSuper = this.handleTabKey(event.shiftKey);
+        }
+        if (!shouldCallSuper)
+            return;
+        // Handling events for expand and collapse all button & handling scrolling for group header
+        if (event.target && event.target.closest(this.selectors.expandCollpaseAll)) {
+            this.handleExpandCollapseAllEvents(event, selectAllSelector);
+            return;
+        }
+        if (event.target && event.target.closest(this.selectors.stickyGroupHeaderSelector)) {
+            this.handleScrollOnUpArrowForGroupHeaders(event, pContainerSelector);
+        }
+        if (event.target &&
+            (event.target.closest(buttonMoreSelector) ||
+                event.target.closest(selectAllSelector) ||
+                event.target.closest(selectHeaderWithoutCheckbox))) {
+            if (!this.handleKeyleftForButtonMoreSelectAll(event, selectAllSelector)) {
+                // if focus is not handed in handleKeyLeftForButtonMoreSelectAll then invoke super.a11yHandler
+                super.a11yHandler(event);
+            }
+            return;
+        }
+        super.a11yHandler(event);
+    }
+    // Below method is overridden to set the focus on expand and collapse all button if grouping is applied, to set the focus on table loader if navigated from toolbar by pressing tab key
+    focusFirstElement() {
+        if (this.container.querySelector(this.selectors.tableLoader)) {
+            const tableLoadingIndicator = this.container.querySelector(this.selectors.tableLoader);
+            tableLoadingIndicator.focus();
+            this.isTableLoaderFocussed = true;
+            return;
+        }
+        if (this.container.querySelector(this.selectors.expandCollpaseAll)) {
+            const expandCollapseSelector = this.container.querySelector(this.selectors.expandCollpaseAll);
+            const expandCollapseButton = this.getFocusableElementsInCell(expandCollapseSelector);
+            gainFocus(expandCollapseButton[0]);
+            return;
+        }
+        super.focusFirstElement();
+    }
+    setFocusOnLoader(loader, currentCol) {
+        super.setFocusOnLoader(loader, currentCol);
+        const nextRowIndexDirection = loader.classList.contains(this.selectors.aboveLoader.substr(1))
+            ? -1
+            : 1;
+        this.nextColumnIndex = currentCol.getAttribute(sortOrder.column);
+        this.nextRowIndex =
+            parseInt(currentCol.closest(this.selectors.parentElementSelector).getAttribute(sortOrder.row), 10) + nextRowIndexDirection;
+    }
+    dynamicLoadersKeyDownHandler(event) {
+        if (super.dynamicLoadersKeyDownHandler(event)) {
+            this.reset();
+        }
+    }
+    itemsLoadedCallback() {
+        if (this.ctrlHomeKeyPressed) {
+            // ctrl+Home keypress happens on any cell but when initial rows are not present in container fetch happens for those rows
+            // on rerender of the container focus the row1 data col1 of the table
+            this.ctrlHomeKeyPressed = false;
+            this.handleCtrlHomeKeypress();
+        }
+        // Below if condition is written to announce Loading completed once the table loader is hidden and we are also shifting the
+        // focus on firstfocusableelement once the table Loader is hidden
+        if (this.isTableLoaderFocussed && !this.container.querySelector(this.selectors.tableLoader)) {
+            this.announcePolite({
+                message: this.translate('Loading completed'),
+                type: 'info'
+            });
+            this.focusFirstElement();
+            this.isTableLoaderFocussed = false;
+        }
+        if (this.nextRowIndex && this.nextColumnIndex) {
+            const row = this.container.querySelector(`[${sortOrder.row}='${this.nextRowIndex}']`);
+            if (row) {
+                const column = row.querySelector(`[${sortOrder.column}='${this.nextColumnIndex}']`);
+                const restoreFocusRef = {
+                    columnIndex: [
+                        ...this.container.querySelectorAll(this.selectors.focusElementSelector)
+                    ].indexOf(column)
+                };
+                this.reset();
+                this.setFocusToCell(restoreFocusRef);
+            }
+        }
+    }
+    isFirstDataRowInDOM() {
+        return !!this.container.querySelector(`[${DATA_INDEX}='0']`);
+    }
+    getFocusableElementOnCtrlHome() {
+        if (this.isFirstDataRowInDOM() && this.selectors.parentElementSelector) {
+            const firstRow = this.container.querySelector(this.selectors.parentElementSelector);
+            const sortedColumns = this.getSortedColumns(firstRow);
+            if (firstRow.classList.contains(HEADER)) {
+                // when header row is present focus first data column in the header
+                return getHeaderColumnToFocusOnCtrlHome(sortedColumns);
+            }
+            // when there's no header focus row2 col1 element
+            return sortedColumns[0];
+        }
+        // fetch 1st set of rows by setting scrollTop to 0 & then focus (handled in itemsLoadedCallback)
+        this.ctrlHomeKeyPressed = true;
+        return null;
+    }
+}
+export default TableA11y;
+//# sourceMappingURL=TableA11y.js.map