diff --git a/packages/main/cypress/specs/TableCustomAnnouncement.cy.tsx b/packages/main/cypress/specs/TableCustomAnnouncement.cy.tsx index 50938df5b351..bed59a7355d1 100644 --- a/packages/main/cypress/specs/TableCustomAnnouncement.cy.tsx +++ b/packages/main/cypress/specs/TableCustomAnnouncement.cy.tsx @@ -15,19 +15,19 @@ import "../../src/TableSelectionSingle.js"; import * as Translations from "../../src/generated/i18n/i18n-defaults.js"; const { - TABLE_CELL_MULTIPLE_CONTROLS: { defaultText: CONTAINS_CONTROLS }, - TABLE_CELL_SINGLE_CONTROL: { defaultText: CONTAINS_CONTROL }, - TABLE_ACC_STATE_READONLY: { defaultText: READONLY }, - TABLE_ACC_STATE_DISABLED: { defaultText: DISABLED }, - TABLE_ACC_STATE_REQUIRED: { defaultText: REQUIRED }, + ACC_STATE_MULTIPLE_CONTROLS: { defaultText: CONTAINS_CONTROLS }, + ACC_STATE_SINGLE_CONTROL: { defaultText: CONTAINS_CONTROL }, + ACC_STATE_READONLY: { defaultText: READONLY }, + ACC_STATE_DISABLED: { defaultText: DISABLED }, + ACC_STATE_REQUIRED: { defaultText: REQUIRED }, + ACC_STATE_EMPTY: { defaultText: EMPTY }, + CHECKBOX_CHECKED: { defaultText: CHECKED }, + CHECKBOX_NOT_CHECKED: { defaultText: NOT_CHECKED }, TABLE_ROW_SINGLE_ACTION: { defaultText: ONE_ROW_ACTION }, TABLE_ROW_MULTIPLE_ACTIONS: { defaultText: MULTIPLE_ACTIONS }, - TABLE_ACC_STATE_EMPTY: { defaultText: EMPTY }, TABLE_GENERATED_BY_AI: { defaultText: GENERATED_BY_AI }, TABLE_ROW_ACTIONS: { defaultText: ROW_ACTIONS }, TABLE_COLUMNHEADER_SELECTALL_DESCRIPTION: { defaultText: SELECT_ALL_CHECKBOX }, - TABLE_COLUMNHEADER_SELECTALL_CHECKED: { defaultText: CHECKED }, - TABLE_COLUMNHEADER_SELECTALL_NOT_CHECKED: { defaultText: NOT_CHECKED }, TABLE_COLUMNHEADER_CLEARALL_DESCRIPTION: { defaultText: CLEAR_ALL_BUTTON }, TABLE_SELECTION: { defaultText: SELECTION }, TABLE_COLUMN_HEADER_ROW: { defaultText: COLUMN_HEADER_ROW }, @@ -47,7 +47,7 @@ describe("Cell Custom Announcement - More details", () => { - +
Header3
@@ -84,8 +84,7 @@ describe("Cell Custom Announcement - More details", () => { } cy.get("body").then($body => { - debugger; - expect($body.find("#ui5-table-invisible-text").text()).to.equal(expectedText); + expect($body.find("#ui5-invisible-text").text()).to.equal(expectedText); }); } @@ -112,7 +111,7 @@ describe("Cell Custom Announcement - More details", () => { cy.get("@row1Input2").invoke("removeAttr", "hidden"); checkAnnouncement(CONTAINS_CONTROLS, true); - cy.get("@row1Input1").invoke("attr", "data-ui5-table-acc-text", "Input with custom accessibility text"); + cy.get("@row1Input1").invoke("attr", "data-ui5-acc-text", "Input with custom accessibility text"); checkAnnouncement(`Input with custom accessibility text . ${CONTAINS_CONTROLS}`, true); cy.realPress("ArrowRight"); // third cell focused @@ -143,7 +142,7 @@ describe("Cell Custom Announcement - More details", () => { }); checkAnnouncement(`Button Row1Cell3Button ${REQUIRED} ${DISABLED} ${READONLY} . ${CONTAINS_CONTROL}`, true); - cy.get("@row1Button").invoke("attr", "data-ui5-table-acc-text", "Button with custom accessibility text"); + cy.get("@row1Button").invoke("attr", "data-ui5-acc-text", "Button with custom accessibility text"); checkAnnouncement(`Button with custom accessibility text . ${CONTAINS_CONTROL}`, true); cy.realPress("ArrowRight"); // Row actions cell @@ -152,7 +151,7 @@ describe("Cell Custom Announcement - More details", () => { .should("have.attr", "role", "gridcell") .then($rowActionsCell => { const rowActionsCell = $rowActionsCell[0]; - const invisibleText = document.getElementById("ui5-table-invisible-text"); + const invisibleText = document.getElementById("ui5-invisible-text"); expect(rowActionsCell.ariaLabelledByElements[0]).to.equal(invisibleText); rowActionsCell.blur(); expect(rowActionsCell.ariaLabelledByElements).to.equal(null); @@ -225,7 +224,7 @@ describe("Row Custom Announcement - Less details", () => {
H1DisplayNone
-
H2 Custom Text
+
H2 Custom Text
H3
@@ -296,7 +295,7 @@ describe("Row Custom Announcement - Less details", () => { }); cy.get("body").then($body => { - expect($body.find("#ui5-table-invisible-text").text())[check](expectedText); + expect($body.find("#ui5-invisible-text").text())[check](expectedText); }); } diff --git a/packages/main/cypress/specs/TableSelections.cy.tsx b/packages/main/cypress/specs/TableSelections.cy.tsx index 0253d11bbd5c..8a0320fcf599 100644 --- a/packages/main/cypress/specs/TableSelections.cy.tsx +++ b/packages/main/cypress/specs/TableSelections.cy.tsx @@ -10,13 +10,13 @@ import type TableSelectionBase from "../../src/TableSelectionBase.js"; import * as Translations from "../../src/generated/i18n/i18n-defaults.js"; const { - TABLE_COLUMNHEADER_SELECTALL_DESCRIPTION: { defaultText: SELECT_ALL_CHECKBOX }, - TABLE_COLUMNHEADER_SELECTALL_CHECKED: { defaultText: CHECKED }, - TABLE_COLUMNHEADER_SELECTALL_NOT_CHECKED: { defaultText: NOT_CHECKED }, + ACC_STATE_DISABLED: { defaultText: DISABLED }, + CHECKBOX_CHECKED: { defaultText: CHECKED }, + CHECKBOX_NOT_CHECKED: { defaultText: NOT_CHECKED }, TABLE_SELECT_ALL_ROWS: { defaultText: SELECT_ALL_ROWS }, TABLE_DESELECT_ALL_ROWS: { defaultText: DESELECT_ALL_ROWS }, TABLE_COLUMNHEADER_CLEARALL_DESCRIPTION: { defaultText: CLEAR_ALL_BUTTON }, - TABLE_ACC_STATE_DISABLED: { defaultText: DISABLED } + TABLE_COLUMNHEADER_SELECTALL_DESCRIPTION: { defaultText: SELECT_ALL_CHECKBOX }, } = Translations; function mountTestpage(selectionMode: string) { diff --git a/packages/main/src/CustomAnnouncement.ts b/packages/main/src/CustomAnnouncement.ts new file mode 100644 index 000000000000..bbda0a08fa8a --- /dev/null +++ b/packages/main/src/CustomAnnouncement.ts @@ -0,0 +1,124 @@ +import I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js"; +import { getTabbableElements } from "@ui5/webcomponents-base/dist/util/TabbableElements.js"; +import type { AccessibilityInfo } from "@ui5/webcomponents-base"; +import { + ACC_STATE_EMPTY, + ACC_STATE_REQUIRED, + ACC_STATE_DISABLED, + ACC_STATE_READONLY, + ACC_STATE_SINGLE_CONTROL, + ACC_STATE_MULTIPLE_CONTROLS, +} from "./generated/i18n/i18n-defaults.js"; + +let i18nBundle: I18nBundle; +let invisibleText: HTMLElement; + +const getBundle = (): I18nBundle => { + i18nBundle ??= new I18nBundle("@ui5/webcomponents-base"); + return i18nBundle; +}; + +const checkVisibility = (element: HTMLElement): boolean => { + return element.checkVisibility() || getComputedStyle(element).display === "contents"; +}; + +const applyCustomAnnouncement = (element: HTMLElement, text: string | string[] = []) => { + if (!invisibleText || !invisibleText.isConnected) { + invisibleText = document.createElement("span"); + invisibleText.id = "ui5-invisible-text"; + invisibleText.hidden = true; + document.body.appendChild(invisibleText); + } + + const ariaLabelledByElements = [...((element as any).ariaLabelledByElements || [])]; + const invisibleTextIndex = ariaLabelledByElements.indexOf(invisibleText); + text = Array.isArray(text) ? text.filter(Boolean).join(" . ").trim() : text.trim(); + invisibleText.textContent = text; + + if (text && invisibleTextIndex === -1) { + ariaLabelledByElements.unshift(invisibleText); + (element as any).ariaLabelledByElements = ariaLabelledByElements; + } else if (!text && invisibleTextIndex > -1) { + ariaLabelledByElements.splice(invisibleTextIndex, 1); + (element as any).ariaLabelledByElements = ariaLabelledByElements.length ? ariaLabelledByElements : null; + } +}; + +type CustomAnnouncementOptions = { + lessDetails?: boolean; +}; + +const getCustomAnnouncement = (element: Node, options: CustomAnnouncementOptions = {}, _isRootElement: boolean = true): string => { + if (!element) { + return ""; + } + + if (element.nodeType === Node.TEXT_NODE) { + return (element as Text).data.trim(); + } + + if (!(element instanceof HTMLElement)) { + return ""; + } + + if (element.hasAttribute("data-ui5-acc-text")) { + return element.getAttribute("data-ui5-acc-text") || ""; + } + + if (element.ariaHidden === "true" || !checkVisibility(element)) { + return _isRootElement ? getBundle().getText(ACC_STATE_EMPTY) : ""; + } + + let childNodes = [] as Array; + const descriptions = [] as Array; + const accessibilityInfo = (element as any).accessibilityInfo as AccessibilityInfo | undefined; + const { lessDetails } = options; + + if (accessibilityInfo) { + const { + type, description, required, disabled, readonly, children, + } = accessibilityInfo; + + childNodes = children || []; + type && descriptions.push(type); + description && descriptions.push(description); + + if (!lessDetails) { + required && descriptions.push(getBundle().getText(ACC_STATE_REQUIRED)); + disabled && descriptions.push(getBundle().getText(ACC_STATE_DISABLED)); + readonly && descriptions.push(getBundle().getText(ACC_STATE_READONLY)); + } + } else if (element.localName === "slot") { + childNodes = (element as HTMLSlotElement).assignedNodes({ flatten: true }); + } else { + childNodes = element.shadowRoot ? [...element.shadowRoot.childNodes] : [...element.childNodes]; + } + + childNodes.forEach(child => { + const childDescription = getCustomAnnouncement(child, options, false); + childDescription && descriptions.push(childDescription); + }); + + if (_isRootElement) { + const hasDescription = descriptions.length > 0; + if (!hasDescription || !lessDetails) { + const tabbables = getTabbableElements(element); + const bundleKey = [ + hasDescription ? "" : ACC_STATE_EMPTY, + ACC_STATE_SINGLE_CONTROL, + ACC_STATE_MULTIPLE_CONTROLS, + ][Math.min(tabbables.length, 2)]; + if (bundleKey) { + hasDescription && descriptions.push("."); + descriptions.push(getBundle().getText(bundleKey)); + } + } + } + + return descriptions.join(" ").trim(); +}; + +export { + getCustomAnnouncement, + applyCustomAnnouncement, +}; diff --git a/packages/main/src/Table.ts b/packages/main/src/Table.ts index fc3f237a3184..9bc18d58571c 100644 --- a/packages/main/src/Table.ts +++ b/packages/main/src/Table.ts @@ -170,7 +170,7 @@ type TableRowActionClickEventDetail = { * This can only be achieved through a custom accessibility announcement. * To support this, UI5 Web Components expose its own accessibility metadata via the `accessibilityInfo` property. * The `ui5-table` uses this information to create the required custom announcements dynamically. - * If you include custom web components inside table cells that are not part of the standard UI5 Web Components set, their accessibility information can be provided using the `data-ui5-table-acc-text` attribute. + * If you include custom web components inside table cells that are not part of the standard UI5 Web Components set, their accessibility information can be provided using the `data-ui5-acc-text` attribute. * * ### ES6 Module Import * @@ -359,11 +359,11 @@ class Table extends UI5Element { loading = false; /** - * Defines the delay in milliseconds, after which the loading indicator will show up for this component. + * Defines the delay in milliseconds, after which the loading indicator will show up for this component. * - * @default 1000 - * @public - */ + * @default 1000 + * @public + */ @property({ type: Number }) loadingDelay = 1000; @@ -431,7 +431,7 @@ class Table extends UI5Element { _tableNavigation?: TableNavigation; _tableDragAndDrop?: TableDragAndDrop; _tableCustomAnnouncement?: TableCustomAnnouncement; - _poppedIn: Array<{col: TableHeaderCell, width: number}> = []; + _poppedIn: Array<{ col: TableHeaderCell, width: number }> = []; _containerWidth = 0; constructor() { diff --git a/packages/main/src/TableCustomAnnouncement.ts b/packages/main/src/TableCustomAnnouncement.ts index c8e0d79a7739..09917a9449fd 100644 --- a/packages/main/src/TableCustomAnnouncement.ts +++ b/packages/main/src/TableCustomAnnouncement.ts @@ -1,7 +1,5 @@ import TableExtension from "./TableExtension.js"; -import I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js"; -import { getTabbableElements } from "@ui5/webcomponents-base/dist/util/TabbableElements.js"; -import type { AccessibilityInfo } from "@ui5/webcomponents-base"; +import { getCustomAnnouncement, applyCustomAnnouncement } from "./CustomAnnouncement.js"; import type Table from "./Table.js"; import type TableRow from "./TableRow.js"; import type TableCell from "./TableCell.js"; @@ -14,112 +12,8 @@ import { TABLE_ROW_NAVIGABLE, TABLE_ROW_NAVIGATED, TABLE_COLUMN_HEADER_ROW, - TABLE_CELL_SINGLE_CONTROL, - TABLE_CELL_MULTIPLE_CONTROLS, - TABLE_ACC_STATE_EMPTY, - TABLE_ACC_STATE_REQUIRED, - TABLE_ACC_STATE_DISABLED, - TABLE_ACC_STATE_READONLY, } from "./generated/i18n/i18n-defaults.js"; -let invisibleText: HTMLElement; -const i18nBundle = new I18nBundle("@ui5/webcomponents"); - -const checkVisibility = (element: HTMLElement): boolean => { - return element.checkVisibility() || getComputedStyle(element).display === "contents"; -}; - -const updateInvisibleText = (element: any, text: string | string[] = []) => { - if (!invisibleText || !invisibleText.isConnected) { - invisibleText = document.createElement("span"); - invisibleText.id = "ui5-table-invisible-text"; - invisibleText.ariaHidden = "true"; - invisibleText.style.display = "none"; - document.body.appendChild(invisibleText); - } - - const ariaLabelledByElements = [...(element.ariaLabelledByElements || [])]; - const invisibleTextIndex = ariaLabelledByElements.indexOf(invisibleText); - text = Array.isArray(text) ? text.filter(Boolean).join(" . ").trim() : text.trim(); - invisibleText.textContent = text; - - 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; - } -}; - -const getAccessibilityDescription = (element: Node, lessDetails: boolean = false, _isRootElement: boolean = true): string => { - if (!element) { - return ""; - } - - if (element.nodeType === Node.TEXT_NODE) { - return (element as Text).data.trim(); - } - - if (!(element instanceof HTMLElement)) { - return ""; - } - - if (element.hasAttribute("data-ui5-table-acc-text")) { - return element.getAttribute("data-ui5-table-acc-text") || ""; - } - - if (element.ariaHidden === "true" || !checkVisibility(element)) { - return _isRootElement ? i18nBundle.getText(TABLE_ACC_STATE_EMPTY) : ""; - } - - let childNodes = [] as Array; - const descriptions = [] as Array; - const accessibilityInfo = (element as any).accessibilityInfo as AccessibilityInfo | undefined; - if (accessibilityInfo) { - const { - type, description, required, disabled, readonly, children, - } = accessibilityInfo; - - childNodes = children || []; - type && descriptions.push(type); - description && descriptions.push(description); - - if (!lessDetails) { - required && descriptions.push(i18nBundle.getText(TABLE_ACC_STATE_REQUIRED)); - disabled && descriptions.push(i18nBundle.getText(TABLE_ACC_STATE_DISABLED)); - readonly && descriptions.push(i18nBundle.getText(TABLE_ACC_STATE_READONLY)); - } - } else if (element.localName === "slot") { - childNodes = (element as HTMLSlotElement).assignedNodes({ flatten: true }); - } else { - childNodes = element.shadowRoot ? [...element.shadowRoot.childNodes] : [...element.childNodes]; - } - - childNodes.forEach(child => { - const childDescription = getAccessibilityDescription(child, lessDetails, false); - childDescription && descriptions.push(childDescription); - }); - - if (_isRootElement) { - const hasDescription = descriptions.length > 0; - if (!hasDescription || !lessDetails) { - const tabbables = getTabbableElements(element); - const bundleKey = [ - hasDescription ? "" : TABLE_ACC_STATE_EMPTY, - TABLE_CELL_SINGLE_CONTROL, - TABLE_CELL_MULTIPLE_CONTROLS, - ][Math.min(tabbables.length, 2)]; - if (bundleKey) { - hasDescription && descriptions.push("."); - descriptions.push(i18nBundle.getText(bundleKey)); - } - } - } - - return descriptions.join(" ").trim(); -}; - /** * Handles the custom announcement for the ui5-table. * @@ -135,6 +29,10 @@ class TableCustomAnnouncement extends TableExtension { this._table = table; } + private get i18nBundle() { + return (this._table.constructor as typeof Table).i18nBundle; + } + _onfocusin(e: FocusEvent, eventOrigin: HTMLElement) { const tableAttribute = this._tableAttributes.find(attr => eventOrigin.hasAttribute(attr)); if (!tableAttribute) { @@ -153,17 +51,17 @@ class TableCustomAnnouncement extends TableExtension { _onfocusout(e: FocusEvent, eventOrigin: HTMLElement) { const isTableElement = this._tableAttributes.some(attr => eventOrigin.hasAttribute(attr)); - isTableElement && updateInvisibleText(eventOrigin); + isTableElement && applyCustomAnnouncement(eventOrigin); } _handleTableElementFocusin(element: HTMLElement) { - const description = getAccessibilityDescription(element); - updateInvisibleText(element, description); + const description = getCustomAnnouncement(element); + applyCustomAnnouncement(element, description); } _handleTableHeaderRowFocusin(headerRow: TableHeaderRow) { const descriptions = [ - i18nBundle.getText(TABLE_COLUMN_HEADER_ROW), + this.i18nBundle.getText(TABLE_COLUMN_HEADER_ROW), ]; if (headerRow._hasSelector) { @@ -171,7 +69,7 @@ class TableCustomAnnouncement extends TableExtension { } headerRow._visibleCells.forEach(headerCell => { - const cellDescription = getAccessibilityDescription(headerCell, true); + const cellDescription = getCustomAnnouncement(headerCell, { lessDetails: true }); descriptions.push(cellDescription); }); @@ -179,7 +77,7 @@ class TableCustomAnnouncement extends TableExtension { descriptions.push(headerRow._i18nRowActions); } - updateInvisibleText(headerRow, descriptions); + applyCustomAnnouncement(headerRow, descriptions); } _handleTableRowFocusin(row: TableRow) { @@ -188,25 +86,25 @@ class TableCustomAnnouncement extends TableExtension { } const descriptions = [ - i18nBundle.getText(TABLE_ROW), - i18nBundle.getText(TABLE_ROW_INDEX, row.ariaRowIndex!, this._table._ariaRowCount), + this.i18nBundle.getText(TABLE_ROW), + this.i18nBundle.getText(TABLE_ROW_INDEX, row.ariaRowIndex!, this._table._ariaRowCount), ]; if (row._isSelected) { - descriptions.push(i18nBundle.getText(TABLE_ROW_SELECTED)); + descriptions.push(this.i18nBundle.getText(TABLE_ROW_SELECTED)); } if (row._isNavigable) { - descriptions.push(i18nBundle.getText(TABLE_ROW_NAVIGABLE)); + descriptions.push(this.i18nBundle.getText(TABLE_ROW_NAVIGABLE)); } else if (row.interactive) { - descriptions.push(i18nBundle.getText(TABLE_ROW_ACTIVE)); + descriptions.push(this.i18nBundle.getText(TABLE_ROW_ACTIVE)); } const cells = [...row._visibleCells, ...row._popinCells]; cells.flatMap(cell => { return cell._popin ? [cell._popinHeader!, cell._popinContent!] : [cell._headerCell!, cell]; }).forEach(node => { - const nodeDescription = getAccessibilityDescription(node, true); + const nodeDescription = getCustomAnnouncement(node, { lessDetails: true }); descriptions.push(nodeDescription); }); @@ -215,21 +113,21 @@ class TableCustomAnnouncement extends TableExtension { } if (row._renderNavigated && row.navigated) { - descriptions.push(i18nBundle.getText(TABLE_ROW_NAVIGATED)); + descriptions.push(this.i18nBundle.getText(TABLE_ROW_NAVIGATED)); } - updateInvisibleText(row, descriptions); + applyCustomAnnouncement(row, descriptions); } _handleTableCellFocusin(cell: TableCell) { if (cell.hasAttribute("data-ui5-table-popin-cell")) { const popinCells = (cell.getDomRef() as HTMLSlotElement).assignedNodes({ flatten: true }) as TableCell[]; const descriptions = popinCells.flatMap(popinCell => { - const headerDescription = getAccessibilityDescription(popinCell._popinHeader!); - const contentDescription = getAccessibilityDescription(popinCell._popinContent!); + const headerDescription = getCustomAnnouncement(popinCell._popinHeader!); + const contentDescription = getCustomAnnouncement(popinCell._popinContent!); return [headerDescription, contentDescription]; }); - updateInvisibleText(cell, descriptions); + applyCustomAnnouncement(cell, descriptions); } else { this._handleTableElementFocusin(cell); } diff --git a/packages/main/src/TableHeaderRowTemplate.tsx b/packages/main/src/TableHeaderRowTemplate.tsx index 8835e75dd45f..134e87254249 100644 --- a/packages/main/src/TableHeaderRowTemplate.tsx +++ b/packages/main/src/TableHeaderRowTemplate.tsx @@ -17,7 +17,7 @@ export default function TableHeaderRowTemplate(this: TableHeaderRow, ariaColInde aria-colindex={ariaColIndex++} data-ui5-table-selection-cell data-ui5-table-cell-fixed - data-ui5-table-acc-text="" + data-ui5-acc-text="" > { !this._isMultiSelect ? <> diff --git a/packages/main/src/TableRowTemplate.tsx b/packages/main/src/TableRowTemplate.tsx index 5e44c7825df4..5d722f0970a0 100644 --- a/packages/main/src/TableRowTemplate.tsx +++ b/packages/main/src/TableRowTemplate.tsx @@ -15,7 +15,7 @@ export default function TableRowTemplate(this: TableRow, ariaColIndex: number = aria-colindex={ariaColIndex++} data-ui5-table-selection-cell data-ui5-table-cell-fixed - data-ui5-table-acc-text="" + data-ui5-acc-text="" > { this._isMultiSelect ? 0 && { this._flexibleActions.map(action => ( diff --git a/packages/main/src/TableSelectionMulti.ts b/packages/main/src/TableSelectionMulti.ts index 42e0824d2d22..36ad46d319e8 100644 --- a/packages/main/src/TableSelectionMulti.ts +++ b/packages/main/src/TableSelectionMulti.ts @@ -9,10 +9,10 @@ import type TableRowBase from "./TableRowBase.js"; import type TableSelectionMultiHeaderSelector from "./types/TableSelectionMultiHeaderSelector.js"; import { TABLE_COLUMNHEADER_SELECTALL_DESCRIPTION, - TABLE_COLUMNHEADER_SELECTALL_CHECKED, - TABLE_COLUMNHEADER_SELECTALL_NOT_CHECKED, TABLE_COLUMNHEADER_CLEARALL_DESCRIPTION, - TABLE_ACC_STATE_DISABLED, + CHECKBOX_CHECKED, + CHECKBOX_NOT_CHECKED, + ACC_STATE_DISABLED, } from "./generated/i18n/i18n-defaults.js"; /** @@ -185,10 +185,10 @@ class TableSelectionMulti extends TableSelectionBase { const i18nBundle = (this._table.constructor as typeof Table).i18nBundle; if (this.headerSelector === "SelectAll") { description = i18nBundle.getText(TABLE_COLUMNHEADER_SELECTALL_DESCRIPTION); - description += seperator + i18nBundle.getText(this.areAllRowsSelected() ? TABLE_COLUMNHEADER_SELECTALL_CHECKED : TABLE_COLUMNHEADER_SELECTALL_NOT_CHECKED); + description += seperator + i18nBundle.getText(this.areAllRowsSelected() ? CHECKBOX_CHECKED : CHECKBOX_NOT_CHECKED); } else { description = i18nBundle.getText(TABLE_COLUMNHEADER_CLEARALL_DESCRIPTION); - description += this.getSelectedRows().length === 0 ? seperator + i18nBundle.getText(TABLE_ACC_STATE_DISABLED) : ""; + description += this.getSelectedRows().length === 0 ? seperator + i18nBundle.getText(ACC_STATE_DISABLED) : ""; } return description; } diff --git a/packages/main/src/i18n/messagebundle.properties b/packages/main/src/i18n/messagebundle.properties index 47c006c191b9..697f86811a21 100644 --- a/packages/main/src/i18n/messagebundle.properties +++ b/packages/main/src/i18n/messagebundle.properties @@ -1,6 +1,24 @@ #This is the resource bundle for the UI5 Web Components #__ldi.translation.uuid=96bea51a-d5e3-46f0-b1d1-514d97be02ec +#XACT: ARIA announcement for the required state +ACC_STATE_REQUIRED=Required + +#XACT: ARIA announcement for the disabled state +ACC_STATE_DISABLED=Disabled + +#XACT: ARIA announcement for the readonly state +ACC_STATE_READONLY=Read Only + +#XACT: ARIA announcement for the empty state +ACC_STATE_EMPTY=Empty + +#XACT: ARIA announcement for an element with a single interactive element +ACC_STATE_SINGLE_CONTROL=Includes element + +#XACT: ARIA announcement for an element with multiple interactive elements +ACC_STATE_MULTIPLE_CONTROLS=Includes elements + #XBUT: Card Content aria-label text ARIA_LABEL_CARD_CONTENT=Card Content @@ -836,16 +854,8 @@ TABLE_NO_DATA=No Data TABLE_SINGLE_SELECTABLE=Single Selection Table #XACT: ARIA announcement for the table that allows multi selection TABLE_MULTI_SELECTABLE=Multi Selection Table -#XACT: accessibility text for the cell that contains a single interactive element -TABLE_CELL_SINGLE_CONTROL=Includes element -#XACT: accessibility text for the cell that contains multiple interactive elements -TABLE_CELL_MULTIPLE_CONTROLS=Includes elements #XACT: ARIA description for the selection column header when select all checkbox is shown TABLE_COLUMNHEADER_SELECTALL_DESCRIPTION=Select All Checkbox -#XACT: ARIA description for the selection column header when select all checkbox is checked -TABLE_COLUMNHEADER_SELECTALL_CHECKED=Checked -#XACT: ARIA description for the selection column header when select all checkbox is not checked -TABLE_COLUMNHEADER_SELECTALL_NOT_CHECKED=Not Checked #XACT: ARIA description for the selection column header when clear all button is shown TABLE_COLUMNHEADER_CLEARALL_DESCRIPTION=Clear All Button #XACT: ARIA announcement of a table row @@ -880,14 +890,6 @@ TABLE_GENERATED_BY_AI=Generated by AI TABLE_SELECT_ALL_ROWS=Select All Rows #XTOL: Tooltip of the header row checkbox to deselect all rows in the table TABLE_DESELECT_ALL_ROWS=Deselect All Rows -#XACT: Accessibility state which should be announced by screenreaders if the element in a table cell is disabled -TABLE_ACC_STATE_DISABLED=Disabled -#XACT: state which should be announced by screenreaders if the element in a table cell is readonly -TABLE_ACC_STATE_READONLY=Read Only -#XACT: state which should be announced by screenreaders if the element in a table cell is required -TABLE_ACC_STATE_REQUIRED=Required -#XACT: state which should be announced by screenreaders if the table cell is empty -TABLE_ACC_STATE_EMPTY=Empty #XFLD: Text for the "Yesterday" option in the DynamicDateRange component. DYNAMIC_DATE_RANGE_YESTERDAY_TEXT=Yesterday