@ui5/webcomponents 2.10.0-rc.2 → 2.10.0

package/cypress/specs/Form.cy.tsx

@@ -777,7 +777,8 @@ describe("Accessibility", () => {
 		cy.get("@form")
 			.shadow()
 			.find(".ui5-form-root")
-			.should("have.attr", "role", "form");
+			.should("have.attr", "role", "form")
+			.and("not.have.attr", "aria-label", "Form");
 
 		cy.get("@form")
 			.should("have.attr", "data-sap-ui-fastnavgroup", "true");
@@ -793,6 +794,57 @@ describe("Accessibility", () => {
 			});
 	});
 
+	it("tests 'role' and 'aria-label' of form without header", () => {
+		cy.mount(<Form>
+			<FormItem>
+				<Label>Name:</Label>
+				<Text>Red Point Stores</Text>
+			</FormItem>
+			<FormItem>
+				<Label>Twitter:</Label>
+				<Text>@sap</Text>
+			</FormItem>
+			<FormItem>
+				<Label>Name:</Label>
+				<Text>Red Point Stores</Text>
+			</FormItem>
+		</Form>);
+
+		cy.get("[ui5-form]")
+			.as("form");
+
+		cy.get("@form")
+			.shadow()
+			.find(".ui5-form-root")
+			.should("have.attr", "role", "form")
+			.and("have.attr", "aria-label", "Form");
+	});
+
+	it("tests 'aria-label' via 'accessibleName'", () => {
+		cy.mount(<Form headerText="Form header text" accessibleName="basic form">
+			<FormItem>
+				<Label>Name:</Label>
+				<Text>Red Point Stores</Text>
+			</FormItem>
+			<FormItem>
+				<Label>Twitter:</Label>
+				<Text>@sap</Text>
+			</FormItem>
+			<FormItem>
+				<Label>Name:</Label>
+				<Text>Red Point Stores</Text>
+			</FormItem>
+		</Form>);
+
+		cy.get("[ui5-form]")
+			.as("form");
+
+		cy.get("@form")
+			.shadow()
+			.find(".ui5-form-root")
+			.should("have.attr", "aria-label", "basic form");
+	});
+
 	it("tests F6 navigation", () => {
 		cy.mount(
 			<>
@@ -937,6 +989,34 @@ ui5AccDescribe("Automated accessibility tests", () => {
 			</Form>
 		);
 
+		cy.ui5CheckA11y();
+	});
+
+	it("without header", () => {
+		cy.mount(
+			<Form>
+				<FormItem>
+					<Label slot="labelContent">Name:</Label>
+					<Text>Red Point Stores</Text>
+				</FormItem>
+				
+				<FormItem>
+					<Label slot="labelContent">ZIP Code/City:</Label>
+					<Text>411 Maintown</Text>
+				</FormItem>
+				
+				<FormItem>
+					<Label slot="labelContent">Street:</Label>
+					<Text>Main St 1618</Text>
+				</FormItem>
+
+				<FormItem>
+					<Label slot="labelContent">Country:</Label>
+					<Text>Germany</Text>
+				</FormItem>
+			</Form>
+		);
+
 		cy.ui5CheckA11y();
 	})
 });

package/cypress/specs/FormSupport.cy.tsx

@@ -875,6 +875,39 @@ describe("Form support", () => {
 			.should("be.equal", "time_picker3=ok&time_picker4=1:10:10 PM");
 	});
 
