diff --git a/packages/main/cypress/specs/TableCustomAnnouncement.cy.tsx b/packages/main/cypress/specs/TableCustomAnnouncement.cy.tsx index 2029faacd058..d9c9658ad7a2 100644 --- a/packages/main/cypress/specs/TableCustomAnnouncement.cy.tsx +++ b/packages/main/cypress/specs/TableCustomAnnouncement.cy.tsx @@ -148,7 +148,15 @@ describe("Cell Custom Announcement - More details", () => { cy.realPress("ArrowRight"); // Row actions cell checkAnnouncement(Table.i18nBundle.getText(MULTIPLE_ACTIONS, 2)); cy.focused().should("have.attr", "aria-colindex", "6") - .should("have.attr", "role", "gridcell"); + .should("have.attr", "role", "gridcell") + .then($rowActionsCell => { + const rowActionsCell = $rowActionsCell[0]; + const invisibleText = document.getElementById("ui5-table-invisible-text"); + expect(rowActionsCell.ariaLabelledByElements[0]).to.equal(invisibleText); + rowActionsCell.blur(); + expect(rowActionsCell.ariaLabelledByElements).to.equal(null); + rowActionsCell.focus(); + }); cy.get("#row1-edit-action").invoke("remove"); checkAnnouncement(ONE_ROW_ACTION, true); diff --git a/packages/main/src/TableCustomAnnouncement.ts b/packages/main/src/TableCustomAnnouncement.ts index db60b4527b65..6e35512072ab 100644 --- a/packages/main/src/TableCustomAnnouncement.ts +++ b/packages/main/src/TableCustomAnnouncement.ts @@ -23,37 +23,32 @@ import { } from "./generated/i18n/i18n-defaults.js"; let invisibleText: HTMLElement; -const i18nBundle = new I18nBundle("@ui5/webcomponents/main"); +const i18nBundle = new I18nBundle("@ui5/webcomponents"); const checkVisibility = (element: HTMLElement): boolean => { return element.checkVisibility() || getComputedStyle(element).display === "contents"; }; -const updateInvisibleText = (element: HTMLElement, text: string | string[] = []) => { - const invisibleTextId = "ui5-table-invisible-text"; +const updateInvisibleText = (element: any, text: string | string[] = []) => { if (!invisibleText || !invisibleText.isConnected) { invisibleText = document.createElement("span"); - invisibleText.id = invisibleTextId; + invisibleText.id = "ui5-table-invisible-text"; invisibleText.ariaHidden = "true"; invisibleText.style.display = "none"; document.body.appendChild(invisibleText); } - let ariaLabelledBy = (element.getAttribute("aria-labelledby") || "").split(" ").filter(Boolean); - const invisibleTextAssociated = ariaLabelledBy.includes(invisibleTextId); - + const ariaLabelledByElements = [...(element.ariaLabelledByElements || [])]; + const invisibleTextIndex = ariaLabelledByElements.indexOf(invisibleText); text = Array.isArray(text) ? text.filter(Boolean).join(" . ").trim() : text.trim(); - if (text && !invisibleTextAssociated) { - ariaLabelledBy.push(invisibleTextId); - } else if (!text && invisibleTextAssociated) { - ariaLabelledBy = ariaLabelledBy.filter(id => id !== invisibleTextId); - } - invisibleText.textContent = text; - if (ariaLabelledBy.length > 0) { - element.setAttribute("aria-labelledby", ariaLabelledBy.join(" ")); - } else { - element.removeAttribute("aria-labelledby"); + + if (text && invisibleTextIndex === -1) { + ariaLabelledByElements.unshift(invisibleText); + element.ariaLabelledByElements = ariaLabelledByElements; + } else if (!text && invisibleTextIndex > -1) { + ariaLabelledByElements.splice(invisibleTextIndex, 1); + element.ariaLabelledByElements = ariaLabelledByElements.length ? ariaLabelledByElements : null; } }; diff --git a/packages/website/docs/_samples/main/Table/ScrollToLoad/sample.html b/packages/website/docs/_samples/main/Table/ScrollToLoad/sample.html index d5bff7513ba7..c776818833c4 100644 --- a/packages/website/docs/_samples/main/Table/ScrollToLoad/sample.html +++ b/packages/website/docs/_samples/main/Table/ScrollToLoad/sample.html @@ -12,7 +12,7 @@
- + Product