@spectrum-web-components/tags 0.39.0 → 0.39.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/package.json +6 -6
- package/test/tags.test.js +59 -3
- package/test/tags.test.js.map +2 -2
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@spectrum-web-components/tags",
|
|
3
|
-
"version": "0.39.
|
|
3
|
+
"version": "0.39.2",
|
|
4
4
|
"publishConfig": {
|
|
5
5
|
"access": "public"
|
|
6
6
|
},
|
|
@@ -66,10 +66,10 @@
|
|
|
66
66
|
"lit-html"
|
|
67
67
|
],
|
|
68
68
|
"dependencies": {
|
|
69
|
-
"@spectrum-web-components/base": "^0.39.
|
|
70
|
-
"@spectrum-web-components/button": "^0.39.
|
|
71
|
-
"@spectrum-web-components/reactive-controllers": "^0.39.
|
|
72
|
-
"@spectrum-web-components/shared": "^0.39.
|
|
69
|
+
"@spectrum-web-components/base": "^0.39.2",
|
|
70
|
+
"@spectrum-web-components/button": "^0.39.2",
|
|
71
|
+
"@spectrum-web-components/reactive-controllers": "^0.39.2",
|
|
72
|
+
"@spectrum-web-components/shared": "^0.39.2"
|
|
73
73
|
},
|
|
74
74
|
"devDependencies": {
|
|
75
75
|
"@spectrum-css/tag": "^8.0.6",
|
|
@@ -81,5 +81,5 @@
|
|
|
81
81
|
"./sp-*.js",
|
|
82
82
|
"./**/*.dev.js"
|
|
83
83
|
],
|
|
84
|
-
"gitHead": "
|
|
84
|
+
"gitHead": "23d7b50761ce6de28a82a7626632d3bbc88924fb"
|
|
85
85
|
}
|
package/test/tags.test.js
CHANGED
|
@@ -15,7 +15,8 @@ import {
|
|
|
15
15
|
pageUpEvent,
|
|
16
16
|
testForLitDevWarnings
|
|
17
17
|
} from "../../../test/testing-helpers.js";
|
|
18
|
-
import {
|
|
18
|
+
import { sendKeys } from "@web/test-runner-commands";
|
|
19
|
+
import { nextFrame } from "@spectrum-web-components/overlay/src/AbstractOverlay.js";
|
|
19
20
|
describe("Tags", () => {
|
|
20
21
|
testForLitDevWarnings(
|
|
21
22
|
async () => await fixture(
|
|
@@ -133,6 +134,61 @@ describe("Tags", () => {
|
|
|
133
134
|
expect(document.activeElement === tag1).to.be.true;
|
|
134
135
|
tag1.blur();
|
|
135
136
|
});
|
|
137
|
+
it("handles focus when Tag is deleted", async () => {
|
|
138
|
+
const el = await fixture(
|
|
139
|
+
html`
|
|
140
|
+
<sp-tags>
|
|
141
|
+
<sp-tag deletable id="t1">Tag 1</sp-tag>
|
|
142
|
+
<sp-tag deletable id="t2">Tag 2</sp-tag>
|
|
143
|
+
<sp-tag deletable id="t3">Tag 3</sp-tag>
|
|
144
|
+
<sp-tag deletable id="t4">Tag 4</sp-tag>
|
|
145
|
+
<sp-tag deletable id="t5">Tag 5</sp-tag>
|
|
146
|
+
</sp-tags>
|
|
147
|
+
`
|
|
148
|
+
);
|
|
149
|
+
await elementUpdated(el);
|
|
150
|
+
const tag1 = el.querySelector("sp-tag#t1");
|
|
151
|
+
const tag2 = el.querySelector("sp-tag#t2");
|
|
152
|
+
const tag3 = el.querySelector("sp-tag#t3");
|
|
153
|
+
const tag4 = el.querySelector("sp-tag#t4");
|
|
154
|
+
const tag5 = el.querySelector("sp-tag#t5");
|
|
155
|
+
tag1.focus();
|
|
156
|
+
await elementUpdated(el);
|
|
157
|
+
await sendKeys({
|
|
158
|
+
press: "ArrowRight"
|
|
159
|
+
});
|
|
160
|
+
await elementUpdated(el);
|
|
161
|
+
await nextFrame();
|
|
162
|
+
await nextFrame();
|
|
163
|
+
expect(document.activeElement === tag2).to.be.true;
|
|
164
|
+
await sendKeys({
|
|
165
|
+
press: "Delete"
|
|
166
|
+
});
|
|
167
|
+
await elementUpdated(el);
|
|
168
|
+
await nextFrame();
|
|
169
|
+
await nextFrame();
|
|
170
|
+
expect(document.activeElement === tag3).to.be.true;
|
|
171
|
+
await sendKeys({
|
|
172
|
+
press: "ArrowRight"
|
|
173
|
+
});
|
|
174
|
+
await elementUpdated(el);
|
|
175
|
+
await nextFrame();
|
|
176
|
+
await nextFrame();
|
|
177
|
+
await sendKeys({
|
|
178
|
+
press: "ArrowRight"
|
|
179
|
+
});
|
|
180
|
+
await elementUpdated(el);
|
|
181
|
+
await nextFrame();
|
|
182
|
+
await nextFrame();
|
|
183
|
+
expect(document.activeElement === tag5).to.be.true;
|
|
184
|
+
await sendKeys({
|
|
185
|
+
press: "Delete"
|
|
186
|
+
});
|
|
187
|
+
await elementUpdated(el);
|
|
188
|
+
await nextFrame();
|
|
189
|
+
await nextFrame();
|
|
190
|
+
expect(document.activeElement === tag4).to.be.true;
|
|
191
|
+
});
|
|
136
192
|
it("will not focus [disabled] children", async () => {
|
|
137
193
|
const el = await fixture(
|
|
138
194
|
html`
|
|
@@ -219,11 +275,11 @@ describe("Tags", () => {
|
|
|
219
275
|
const tag1 = tagset1.querySelector("sp-tag:nth-child(1)");
|
|
220
276
|
const tagA = tagset2.querySelector("sp-tag:nth-child(1)");
|
|
221
277
|
const tagB = tagset2.querySelector("sp-tag:nth-child(2)");
|
|
222
|
-
await
|
|
278
|
+
await sendKeys({
|
|
223
279
|
press: "Tab"
|
|
224
280
|
});
|
|
225
281
|
expect(document.activeElement === tag1).to.be.true;
|
|
226
|
-
await
|
|
282
|
+
await sendKeys({
|
|
227
283
|
press: "Tab"
|
|
228
284
|
});
|
|
229
285
|
expect(document.activeElement === tagA).to.be.true;
|
package/test/tags.test.js.map
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["tags.test.ts"],
|
|
4
|
-
"sourcesContent": ["/*\nCopyright 2020 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\n\nimport { elementUpdated, expect, fixture } from '@open-wc/testing';\nimport { html } from 'lit/static-html.js';\n\nimport '@spectrum-web-components/tags/sp-tag.js';\nimport '@spectrum-web-components/tags/sp-tags.js';\nimport { Tag, Tags } from '@spectrum-web-components/tags';\nimport {\n arrowDownEvent,\n arrowLeftEvent,\n arrowRightEvent,\n arrowUpEvent,\n endEvent,\n enterEvent,\n homeEvent,\n pageDownEvent,\n pageUpEvent,\n testForLitDevWarnings,\n} from '../../../test/testing-helpers.js';\nimport { executeServerCommand } from '@web/test-runner-commands';\n\ndescribe('Tags', () => {\n testForLitDevWarnings(\n async () =>\n await fixture<Tags>(\n html`\n <sp-tags>\n <sp-tag>Tag 1</sp-tag>\n <sp-tag invalid>Tag 2</sp-tag>\n <sp-tag disabled>Tag 3</sp-tag>\n </sp-tags>\n `\n )\n );\n it('loads default tags accessibly', async () => {\n const el = await fixture<Tags>(\n html`\n <sp-tags>\n <sp-tag>Tag 1</sp-tag>\n <sp-tag invalid>Tag 2</sp-tag>\n <sp-tag disabled>Tag 3</sp-tag>\n </sp-tags>\n `\n );\n\n await elementUpdated(el);\n\n await expect(el).to.be.accessible();\n expect(el.hasAttribute('role')).to.be.true;\n expect(el.hasAttribute('aria-label')).to.be.true;\n });\n it('does not accept focus when empty', async () => {\n const el = await fixture<Tags>(\n html`\n <sp-tags></sp-tags>\n `\n );\n\n await elementUpdated(el);\n\n expect(document.activeElement === el).to.be.false;\n\n el.focus();\n await elementUpdated(el);\n\n expect(document.activeElement === el).to.be.false;\n });\n it('does not accept focus when no tag has `deletable`', async () => {\n const el = await fixture<Tags>(\n html`\n <sp-tags>\n <sp-tag>Tag 1</sp-tag>\n <sp-tag invalid>Tag 2</sp-tag>\n <sp-tag disabled>Tag 3</sp-tag>\n </sp-tags>\n `\n );\n await elementUpdated(el);\n\n const tag1 = el.querySelector('sp-tag:nth-child(1)') as Tag;\n const tag2 = el.querySelector('sp-tag:nth-child(2)') as Tag;\n const tag3 = el.querySelector('sp-tag:nth-child(3)') as Tag;\n\n expect(document.activeElement === el).to.be.false;\n\n el.focus();\n await elementUpdated(el);\n\n expect(document.activeElement === el).to.be.false;\n expect(document.activeElement === tag1).to.be.false;\n expect(document.activeElement === tag2).to.be.false;\n expect(document.activeElement === tag3).to.be.false;\n });\n it('loads default tags with `role` and `aria-label` from the outside', async () => {\n const el = await fixture<Tags>(\n html`\n <sp-tags>\n <sp-tag>Tag 1</sp-tag>\n <sp-tag invalid>Tag 2</sp-tag>\n <sp-tag disabled>Tag 3</sp-tag>\n </sp-tags>\n `\n );\n\n await elementUpdated(el);\n\n await expect(el).to.be.accessible();\n expect(el.hasAttribute('role')).to.be.true;\n expect(el.hasAttribute('aria-label')).to.be.true;\n });\n it('accepts keyboard events while focused', async () => {\n const el = await fixture<Tags>(\n html`\n <sp-tags>\n <sp-tag deletable>Tag 1</sp-tag>\n <sp-tag deletable>Tag 2</sp-tag>\n <sp-tag deletable>Tag 3</sp-tag>\n <sp-tag deletable>Tag 4</sp-tag>\n <sp-tag deletable>Tag 5</sp-tag>\n </sp-tags>\n `\n );\n\n await elementUpdated(el);\n\n const tag1 = el.querySelector('sp-tag:nth-child(1)') as Tag;\n const tag2 = el.querySelector('sp-tag:nth-child(2)') as Tag;\n const tag3 = el.querySelector('sp-tag:nth-child(3)') as Tag;\n const tag4 = el.querySelector('sp-tag:nth-child(4)') as Tag;\n const tag5 = el.querySelector('sp-tag:nth-child(5)') as Tag;\n\n tag1.focus();\n await elementUpdated(el);\n\n el.dispatchEvent(pageUpEvent());\n el.dispatchEvent(arrowRightEvent());\n await elementUpdated(el);\n\n expect(document.activeElement === tag2).to.be.true;\n\n el.dispatchEvent(arrowDownEvent());\n await elementUpdated(el);\n\n expect(document.activeElement === tag3).to.be.true;\n\n el.dispatchEvent(endEvent());\n await elementUpdated(el);\n\n expect(document.activeElement === tag5).to.be.true;\n\n el.dispatchEvent(arrowLeftEvent());\n await elementUpdated(el);\n\n expect(document.activeElement === tag4).to.be.true;\n\n el.dispatchEvent(arrowUpEvent());\n await elementUpdated(el);\n\n expect(document.activeElement === tag3).to.be.true;\n\n el.dispatchEvent(homeEvent());\n await elementUpdated(el);\n\n expect(document.activeElement === tag1).to.be.true;\n\n tag1.blur();\n });\n it('will not focus [disabled] children', async () => {\n const el = await fixture<Tags>(\n html`\n <sp-tags>\n <sp-tag disabled deletable>Tag 1</sp-tag>\n <sp-tag deletable>Tag 2</sp-tag>\n <sp-tag deletable>Tag 3</sp-tag>\n <sp-tag deletable>Tag 4</sp-tag>\n <sp-tag disabled deletable>Tag 5</sp-tag>\n </sp-tags>\n `\n );\n\n await elementUpdated(el);\n\n const tag2 = el.querySelector('sp-tag:nth-child(2)') as Tag;\n const tag4 = el.querySelector('sp-tag:nth-child(4)') as Tag;\n\n tag2.focus();\n await elementUpdated(el);\n\n el.dispatchEvent(enterEvent());\n el.dispatchEvent(endEvent());\n await elementUpdated(el);\n\n expect(document.activeElement === tag4).to.be.true;\n\n el.dispatchEvent(homeEvent());\n await elementUpdated(el);\n\n expect(document.activeElement === tag2).to.be.true;\n\n el.dispatchEvent(arrowUpEvent());\n await elementUpdated(el);\n\n expect(document.activeElement === tag4).to.be.true;\n\n el.dispatchEvent(arrowDownEvent());\n await elementUpdated(el);\n\n expect(document.activeElement === tag2).to.be.true;\n });\n it('will only tab index [deletable] children', async () => {\n const el = await fixture<Tags>(\n html`\n <sp-tags>\n <sp-tag deletable>Tag 1</sp-tag>\n <sp-tag>Tag 2</sp-tag>\n <sp-tag>Tag 3</sp-tag>\n <sp-tag>Tag 4</sp-tag>\n <sp-tag deletable>Tag 5</sp-tag>\n </sp-tags>\n `\n );\n\n await elementUpdated(el);\n\n const tag1 = el.querySelector('sp-tag:nth-child(1)') as Tag;\n const tag5 = el.querySelector('sp-tag:nth-child(5)') as Tag;\n\n tag1.focus();\n await elementUpdated(el);\n\n el.dispatchEvent(enterEvent());\n el.dispatchEvent(endEvent());\n await elementUpdated(el);\n\n expect(document.activeElement === tag5).to.be.true;\n\n el.dispatchEvent(homeEvent());\n await elementUpdated(el);\n\n expect(document.activeElement === tag1).to.be.true;\n\n el.dispatchEvent(arrowUpEvent());\n await elementUpdated(el);\n\n expect(document.activeElement === tag5).to.be.true;\n\n el.dispatchEvent(arrowUpEvent());\n await elementUpdated(el);\n\n expect(document.activeElement === tag1).to.be.true;\n });\n it('utilises floating tab index for [deletable] children', async () => {\n const el = await fixture<Tags>(\n html`\n <div>\n <a href=\"#\">Heyo</a>\n <sp-tags>\n <sp-tag deletable>Tag 1</sp-tag>\n <sp-tag deletable>Tag 2</sp-tag>\n </sp-tags>\n <sp-tags>\n <sp-tag deletable>Tag A</sp-tag>\n <sp-tag deletable>Tag B</sp-tag>\n </sp-tags>\n </div>\n `\n );\n const anchor = el.querySelector('a') as HTMLElement;\n\n anchor.focus();\n expect(document.activeElement === anchor).to.be.true;\n\n const tagset1 = el.querySelector('sp-tags:nth-child(2)') as Tags;\n const tagset2 = el.querySelector('sp-tags:nth-child(3)') as Tags;\n\n const tag1 = tagset1.querySelector('sp-tag:nth-child(1)') as Tag;\n const tagA = tagset2.querySelector('sp-tag:nth-child(1)') as Tag;\n const tagB = tagset2.querySelector('sp-tag:nth-child(2)') as Tag;\n\n await executeServerCommand('send-keys', {\n press: 'Tab',\n });\n expect(document.activeElement === tag1).to.be.true;\n\n await executeServerCommand('send-keys', {\n press: 'Tab',\n });\n expect(document.activeElement === tagA).to.be.true;\n\n tagset2.dispatchEvent(arrowDownEvent());\n expect(document.activeElement === tagB).to.be.true;\n });\n it('loads accepts \"PageUp\" and \"PageDown\" keys', async () => {\n const el = await fixture<HTMLDivElement>(\n html`\n <div>\n <sp-tags>\n <sp-tag deletable>Tag 1</sp-tag>\n </sp-tags>\n <sp-tags>\n <sp-tag deletable>Tag 2</sp-tag>\n </sp-tags>\n <sp-tags></sp-tags>\n <sp-tags>\n <sp-tag disabled deletable>Tag 3</sp-tag>\n <sp-tag deletable>Tag 4</sp-tag>\n </sp-tags>\n </div>\n `\n );\n\n const tags1 = el.querySelector('sp-tags:nth-child(1)') as Tags;\n const tags2 = el.querySelector('sp-tags:nth-child(2)') as Tags;\n const tags4 = el.querySelector('sp-tags:nth-child(4)') as Tags;\n\n const tag1 = tags1.querySelector('sp-tag') as Tag;\n const tag2 = tags2.querySelector('sp-tag') as Tag;\n const tag4 = tags4.querySelector('sp-tag:not([disabled])') as Tag;\n\n tag1.focus();\n tag1.dispatchEvent(pageUpEvent());\n\n expect(document.activeElement === tag4).to.be.true;\n\n tag4.dispatchEvent(pageDownEvent());\n\n expect(document.activeElement === tag1).to.be.true;\n\n tag1.dispatchEvent(pageDownEvent());\n\n expect(document.activeElement === tag2).to.be.true;\n\n tag2.dispatchEvent(pageDownEvent());\n\n expect(document.activeElement === tag4, 'Focuses `tag4`').to.be.true;\n });\n});\n"],
|
|
5
|
-
"mappings": ";AAYA,SAAS,gBAAgB,QAAQ,eAAe;AAChD,SAAS,YAAY;AAErB,OAAO;AACP,OAAO;AAEP;AAAA,EACI;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACG;AACP,SAAS,
|
|
4
|
+
"sourcesContent": ["/*\nCopyright 2020 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\n\nimport { elementUpdated, expect, fixture } from '@open-wc/testing';\nimport { html } from 'lit/static-html.js';\n\nimport '@spectrum-web-components/tags/sp-tag.js';\nimport '@spectrum-web-components/tags/sp-tags.js';\nimport { Tag, Tags } from '@spectrum-web-components/tags';\nimport {\n arrowDownEvent,\n arrowLeftEvent,\n arrowRightEvent,\n arrowUpEvent,\n endEvent,\n enterEvent,\n homeEvent,\n pageDownEvent,\n pageUpEvent,\n testForLitDevWarnings,\n} from '../../../test/testing-helpers.js';\nimport { sendKeys } from '@web/test-runner-commands';\nimport { nextFrame } from '@spectrum-web-components/overlay/src/AbstractOverlay.js';\n\ndescribe('Tags', () => {\n testForLitDevWarnings(\n async () =>\n await fixture<Tags>(\n html`\n <sp-tags>\n <sp-tag>Tag 1</sp-tag>\n <sp-tag invalid>Tag 2</sp-tag>\n <sp-tag disabled>Tag 3</sp-tag>\n </sp-tags>\n `\n )\n );\n it('loads default tags accessibly', async () => {\n const el = await fixture<Tags>(\n html`\n <sp-tags>\n <sp-tag>Tag 1</sp-tag>\n <sp-tag invalid>Tag 2</sp-tag>\n <sp-tag disabled>Tag 3</sp-tag>\n </sp-tags>\n `\n );\n\n await elementUpdated(el);\n\n await expect(el).to.be.accessible();\n expect(el.hasAttribute('role')).to.be.true;\n expect(el.hasAttribute('aria-label')).to.be.true;\n });\n it('does not accept focus when empty', async () => {\n const el = await fixture<Tags>(\n html`\n <sp-tags></sp-tags>\n `\n );\n\n await elementUpdated(el);\n\n expect(document.activeElement === el).to.be.false;\n\n el.focus();\n await elementUpdated(el);\n\n expect(document.activeElement === el).to.be.false;\n });\n it('does not accept focus when no tag has `deletable`', async () => {\n const el = await fixture<Tags>(\n html`\n <sp-tags>\n <sp-tag>Tag 1</sp-tag>\n <sp-tag invalid>Tag 2</sp-tag>\n <sp-tag disabled>Tag 3</sp-tag>\n </sp-tags>\n `\n );\n await elementUpdated(el);\n\n const tag1 = el.querySelector('sp-tag:nth-child(1)') as Tag;\n const tag2 = el.querySelector('sp-tag:nth-child(2)') as Tag;\n const tag3 = el.querySelector('sp-tag:nth-child(3)') as Tag;\n\n expect(document.activeElement === el).to.be.false;\n\n el.focus();\n await elementUpdated(el);\n\n expect(document.activeElement === el).to.be.false;\n expect(document.activeElement === tag1).to.be.false;\n expect(document.activeElement === tag2).to.be.false;\n expect(document.activeElement === tag3).to.be.false;\n });\n it('loads default tags with `role` and `aria-label` from the outside', async () => {\n const el = await fixture<Tags>(\n html`\n <sp-tags>\n <sp-tag>Tag 1</sp-tag>\n <sp-tag invalid>Tag 2</sp-tag>\n <sp-tag disabled>Tag 3</sp-tag>\n </sp-tags>\n `\n );\n\n await elementUpdated(el);\n\n await expect(el).to.be.accessible();\n expect(el.hasAttribute('role')).to.be.true;\n expect(el.hasAttribute('aria-label')).to.be.true;\n });\n it('accepts keyboard events while focused', async () => {\n const el = await fixture<Tags>(\n html`\n <sp-tags>\n <sp-tag deletable>Tag 1</sp-tag>\n <sp-tag deletable>Tag 2</sp-tag>\n <sp-tag deletable>Tag 3</sp-tag>\n <sp-tag deletable>Tag 4</sp-tag>\n <sp-tag deletable>Tag 5</sp-tag>\n </sp-tags>\n `\n );\n\n await elementUpdated(el);\n\n const tag1 = el.querySelector('sp-tag:nth-child(1)') as Tag;\n const tag2 = el.querySelector('sp-tag:nth-child(2)') as Tag;\n const tag3 = el.querySelector('sp-tag:nth-child(3)') as Tag;\n const tag4 = el.querySelector('sp-tag:nth-child(4)') as Tag;\n const tag5 = el.querySelector('sp-tag:nth-child(5)') as Tag;\n\n tag1.focus();\n await elementUpdated(el);\n\n el.dispatchEvent(pageUpEvent());\n el.dispatchEvent(arrowRightEvent());\n await elementUpdated(el);\n\n expect(document.activeElement === tag2).to.be.true;\n\n el.dispatchEvent(arrowDownEvent());\n await elementUpdated(el);\n\n expect(document.activeElement === tag3).to.be.true;\n\n el.dispatchEvent(endEvent());\n await elementUpdated(el);\n\n expect(document.activeElement === tag5).to.be.true;\n\n el.dispatchEvent(arrowLeftEvent());\n await elementUpdated(el);\n\n expect(document.activeElement === tag4).to.be.true;\n\n el.dispatchEvent(arrowUpEvent());\n await elementUpdated(el);\n\n expect(document.activeElement === tag3).to.be.true;\n\n el.dispatchEvent(homeEvent());\n await elementUpdated(el);\n\n expect(document.activeElement === tag1).to.be.true;\n\n tag1.blur();\n });\n\n it('handles focus when Tag is deleted', async () => {\n const el = await fixture<Tags>(\n html`\n <sp-tags>\n <sp-tag deletable id=\"t1\">Tag 1</sp-tag>\n <sp-tag deletable id=\"t2\">Tag 2</sp-tag>\n <sp-tag deletable id=\"t3\">Tag 3</sp-tag>\n <sp-tag deletable id=\"t4\">Tag 4</sp-tag>\n <sp-tag deletable id=\"t5\">Tag 5</sp-tag>\n </sp-tags>\n `\n );\n\n await elementUpdated(el);\n\n const tag1 = el.querySelector('sp-tag#t1') as Tag;\n const tag2 = el.querySelector('sp-tag#t2') as Tag;\n const tag3 = el.querySelector('sp-tag#t3') as Tag;\n const tag4 = el.querySelector('sp-tag#t4') as Tag;\n const tag5 = el.querySelector('sp-tag#t5') as Tag;\n\n tag1.focus();\n await elementUpdated(el);\n\n await sendKeys({\n press: 'ArrowRight',\n });\n await elementUpdated(el);\n await nextFrame();\n await nextFrame();\n\n expect(document.activeElement === tag2).to.be.true;\n\n await sendKeys({\n press: 'Delete',\n });\n await elementUpdated(el);\n await nextFrame();\n await nextFrame();\n\n expect(document.activeElement === tag3).to.be.true;\n\n await sendKeys({\n press: 'ArrowRight',\n });\n await elementUpdated(el);\n await nextFrame();\n await nextFrame();\n await sendKeys({\n press: 'ArrowRight',\n });\n await elementUpdated(el);\n await nextFrame();\n await nextFrame();\n\n expect(document.activeElement === tag5).to.be.true;\n\n await sendKeys({\n press: 'Delete',\n });\n await elementUpdated(el);\n await nextFrame();\n await nextFrame();\n\n expect(document.activeElement === tag4).to.be.true;\n });\n\n it('will not focus [disabled] children', async () => {\n const el = await fixture<Tags>(\n html`\n <sp-tags>\n <sp-tag disabled deletable>Tag 1</sp-tag>\n <sp-tag deletable>Tag 2</sp-tag>\n <sp-tag deletable>Tag 3</sp-tag>\n <sp-tag deletable>Tag 4</sp-tag>\n <sp-tag disabled deletable>Tag 5</sp-tag>\n </sp-tags>\n `\n );\n\n await elementUpdated(el);\n\n const tag2 = el.querySelector('sp-tag:nth-child(2)') as Tag;\n const tag4 = el.querySelector('sp-tag:nth-child(4)') as Tag;\n\n tag2.focus();\n await elementUpdated(el);\n\n el.dispatchEvent(enterEvent());\n el.dispatchEvent(endEvent());\n await elementUpdated(el);\n\n expect(document.activeElement === tag4).to.be.true;\n\n el.dispatchEvent(homeEvent());\n await elementUpdated(el);\n\n expect(document.activeElement === tag2).to.be.true;\n\n el.dispatchEvent(arrowUpEvent());\n await elementUpdated(el);\n\n expect(document.activeElement === tag4).to.be.true;\n\n el.dispatchEvent(arrowDownEvent());\n await elementUpdated(el);\n\n expect(document.activeElement === tag2).to.be.true;\n });\n it('will only tab index [deletable] children', async () => {\n const el = await fixture<Tags>(\n html`\n <sp-tags>\n <sp-tag deletable>Tag 1</sp-tag>\n <sp-tag>Tag 2</sp-tag>\n <sp-tag>Tag 3</sp-tag>\n <sp-tag>Tag 4</sp-tag>\n <sp-tag deletable>Tag 5</sp-tag>\n </sp-tags>\n `\n );\n\n await elementUpdated(el);\n\n const tag1 = el.querySelector('sp-tag:nth-child(1)') as Tag;\n const tag5 = el.querySelector('sp-tag:nth-child(5)') as Tag;\n\n tag1.focus();\n await elementUpdated(el);\n\n el.dispatchEvent(enterEvent());\n el.dispatchEvent(endEvent());\n await elementUpdated(el);\n\n expect(document.activeElement === tag5).to.be.true;\n\n el.dispatchEvent(homeEvent());\n await elementUpdated(el);\n\n expect(document.activeElement === tag1).to.be.true;\n\n el.dispatchEvent(arrowUpEvent());\n await elementUpdated(el);\n\n expect(document.activeElement === tag5).to.be.true;\n\n el.dispatchEvent(arrowUpEvent());\n await elementUpdated(el);\n\n expect(document.activeElement === tag1).to.be.true;\n });\n it('utilises floating tab index for [deletable] children', async () => {\n const el = await fixture<Tags>(\n html`\n <div>\n <a href=\"#\">Heyo</a>\n <sp-tags>\n <sp-tag deletable>Tag 1</sp-tag>\n <sp-tag deletable>Tag 2</sp-tag>\n </sp-tags>\n <sp-tags>\n <sp-tag deletable>Tag A</sp-tag>\n <sp-tag deletable>Tag B</sp-tag>\n </sp-tags>\n </div>\n `\n );\n const anchor = el.querySelector('a') as HTMLElement;\n\n anchor.focus();\n expect(document.activeElement === anchor).to.be.true;\n\n const tagset1 = el.querySelector('sp-tags:nth-child(2)') as Tags;\n const tagset2 = el.querySelector('sp-tags:nth-child(3)') as Tags;\n\n const tag1 = tagset1.querySelector('sp-tag:nth-child(1)') as Tag;\n const tagA = tagset2.querySelector('sp-tag:nth-child(1)') as Tag;\n const tagB = tagset2.querySelector('sp-tag:nth-child(2)') as Tag;\n\n await sendKeys({\n press: 'Tab',\n });\n expect(document.activeElement === tag1).to.be.true;\n\n await sendKeys({\n press: 'Tab',\n });\n expect(document.activeElement === tagA).to.be.true;\n\n tagset2.dispatchEvent(arrowDownEvent());\n expect(document.activeElement === tagB).to.be.true;\n });\n it('loads accepts \"PageUp\" and \"PageDown\" keys', async () => {\n const el = await fixture<HTMLDivElement>(\n html`\n <div>\n <sp-tags>\n <sp-tag deletable>Tag 1</sp-tag>\n </sp-tags>\n <sp-tags>\n <sp-tag deletable>Tag 2</sp-tag>\n </sp-tags>\n <sp-tags></sp-tags>\n <sp-tags>\n <sp-tag disabled deletable>Tag 3</sp-tag>\n <sp-tag deletable>Tag 4</sp-tag>\n </sp-tags>\n </div>\n `\n );\n\n const tags1 = el.querySelector('sp-tags:nth-child(1)') as Tags;\n const tags2 = el.querySelector('sp-tags:nth-child(2)') as Tags;\n const tags4 = el.querySelector('sp-tags:nth-child(4)') as Tags;\n\n const tag1 = tags1.querySelector('sp-tag') as Tag;\n const tag2 = tags2.querySelector('sp-tag') as Tag;\n const tag4 = tags4.querySelector('sp-tag:not([disabled])') as Tag;\n\n tag1.focus();\n tag1.dispatchEvent(pageUpEvent());\n\n expect(document.activeElement === tag4).to.be.true;\n\n tag4.dispatchEvent(pageDownEvent());\n\n expect(document.activeElement === tag1).to.be.true;\n\n tag1.dispatchEvent(pageDownEvent());\n\n expect(document.activeElement === tag2).to.be.true;\n\n tag2.dispatchEvent(pageDownEvent());\n\n expect(document.activeElement === tag4, 'Focuses `tag4`').to.be.true;\n });\n});\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|