|
1 | 1 | import { getFirstFocusableElement } from "@ui5/webcomponents-base/dist/util/FocusableElements.js";
|
| 2 | + |
| 3 | +import Label from "@ui5/webcomponents/dist/Label.js"; |
| 4 | +import Text from "@ui5/webcomponents/dist/Text.js"; |
| 5 | +import Button from "@ui5/webcomponents/dist/Button.js"; |
| 6 | +import Dialog from "@ui5/webcomponents/dist/Dialog.js"; |
| 7 | +import Input from "@ui5/webcomponents/dist/Input.js"; |
| 8 | +import Form from "@ui5/webcomponents/dist/Form.js"; |
| 9 | +import FormItem from "@ui5/webcomponents/dist/FormItem.js"; |
2 | 10 | import SideNavigation from "@ui5/webcomponents-fiori/dist/SideNavigation.js";
|
3 | 11 | import SideNavigationItem from "@ui5/webcomponents-fiori/dist/SideNavigationItem.js";
|
4 | 12 | import SideNavigationSubItem from "@ui5/webcomponents-fiori/dist/SideNavigationSubItem.js";
|
5 |
| -import Button from "@ui5/webcomponents/dist/Button.js"; |
6 |
| -import Input from "@ui5/webcomponents/dist/Input.js"; |
7 | 13 |
|
8 | 14 | describe("FocusableElements", () => {
|
9 | 15 | it("Tests first focusable element", () => {
|
10 | 16 | cy.mount(
|
11 | 17 | <>
|
12 | 18 | <div id="container">
|
13 |
| - <Input tabindex="-1"></Input> |
| 19 | + <Input tabindex={-1}></Input> |
14 | 20 | <br/>
|
15 | 21 | <SideNavigation>
|
16 | 22 | <SideNavigationItem
|
@@ -38,11 +44,71 @@ describe("FocusableElements", () => {
|
38 | 44 | .should("have.attr", "tabindex", "0");
|
39 | 45 |
|
40 | 46 | cy.get("#container").then( async ($container) => {
|
41 |
| - const firstFocusable = await getFirstFocusableElement($container.get(0)); |
| 47 | + const firstFocusable = await getFirstFocusableElement($container.get(0)!); |
42 | 48 | await firstFocusable?.focus();
|
43 | 49 | });
|
44 | 50 |
|
45 | 51 | cy.get("#subItem1")
|
46 | 52 | .should("have.focus");
|
47 | 53 | });
|
| 54 | + |
| 55 | + it("Tests first focusable element inside Dialog with focusable content", () => { |
| 56 | + cy.mount( |
| 57 | + <Dialog id="dialog" headerText="Dialog" open={true}> |
| 58 | + <Form headerText="Address"> |
| 59 | + <FormItem> |
| 60 | + <Label slot="labelContent">Name:</Label> |
| 61 | + <Input id="nameInp"/> |
| 62 | + </FormItem> |
| 63 | + |
| 64 | + <FormItem> |
| 65 | + <Label slot="labelContent">ZIP Code/City:</Label> |
| 66 | + <Input value="411"/> |
| 67 | + </FormItem> |
| 68 | + </Form> |
| 69 | + |
| 70 | + <div slot="footer" class="dialogFooter"> |
| 71 | + <Button design="Emphasized">Close</Button> |
| 72 | + </div> |
| 73 | + </Dialog> |
| 74 | + ); |
| 75 | + |
| 76 | + cy.get("#dialog").then( async ($container) => { |
| 77 | + const firstFocusable = await getFirstFocusableElement($container.get(0)!); |
| 78 | + await firstFocusable?.focus(); |
| 79 | + }); |
| 80 | + |
| 81 | + cy.get("#nameInp") |
| 82 | + .should("have.focus"); |
| 83 | + }); |
| 84 | + |
| 85 | + it("Tests first focusable element inside Dialog with focusable footer", () => { |
| 86 | + cy.mount( |
| 87 | + <Dialog id="dialog" headerText="Dialog" open={true}> |
| 88 | + <Form headerText="Address"> |
| 89 | + <FormItem> |
| 90 | + <Label slot="labelContent">Name:</Label> |
| 91 | + <Text>Richard</Text> |
| 92 | + </FormItem> |
| 93 | + |
| 94 | + <FormItem> |
| 95 | + <Label slot="labelContent">ZIP Code/City:</Label> |
| 96 | + <Text>New York</Text> |
| 97 | + </FormItem> |
| 98 | + </Form> |
| 99 | + |
| 100 | + <div slot="footer" class="dialogFooter"> |
| 101 | + <Button id="btnClose" design="Emphasized">Close</Button> |
| 102 | + </div> |
| 103 | + </Dialog> |
| 104 | + ); |
| 105 | + |
| 106 | + cy.get("#dialog").then( async ($container) => { |
| 107 | + const firstFocusable = await getFirstFocusableElement($container.get(0)!); |
| 108 | + await firstFocusable?.focus(); |
| 109 | + }); |
| 110 | + |
| 111 | + cy.get("#btnClose") |
| 112 | + .should("have.focus"); |
| 113 | + }); |
48 | 114 | });
|
0 commit comments