+	it("Button's click doesn't submit form on prevent default", () => {
+		cy.mount(<form method="get">
+			<Button id="b1" type="Submit">Preventable button</Button>
+		</form>);
+
+		cy.get("#b1")
+			.then($item => {
+				$item.get(0).addEventListener("ui5-click", e => e.preventDefault());
+				$item.get(0).addEventListener("ui5-click", cy.stub().as("click"));
+			});
+
+		cy.get("form")
+			.then($item => {
+				$item.get(0).addEventListener("submit", e => e.preventDefault());
+				$item.get(0).addEventListener("submit", cy.stub().as("submit"));
+			});
+
+		cy.get("#b1")
+			.realClick();
+
+		cy.get("#b1")
+			.realPress("Enter");
+
+		cy.get("#b1")
+			.realPress("Space");
+
+		cy.get("@click")
+			.should("have.been.calledThrice");
+
+		cy.get("@submit")
+			.should("have.not.been.called");
+	});
+
 	it("Normal button does not submit forms", () => {
 		cy.mount(<form method="get">
 			<Button id="b1">Does not submit forms</Button>

package/cypress/support/commands/DateTimePicker.commands.ts

@@ -1,60 +1,105 @@
-Cypress.Commands.add("ui5DateTimePickerOpen", selector => {
-	cy.get(selector)
-		.then($dateTimePicker => {
-			cy.wrap($dateTimePicker).invoke("attr", "open", true);
-		});
+import Button from "../../../src/Button.js";
+import type DateTimePicker from "../../../src/DateTimePicker.js";
+import type ResponsivePopover from "../../../src/ResponsivePopover.js";
+
+Cypress.Commands.add("ui5DateTimePickerOpen", { prevSubject: true }, (subject: JQuery<DateTimePicker>) => {
+	cy.wrap(subject).invoke("prop", "open", true);
+});
+
+Cypress.Commands.add("ui5DateTimePickerClose", { prevSubject: true }, (subject: JQuery<DateTimePicker>) => {
+	cy.wrap(subject).invoke("prop", "open", false);
 });
 
-Cypress.Commands.add("ui5DateTimePickerClose", selector => {
-	cy.get(selector).invoke("attr", "open", false);
+Cypress.Commands.add("ui5DateTimePickerGetPopover", { prevSubject: true }, (subject: JQuery<DateTimePicker>) => {
+	return cy.wrap(subject)
+		.shadow()
+		.find<ResponsivePopover>("[ui5-responsive-popover]");
 });
 
-Cypress.Commands.add("ui5DateTimePickerGetPopover", selector => {
-	return cy.get(selector)
+Cypress.Commands.add("ui5DateTimePickerExpectToBeOpen", { prevSubject: true }, (subject: JQuery<DateTimePicker>) => {
+	cy.wrap(subject)
+		.should("have.prop", "open", true);
+
+	cy.wrap(subject)
 		.shadow()
-		.find("ui5-responsive-popover");
+		.find<ResponsivePopover>("[ui5-responsive-popover]")
+		.ui5ResponsivePopoverOpened();
 });
 
-Cypress.Commands.add("ui5DateTimePickerIsOpen", selector => {
-	return cy
-		.get(selector)
-		.invoke("attr", "open")
-		.then(attr => Boolean(attr));
+Cypress.Commands.add("ui5DateTimePickerExpectToBeClosed", { prevSubject: true }, (subject: JQuery<DateTimePicker>) => {
+	cy.wrap(subject)
+		.should("have.prop", "open", false);
+
+	cy.wrap(subject)
+		.shadow()
+		.find<ResponsivePopover>("[ui5-responsive-popover]")
+		.ui5ResponsivePopoverClosed();
 });
 
-Cypress.Commands.add("ui5DateTimePickerGetSubmitButton", selector => {
-	return cy.get(selector)
+Cypress.Commands.add("ui5DateTimePickerGetSubmitButton", { prevSubject: true }, (subject: JQuery<DateTimePicker>) => {
+	return cy.wrap(subject)
 		.shadow()
-		.find("ui5-responsive-popover")
-		.find("#ok");
+		.find("[ui5-responsive-popover]")
+		.find<Button>("#ok");
 });
 
-Cypress.Commands.add("ui5DateTimePickerGetCancelButton", selector => {
-	return cy
-		.get(selector)
+Cypress.Commands.add("ui5DateTimePickerGetCancelButton", { prevSubject: true }, (subject: JQuery<DateTimePicker>) => {
+	return cy.wrap(subject)
 		.shadow()
-		.find("ui5-responsive-popover")
-		.find("#cancel");
+		.find("[ui5-responsive-popover]")
+		.find<Button>("#cancel");
 });
 
-Cypress.Commands.add("ui5DateTimePickerTimeSelectionClocksCount", selector => {
-	return cy
-		.get(selector)
+Cypress.Commands.add("ui5DateTimePickerTimeSelectionClocksCount", { prevSubject: true }, (subject: JQuery<DateTimePicker>) => {
+	return cy.wrap(subject)
 		.shadow()
-		.find("ui5-responsive-popover")
-		.find("ui5-time-selection-clocks")
+		.find("[ui5-responsive-popover]")
+		.find("[ui5-time-selection-clocks]")
 		.shadow()
-		.find("ui5-time-picker-clock")
+		.find("[ui5-time-picker-clock]")
 		.its("length");
 });
 
-Cypress.Commands.add("ui5DateTimePickerPeriodSegmentedButtonCount", selector => {
-	return cy
-		.get(selector)
+Cypress.Commands.add("ui5DateTimePickerPeriodSegmentedButtonCount", { prevSubject: true }, (subject: JQuery<DateTimePicker>) => {
+	return cy.wrap(subject)
 		.shadow()
-		.find("ui5-responsive-popover")
-		.find("ui5-time-selection-clocks")
+		.find("[ui5-responsive-popover]")
+		.find("[ui5-time-selection-clocks]")
 		.shadow()
-		.find("ui5-segmented-button")
+		.find("[ui5-segmented-button]")
 		.its("length");
 });
+
+declare global {
+	namespace Cypress {
+		interface Chainable {
+			ui5DateTimePickerOpen(
+				this: Chainable<JQuery<DateTimePicker>>,
+			): Chainable<void>;
+			ui5DateTimePickerExpectToBeOpen(
+				this: Chainable<JQuery<DateTimePicker>>,
+			): Chainable<void>;
+			ui5DateTimePickerClose(
+				this: Chainable<JQuery<DateTimePicker>>
+			): Chainable<void>;
+			ui5DateTimePickerExpectToBeClosed(
+				this: Chainable<JQuery<DateTimePicker>>,
+			): Chainable<void>;
+			ui5DateTimePickerGetPopover(
+				this: Chainable<JQuery<DateTimePicker>>
+			): Chainable<JQuery<ResponsivePopover>>;
+			ui5DateTimePickerGetSubmitButton(
+				this: Chainable<JQuery<DateTimePicker>>
+			): Chainable<JQuery<Button>>;
+			ui5DateTimePickerGetCancelButton(
+				this: Chainable<JQuery<DateTimePicker>>
+			): Chainable<JQuery<Button>>;
+			ui5DateTimePickerTimeSelectionClocksCount(
+				this: Chainable<JQuery<DateTimePicker>>
+			): Chainable<number>;
+			ui5DateTimePickerPeriodSegmentedButtonCount(
+				this: Chainable<JQuery<DateTimePicker>>
+			): Chainable<number>;
+		}
+	}
+}