feat(ui5-list): add growing-button-accessible-name for More button (#11603)

- Add accessibilityAttributes property with growingButton.name field
- Add growingButtonAriaLabel and growingButtonAriaLabelledBy getters
- Update template to use new accessibility getters
- Add cypress test for growing button accessible name
- Add info for the newly supported property in the docs

Related to: #10671, #10907

Author: NakataCode

docs/2-advanced/09-accessibility.md

@@ -312,6 +312,7 @@ The `accessibilityAttributes` property is currently supported in:
 * [ShellBar](https://sap.github.io/ui5-webcomponents/nightly/components/fiori/ShellBar/)
 * [ShellBarItem](https://sap.github.io/ui5-webcomponents/nightly/components/fiori/ShellBarItem/)
 * [MenuItem](https://sap.github.io/ui5-webcomponents/nightly/components/MenuItem/)
+* [List](https://sap.github.io/ui5-webcomponents/nightly/components/List/)
 
 ---
 

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

@@ -151,6 +151,35 @@ describe("List Tests", () => {
 			.find("[id$='growing-btn']")
 			.should("be.focused");
 	});
+
+	it("tests growing button accessible name property", () => {
+		cy.mount(
+			<List growing="Button">
+				<ListItemStandard>Laptop Lenovo</ListItemStandard>
+				<ListItemStandard>IPhone 3</ListItemStandard>
+				<ListItemStandard>HP Monitor 24</ListItemStandard>
+			</List>
+		);
+	
+		cy.get("[ui5-list]")
+			.as("list");
+	
+		cy.get("@list").invoke('prop', 'accessibilityAttributes', {
+			growingButton: {
+				name: "Load more products from catalog"
+			}
+		});
+
+		cy.get("@list")
+			.shadow()
+			.find("[id$='growing-btn']")
+			.should("have.attr", "aria-label", "Load more products from catalog");
+	
+		cy.get("@list")
+			.shadow()
+			.find("[id$='growing-btn']")
+			.should("not.have.attr", "aria-labelledby");
+	});
 });
 
 describe("List - Accessibility", () => {

packages/main/src/List.ts

@@ -113,6 +113,12 @@ type ListItemClickEventDetail = {
 
 type ListMoveEventDetail = MoveEventDetail;
 
+type ListAccessibilityAttributes = {
+	growingButton?: {
+		name?: string,
+	},
+}
+
 /**
  * @class
  *
@@ -402,6 +408,26 @@ class List extends UI5Element {
 	@property()
 	accessibleName?: string;
 
+	/**
+	* Defines additional accessibility attributes on different areas of the component.
+ 	*
+	* The accessibilityAttributes object has the following field:
+	*
+	*  - **growingButton**: `growingButton.name`.
+	*
+ 	* The accessibility attributes support the following values:
+ 	*
+	* - **name**: Defines the accessible ARIA name of the growing button.
+	* Accepts any string.
+	*
+ 	* **Note:** The `accessibilityAttributes` property is in an experimental state and is a subject to change.
+	* @default {}
+ 	* @public
+ 	* @since 2.13.0
+ 	*/
+	 @property({ type: Object })
+	 accessibilityAttributes: ListAccessibilityAttributes = {};
+
 	/**
 	 * Defines the IDs of the elements that label the component.
 	 * @default undefined
@@ -694,6 +720,14 @@ class List extends UI5Element {
 		return this._associatedDescriptionRefTexts || getEffectiveAriaDescriptionText(this) || this._getDescriptionForGroups();
 	}
 
+	get growingButtonAriaLabel() {
+		return this.accessibilityAttributes.growingButton?.name;
+	}
+
+	get growingButtonAriaLabelledBy() {
+		return this.accessibilityAttributes.growingButton?.name ? undefined : `${this._id}-growingButton-text`;
+	}
+
 	get scrollContainer() {
 		return this.shadowRoot!.querySelector<HTMLElement>(".ui5-list-scroll-container");
 	}
@@ -1454,4 +1488,5 @@ export type {
 	ListItemToggleEventDetail,
 	ListSelectionChangeEventDetail,
 	ListMoveEventDetail,
+	ListAccessibilityAttributes,
 };

packages/main/src/ListTemplate.tsx

@@ -92,7 +92,8 @@ function moreRow(this: List) {
 					"ui5-growing-button-inner": true,
 					"ui5-growing-button-inner-active": this._loadMoreActive,
 				}}
-				aria-labelledby={`${this._id}-growingButton-text`}
+				aria-label={this.growingButtonAriaLabel}
+				aria-labelledby={this.growingButtonAriaLabelledBy}
 				onClick={this._onLoadMoreClick}
 				onKeyDown={this._onLoadMoreKeydown}
 				onKeyUp={this._onLoadMoreKeyup}