fix(ui5-list): add missing accessible description for growing button

packages/main/cypress/specs/List.cy.tsx

@@ -172,6 +172,37 @@ describe("List Tests", () => {
 			.find("[id$='growing-btn']")
 			.should("not.have.attr", "aria-labelledby");
 	});
+
+	it("tests growing button accessible description property", () => {
+		cy.mount(
+			<List growing="Button">
+				<ListItemStandard>Product 1</ListItemStandard>
+				<ListItemStandard>Product 2</ListItemStandard>
+				<ListItemStandard>Product 3</ListItemStandard>
+			</List>
+		);
+
+		cy.get("[ui5-list]")
+			.as("list");
+
+		cy.get("@list").invoke('prop', 'accessibilityAttributes', {
+			growingButton: {
+				description: "This button will load additional products to the list. Click or press Enter to see more items."
+			}
+		});
+
+		cy.get("@list")
+			.shadow()
+			.find("[id$='growing-btn']")
+			.should("have.attr", "aria-describedby");
+
+		cy.get("@list")
+			.shadow()
+			.find("[id$='growingButton-description']")
+			.should("exist")
+			.should("have.class", "ui5-hidden-text")
+			.should("contain.text", "This button will load additional products to the list. Click or press Enter to see more items.");
+	});
 });
 
 describe("List - Growing with scroll", () => {

packages/main/src/List.ts

@@ -111,6 +111,7 @@ type ListMoveEventDetail = MoveEventDetail;
 type ListAccessibilityAttributes = {
 	growingButton?: {
 		name?: string,
+		description?: string,
 	},
 }
 
@@ -407,13 +408,16 @@ class List extends UI5Element {
  	*
 	* The accessibilityAttributes object has the following field:
 	*
-	*  - **growingButton**: `growingButton.name`.
+	*  - **growingButton**: `growingButton.name`, `growingButton.description`.
 	*
  	* The accessibility attributes support the following values:
  	*
 	* - **name**: Defines the accessible ARIA name of the growing button.
 	* Accepts any string.
 	*
+	* - **description**: Defines the accessible ARIA description of the growing button.
+	* Accepts any string.
+	*
  	* **Note:** The `accessibilityAttributes` property is in an experimental state and is a subject to change.
 	* @default {}
  	* @public
@@ -731,6 +735,10 @@ class List extends UI5Element {
 		return this.accessibilityAttributes.growingButton?.name ? undefined : `${this._id}-growingButton-text`;
 	}
 
+	get growingButtonAriaDescribedBy() {
+		return this.accessibilityAttributes.growingButton?.description ? `${this._id}-growingButton-description` : undefined;
+	}
+
 	hasGrowingComponent(): boolean {
 		if (this.growsOnScroll) {
 			return this._startMarkerOutOfView;

packages/main/src/ListTemplate.tsx

@@ -97,6 +97,7 @@ function moreRow(this: List) {
 				}}
 				aria-label={this.growingButtonAriaLabel}
 				aria-labelledby={this.growingButtonAriaLabelledBy}
+				aria-describedby={this.growingButtonAriaDescribedBy}
 				onClick={this._onLoadMoreClick}
 				onKeyDown={this._onLoadMoreKeydown}
 				onKeyUp={this._onLoadMoreKeyup}
@@ -111,8 +112,15 @@ function moreRow(this: List) {
 						active>
 					</BusyIndicator>
 				}
-				<span id={`${this._id}-growingButton-text`} class="ui5-growing-button-text" growing-button-text>{this._growingButtonText}</span>
+				<span id={`${this._id}-growingButton-text`} class="ui5-growing-button-text" growing-button-text>
+					{this._growingButtonText}
+				</span>
 			</div>
+			{this.accessibilityAttributes.growingButton?.description &&
+				<span id={`${this._id}-growingButton-description`} class="ui5-hidden-text">
+					{this.accessibilityAttributes.growingButton.description}
+				</span>
+			}
 		</div>
 	);
 }

packages/main/test/pages/List.html

@@ -406,6 +406,18 @@ <h3 id="infoLbl">Items 3/3</h3>
 			<ui5-li >Option 3</ui5-li>
 	</ui5-list>
 
+	<h3>Growing Button with Custom ARIA Name and Description</h3>
+	<ui5-list 
+		id="growingButtonAccessibility" 
+		growing="Button" 
+		growing-button-text="Load More Items"
+		header-text="Accessibility Demo">
+		<ui5-li>Product A</ui5-li>
+		<ui5-li>Product B</ui5-li>
+		<ui5-li>Product C</ui5-li>
+	</ui5-list>
+	<br/><br/>
+
 	<ui5-list
 		id="keyboardTestList"
 		selection-mode="Multiple"
@@ -698,6 +710,7 @@ <h2>With accessible description</h2>
 		var visualizationList = document.getElementById('myList6');
 		var select = document.getElementById('select');
 		var selectWrapping = document.getElementById('selectWrapping');
+		var growingButtonTest = document.getElementById('growingButtonAccessibility');
 
 		var selectionModes = {
 			"None": undefined,
@@ -712,6 +725,13 @@ <h2>With accessible description</h2>
 			0: "0/3", 1: "1/3", 2: "2/3", 3: "3/3"
 		};
 
+		growingButtonTest.accessibilityAttributes = {
+			growingButton: {
+				name: "Load more products",
+				description: "This button will load additional products to the list. Click or press Enter to see more items."
+			}
+		};
+
 		select.addEventListener("ui5-change", function (event) {
 			var value = event.detail.selectedOption.textContent;