@ui5/webcomponents 2.15.0-rc.3 → 2.15.0

package/src/TableHeaderRowTemplate.tsx

@@ -15,8 +15,9 @@ export default function TableHeaderRowTemplate(this: TableHeaderRow, ariaColInde
 					aria-label={this._i18nSelection}
 					aria-description={this._selectionCellAriaDescription}
 					aria-colindex={ariaColIndex++}
+					data-ui5-table-selection-cell
 					data-ui5-table-cell-fixed
-					data-ui5-table-selection-component
+					data-ui5-table-acc-text=""
 				>
 					{ !this._isMultiSelect ?
 						<></>
@@ -42,20 +43,26 @@ export default function TableHeaderRowTemplate(this: TableHeaderRow, ariaColInde
 				</TableHeaderCell>
 			}
 
-			{ this._visibleCells.map(cell => {
+			{ this.cells.flatMap(cell => {
+				if (cell._popin) {
+					cell.ariaColIndex = null;
+					return [];
+				}
 				cell.ariaColIndex = `${ariaColIndex++}`;
-				return <slot name={cell._individualSlot} key={cell._individualSlot}></slot>;
+				return [<slot name={cell._individualSlot}></slot>];
 			})}
 
 			{ this._rowActionCount > 0 &&
 				<TableHeaderCell id="actions-cell"
 					aria-colindex={ariaColIndex++}
-					aria-label={this._i18nRowActions}
-				></TableHeaderCell>
+				>
+					<div id="actions-cell-content">{this._i18nRowActions}</div>
+				</TableHeaderCell>
 			}
 
 			{ this._popinCells.length > 0 &&
 				<TableHeaderCell id="popin-cell"
+					aria-colindex={ariaColIndex++}
 					aria-label={this._i18nRowPopin}
 					data-excluded-from-navigation
 				></TableHeaderCell>

package/src/TableRowTemplate.tsx

@@ -3,17 +3,19 @@ import CheckBox from "./CheckBox.js";
 import RadioButton from "./RadioButton.js";
 import Button from "./Button.js";
 import ButtonDesign from "./types/ButtonDesign.js";
+import iconOverflow from "@ui5/webcomponents-icons/dist/overflow.js";
 import type TableRow from "./TableRow.js";
 
-export default function TableRowTemplate(this: TableRow) {
+export default function TableRowTemplate(this: TableRow, ariaColIndex: number = 1) {
 	return (
 		<>
 			{ this._hasSelector &&
-				<TableCell
-					id="selection-cell"
+				<TableCell id="selection-cell"
 					aria-selected={this._isSelected}
+					aria-colindex={ariaColIndex++}
+					data-ui5-table-selection-cell
 					data-ui5-table-cell-fixed
-					data-ui5-table-selection-component
+					data-ui5-table-acc-text=""
 				>
 					{ this._isMultiSelect ?
 						<CheckBox id="selection-component"
@@ -34,20 +36,27 @@ export default function TableRowTemplate(this: TableRow) {
 				</TableCell>
 			}
 
-			{ this._visibleCells.map(cell => (
-				<slot name={cell._individualSlot}></slot>
-			))}
+			{ this.cells.flatMap(cell => {
+				if (cell._popin) {
+					cell.ariaColIndex = null;
+					return [];
+				}
+				cell.ariaColIndex = `${ariaColIndex++}`;
+				return [<slot name={cell._individualSlot}></slot>];
+			})}
 
 			{ this._rowActionCount > 0 &&
-				<TableCell id="actions-cell">
+				<TableCell id="actions-cell"
+					aria-colindex={ariaColIndex++}
+					data-ui5-table-acc-text={this._actionCellAccText}
+				>
 					{ this._flexibleActions.map(action => (
 						<slot name={action._individualSlot}></slot>
 					))}
 
 					{ this._hasOverflowActions &&
-						<Button
-							id="overflow"
-							icon="overflow"
+						<Button id="overflow"
+							icon={iconOverflow}
 							design={ButtonDesign.Transparent}
 							onClick={this._onOverflowButtonClick}
 						></Button>
@@ -60,13 +69,19 @@ export default function TableRowTemplate(this: TableRow) {
 			}
 
 			{ this._renderNavigated &&
-				<TableCell id="navigated-cell" data-excluded-from-navigation aria-hidden={true}>
+				<TableCell id="navigated-cell"
+					data-excluded-from-navigation
+					aria-hidden={true}
+				>
 					<div id="navigated"></div>
 				</TableCell>
 			}
 
 			{ this._popinCells.length > 0 &&
-				<TableCell id="popin-cell">
+				<TableCell id="popin-cell"
+					data-ui5-table-popin-cell
+					aria-colindex={ariaColIndex++}
+				>
 					{ this._popinCells.map(cell => (
 						<slot name={cell._individualSlot}></slot>
 					))}

package/src/i18n/messagebundle.properties

@@ -729,24 +729,42 @@ 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=Contains Control
+#XACT: accessibility text for the cell that contains multiple interactive elements
+TABLE_CELL_MULTIPLE_CONTROLS=Contains Controls
 #XACT: ARIA description for the selection column header when select all checkbox is shown
-TABLE_COLUMNHEADER_SELECTALL_DESCRIPTION=Contains Select All Checkbox
+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=Contains Clear All Button
-#XACT: ARIA description for the selection column header when clear all button is disabled
-TABLE_COLUMNHEADER_CLEARALL_DISABLED=Disabled
+TABLE_COLUMNHEADER_CLEARALL_DESCRIPTION=Clear All Button
+#XACT: ARIA announcement of a table row
+TABLE_ROW=Row
 #XACT: Description for the popin containing column header
 TABLE_ROW_POPIN=Row Popin
+#XACT: ARIA announcement for the position of a row among all table rows
+TABLE_ROW_INDEX={0} of {1}
+#XACT: ARIA announcement for the selected table row
+TABLE_ROW_SELECTED=Selected
+#XACT: ARIA announcement for the active clickable table rows
+TABLE_ROW_ACTIVE=Is Active
+#XACT: ARIA announcement for the navigable table rows
+TABLE_ROW_NAVIGABLE=Has Details
+#XACT: ARIA description for the column header row of the table
+TABLE_COLUMN_HEADER_ROW=Column Header Row
 #XTXT: Text for the growing button
 TABLE_MORE=More
 #XACT: ARIA description for the growing button
 TABLE_MORE_DESCRIPTION=To load more rows, press Enter or Space
 #XACT: ARIA description for the row action of the header cell
 TABLE_ROW_ACTIONS=Row Actions
+#XACT: Screenreader announcement when a single action is available
+TABLE_ROW_SINGLE_ACTION=1 row action available
+#XACT: Screenreader announcement when several actions are available
+TABLE_ROW_MULTIPLE_ACTIONS={0} row actions available
 #XACT: ARIA description for the row action navigation
 TABLE_NAVIGATION=Navigation
 #XTOL: Tooltip for the AI button in the column header to indicate that the column is generated by AI
@@ -755,6 +773,14 @@ 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
@@ -779,8 +805,6 @@ DYNAMIC_DATE_RANGE_EMPTY_SELECTED_TEXT=Choose Dates
 
 #XFLD: Text for icon that navigates back to the previous page in the DynamicDateRange component.
 DYNAMIC_DATE_RANGE_NAVIGATION_ICON_TOOLTIP=Navigate back
-#XACT: ARIA description for the column header row of the table
-TABLE_COLUMN_HEADER_ROW=Column Header Row
 
 #XFLD: Text for the "Last Days" option in the DynamicDateRange component.
 DYNAMIC_DATE_RANGE_LAST_DAYS_TEXT=Last X Days

package/src/i18n/messagebundle_en.properties

@@ -483,7 +483,7 @@ TABLE_MULTI_SELECTABLE=Multi Selection Table
 TABLE_COLUMNHEADER_SELECTALL_DESCRIPTION=Contains Select All Checkbox
 TABLE_COLUMNHEADER_SELECTALL_CHECKED=Checked
 TABLE_COLUMNHEADER_SELECTALL_NOT_CHECKED=Not Checked
-TABLE_COLUMNHEADER_CLEARALL_DESCRIPTION=Contains Clear All Button
+TABLE_COLUMNHEADER_CLEARALL_DESCRIPTION=Clear All Button
 TABLE_COLUMNHEADER_CLEARALL_DISABLED=Disabled
 TABLE_ROW_POPIN=Row Popin
 TABLE_MORE=More

package/src/i18n/messagebundle_fr.properties

@@ -482,7 +482,7 @@ TABLE_SINGLE_SELECTABLE=Table à sélection simple
 TABLE_MULTI_SELECTABLE=Table à sélection multiple
 TABLE_COLUMNHEADER_SELECTALL_DESCRIPTION=Contient la case à cocher Sélectionner tout
 TABLE_COLUMNHEADER_SELECTALL_CHECKED=Activé
-TABLE_COLUMNHEADER_SELECTALL_NOT_CHECKED=Non contrôlé
+TABLE_COLUMNHEADER_SELECTALL_NOT_CHECKED=Non activé
 TABLE_COLUMNHEADER_CLEARALL_DESCRIPTION=Contient le bouton Tout réinitialiser
 TABLE_COLUMNHEADER_CLEARALL_DISABLED=Désactivé
 TABLE_ROW_POPIN=Boîte de dialogue de ligne
@@ -511,25 +511,25 @@ DYNAMIC_DATE_RANGE_EMPTY_SELECTED_TEXT=Sélectionner des dates
 DYNAMIC_DATE_RANGE_NAVIGATION_ICON_TOOLTIP=Revenir en arrière
 TABLE_COLUMN_HEADER_ROW=Ligne d''en-tête de colonne
 
-DYNAMIC_DATE_RANGE_LAST_DAYS_TEXT=X derniers jours
+DYNAMIC_DATE_RANGE_LAST_DAYS_TEXT=X derniers jours
 
-DYNAMIC_DATE_RANGE_NEXT_DAYS_TEXT=X prochains jours
+DYNAMIC_DATE_RANGE_NEXT_DAYS_TEXT=X prochains jours
 
-DYNAMIC_DATE_RANGE_LAST_WEEKS_TEXT=X dernières semaines
+DYNAMIC_DATE_RANGE_LAST_WEEKS_TEXT=X dernières semaines
 
-DYNAMIC_DATE_RANGE_NEXT_WEEKS_TEXT=X prochaines semaines
+DYNAMIC_DATE_RANGE_NEXT_WEEKS_TEXT=X prochaines semaines
 
-DYNAMIC_DATE_RANGE_LAST_MONTHS_TEXT=X derniers mois
+DYNAMIC_DATE_RANGE_LAST_MONTHS_TEXT=X derniers mois
 
-DYNAMIC_DATE_RANGE_NEXT_MONTHS_TEXT=X prochains mois
+DYNAMIC_DATE_RANGE_NEXT_MONTHS_TEXT=X prochains mois
 
-DYNAMIC_DATE_RANGE_LAST_QUARTERS_TEXT=X derniers trimestres
+DYNAMIC_DATE_RANGE_LAST_QUARTERS_TEXT=X derniers trimestres
 
-DYNAMIC_DATE_RANGE_NEXT_QUARTERS_TEXT=X prochains trimestres
+DYNAMIC_DATE_RANGE_NEXT_QUARTERS_TEXT=X prochains trimestres
 
-DYNAMIC_DATE_RANGE_LAST_YEARS_TEXT=X dernières années
+DYNAMIC_DATE_RANGE_LAST_YEARS_TEXT=X dernières années
 
-DYNAMIC_DATE_RANGE_NEXT_YEARS_TEXT=X prochaines années
+DYNAMIC_DATE_RANGE_NEXT_YEARS_TEXT=X prochaines années
 
 DYNAMIC_DATE_RANGE_VALUE_LABEL_TEXT=Valeur pour X
 
@@ -545,8 +545,8 @@ DYNAMIC_DATE_RANGE_QUARTERS_UNIT_TEXT=Trimestres
 
 DYNAMIC_DATE_RANGE_YEARS_UNIT_TEXT=Années
 
-DYNAMIC_DATE_RANGE_LAST_COMBINED_TEXT=X derniers {0} (inclus)
+DYNAMIC_DATE_RANGE_LAST_COMBINED_TEXT=X derniers {0} (inclus)
 
-DYNAMIC_DATE_RANGE_NEXT_COMBINED_TEXT=X prochains {0} (inclus)
+DYNAMIC_DATE_RANGE_NEXT_COMBINED_TEXT=X prochains {0} (inclus)
 
 DYNAMIC_DATE_RANGE_INCLUDED_TEXT=(Inclus)

package/src/themes/TableCell.css

@@ -4,14 +4,15 @@
 	align-items: center;
 }
 
-:host([_popin]) .popin-header {
+:host([_popin]) #popin-header {
 	color: var(--sapContent_LabelColor);
 }
 
-.popin-colon {
+#popin-colon {
 	padding-inline-end: 0.5rem;
+	white-space: pre;
 }
 
-.popin-header {
+#popin-header {
 	display: contents;
 }

package/src/themes/TableHeaderRow.css

@@ -25,3 +25,8 @@
 	width: var(--_ui5_checkbox_inner_width_height);
 	height: var(--_ui5_checkbox_inner_width_height);
 }
+
+#actions-cell-content {
+	position: absolute;
+	clip: rect(0, 0, 0, 0);
+}