@api-client/ui 0.5.32 → 0.5.33
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/build/src/elements/navigation/internals/Navigation.d.ts +68 -0
- package/build/src/elements/navigation/internals/Navigation.d.ts.map +1 -0
- package/build/src/elements/navigation/internals/Navigation.js +205 -0
- package/build/src/elements/navigation/internals/Navigation.js.map +1 -0
- package/build/src/elements/navigation/internals/Navigation.styles.d.ts +3 -0
- package/build/src/elements/navigation/internals/Navigation.styles.d.ts.map +1 -0
- package/build/src/elements/navigation/internals/Navigation.styles.js +24 -0
- package/build/src/elements/navigation/internals/Navigation.styles.js.map +1 -0
- package/build/src/elements/navigation/internals/NavigationItem.d.ts +57 -2
- package/build/src/elements/navigation/internals/NavigationItem.d.ts.map +1 -1
- package/build/src/elements/navigation/internals/NavigationItem.js +73 -18
- package/build/src/elements/navigation/internals/NavigationItem.js.map +1 -1
- package/build/src/elements/navigation/ui-navigation.d.ts +11 -0
- package/build/src/elements/navigation/ui-navigation.d.ts.map +1 -0
- package/build/src/elements/navigation/ui-navigation.js +27 -0
- package/build/src/elements/navigation/ui-navigation.js.map +1 -0
- package/build/src/md/input/Input.d.ts +2 -0
- package/build/src/md/input/Input.d.ts.map +1 -1
- package/build/src/types/aria.d.ts +28 -0
- package/build/src/types/aria.d.ts.map +1 -0
- package/build/src/types/aria.js +2 -0
- package/build/src/types/aria.js.map +1 -0
- package/build/src/types/role.d.ts +1 -16
- package/build/src/types/role.d.ts.map +1 -1
- package/build/src/types/role.js.map +1 -1
- package/build/test/elements/navigation/Navigation.test.d.ts +3 -0
- package/build/test/elements/navigation/Navigation.test.d.ts.map +1 -0
- package/build/test/elements/navigation/Navigation.test.js +113 -0
- package/build/test/elements/navigation/Navigation.test.js.map +1 -0
- package/demo/elements/index.html +2 -0
- package/demo/elements/navigation/navigation.html +20 -0
- package/demo/elements/navigation/navigation.ts +45 -0
- package/package.json +1 -1
- package/src/elements/navigation/internals/Navigation.styles.ts +24 -0
- package/src/elements/navigation/internals/Navigation.ts +181 -0
- package/src/elements/navigation/internals/NavigationItem.ts +74 -5
- package/src/elements/navigation/ui-navigation.ts +15 -0
- package/src/types/aria.ts +141 -0
- package/src/types/role.ts +1 -129
- package/test/elements/navigation/Navigation.test.ts +120 -0
- package/tsconfig.json +1 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Input.d.ts","sourceRoot":"","sources":["../../../../src/md/input/Input.ts"],"names":[],"mappings":"AAAA,OAAO,EAAoB,OAAO,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,KAAK,CAAA;AAI/E,OAAO,EAAE,uBAAuB,EAAE,qBAAqB,EAAE,mBAAmB,EAAE,MAAM,sBAAsB,CAAA;AAC1G,OAAO,EAAE,gBAAgB,EAAE,YAAY,EAAE,QAAQ,EAAE,MAAM,qBAAqB,CAAA;AAC9E,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAA;AAE3C,OAAO,kCAAkC,CAAA;AACzC,OAAO,qBAAqB,CAAA;AAI5B;;;GAGG;AACH,MAAM,CAAC,OAAO,CAAC,QAAQ,OAAO,KAAM,SAAQ,SAAS;;IACnD,OAAgB,iBAAiB
|
|
1
|
+
{"version":3,"file":"Input.d.ts","sourceRoot":"","sources":["../../../../src/md/input/Input.ts"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1,28 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* - `page` - Represents the current page within a set of pages.
|
|
3
|
+
* - `step` - Represents the current step within a process.
|
|
4
|
+
* - `location` - Represents the current location, for example the current page in a breadcrumbs hierarchy.
|
|
5
|
+
* - `date` - Represents the current date within a collection of dates.
|
|
6
|
+
* - `time` - Represents the current time within a set of times.
|
|
7
|
+
* - `true` - Represents the current item within a set.
|
|
8
|
+
* - `false` - Does not represent the current item within a set.
|
|
9
|
+
* - `''` - No current state.
|
|
10
|
+
*/
|
|
11
|
+
export type AriaCurrent = 'page' | 'step' | 'location' | 'date' | 'time' | 'true' | 'false' | '';
|
|
12
|
+
/**
|
|
13
|
+
* Valid values for `aria-expanded`.
|
|
14
|
+
*/
|
|
15
|
+
export type ARIAAutoComplete = 'none' | 'inline' | 'list' | 'both';
|
|
16
|
+
/**
|
|
17
|
+
* Valid values for `aria-expanded`.
|
|
18
|
+
*/
|
|
19
|
+
export type ARIAExpanded = 'true' | 'false';
|
|
20
|
+
/**
|
|
21
|
+
* Valid values for `aria-haspopup`.
|
|
22
|
+
*/
|
|
23
|
+
export type ARIAHasPopup = 'false' | 'true' | 'menu' | 'listbox' | 'tree' | 'grid' | 'dialog';
|
|
24
|
+
/**
|
|
25
|
+
* Valid values for `role`.
|
|
26
|
+
*/
|
|
27
|
+
export type ARIARole = 'alert' | 'alertdialog' | 'button' | 'checkbox' | 'dialog' | 'gridcell' | 'link' | 'log' | 'marquee' | 'menuitem' | 'menuitemcheckbox' | 'menuitemradio' | 'option' | 'progressbar' | 'radio' | 'scrollbar' | 'searchbox' | 'slider' | 'spinbutton' | 'status' | 'switch' | 'tab' | 'tabpanel' | 'textbox' | 'timer' | 'tooltip' | 'treeitem' | 'combobox' | 'grid' | 'listbox' | 'menu' | 'menubar' | 'radiogroup' | 'tablist' | 'tree' | 'treegrid' | 'application' | 'article' | 'cell' | 'columnheader' | 'definition' | 'directory' | 'document' | 'feed' | 'figure' | 'group' | 'heading' | 'img' | 'list' | 'listitem' | 'math' | 'none' | 'note' | 'presentation' | 'region' | 'row' | 'rowgroup' | 'rowheader' | 'separator' | 'table' | 'term' | 'text' | 'toolbar' | 'banner' | 'complementary' | 'contentinfo' | 'form' | 'main' | 'navigation' | 'region' | 'search' | 'doc-abstract' | 'doc-acknowledgments' | 'doc-afterword' | 'doc-appendix' | 'doc-backlink' | 'doc-biblioentry' | 'doc-bibliography' | 'doc-biblioref' | 'doc-chapter' | 'doc-colophon' | 'doc-conclusion' | 'doc-cover' | 'doc-credit' | 'doc-credits' | 'doc-dedication' | 'doc-endnote' | 'doc-endnotes' | 'doc-epigraph' | 'doc-epilogue' | 'doc-errata' | 'doc-example' | 'doc-footnote' | 'doc-foreword' | 'doc-glossary' | 'doc-glossref' | 'doc-index' | 'doc-introduction' | 'doc-noteref' | 'doc-notice' | 'doc-pagebreak' | 'doc-pagelist' | 'doc-part' | 'doc-preface' | 'doc-prologue' | 'doc-pullquote' | 'doc-qna' | 'doc-subtitle' | 'doc-tip' | 'doc-toc';
|
|
28
|
+
//# sourceMappingURL=aria.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"aria.d.ts","sourceRoot":"","sources":["../../../src/types/aria.ts"],"names":[],"mappings":"AAAA;;;;;;;;;GASG;AACH,MAAM,MAAM,WAAW,GAAG,MAAM,GAAG,MAAM,GAAG,UAAU,GAAG,MAAM,GAAG,MAAM,GAAG,MAAM,GAAG,OAAO,GAAG,EAAE,CAAA;AAEhG;;GAEG;AACH,MAAM,MAAM,gBAAgB,GAAG,MAAM,GAAG,QAAQ,GAAG,MAAM,GAAG,MAAM,CAAA;AAElE;;GAEG;AACH,MAAM,MAAM,YAAY,GAAG,MAAM,GAAG,OAAO,CAAA;AAE3C;;GAEG;AACH,MAAM,MAAM,YAAY,GAAG,OAAO,GAAG,MAAM,GAAG,MAAM,GAAG,SAAS,GAAG,MAAM,GAAG,MAAM,GAAG,QAAQ,CAAA;AAE7F;;GAEG;AACH,MAAM,MAAM,QAAQ,GAChB,OAAO,GACP,aAAa,GACb,QAAQ,GACR,UAAU,GACV,QAAQ,GACR,UAAU,GACV,MAAM,GACN,KAAK,GACL,SAAS,GACT,UAAU,GACV,kBAAkB,GAClB,eAAe,GACf,QAAQ,GACR,aAAa,GACb,OAAO,GACP,WAAW,GACX,WAAW,GACX,QAAQ,GACR,YAAY,GACZ,QAAQ,GACR,QAAQ,GACR,KAAK,GACL,UAAU,GACV,SAAS,GACT,OAAO,GACP,SAAS,GACT,UAAU,GACV,UAAU,GACV,MAAM,GACN,SAAS,GACT,MAAM,GACN,SAAS,GACT,YAAY,GACZ,SAAS,GACT,MAAM,GACN,UAAU,GACV,aAAa,GACb,SAAS,GACT,MAAM,GACN,cAAc,GACd,YAAY,GACZ,WAAW,GACX,UAAU,GACV,MAAM,GACN,QAAQ,GACR,OAAO,GACP,SAAS,GACT,KAAK,GACL,MAAM,GACN,UAAU,GACV,MAAM,GACN,MAAM,GACN,MAAM,GACN,cAAc,GACd,QAAQ,GACR,KAAK,GACL,UAAU,GACV,WAAW,GACX,WAAW,GACX,OAAO,GACP,MAAM,GACN,MAAM,GACN,SAAS,GACT,QAAQ,GACR,eAAe,GACf,aAAa,GACb,MAAM,GACN,MAAM,GACN,YAAY,GACZ,QAAQ,GACR,QAAQ,GACR,cAAc,GACd,qBAAqB,GACrB,eAAe,GACf,cAAc,GACd,cAAc,GACd,iBAAiB,GACjB,kBAAkB,GAClB,eAAe,GACf,aAAa,GACb,cAAc,GACd,gBAAgB,GAChB,WAAW,GACX,YAAY,GACZ,aAAa,GACb,gBAAgB,GAChB,aAAa,GACb,cAAc,GACd,cAAc,GACd,cAAc,GACd,YAAY,GACZ,aAAa,GACb,cAAc,GACd,cAAc,GACd,cAAc,GACd,cAAc,GACd,WAAW,GACX,kBAAkB,GAClB,aAAa,GACb,YAAY,GACZ,eAAe,GACf,cAAc,GACd,UAAU,GACV,aAAa,GACb,cAAc,GACd,eAAe,GACf,SAAS,GACT,cAAc,GACd,SAAS,GACT,SAAS,CAAA"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"aria.js","sourceRoot":"","sources":["../../../src/types/aria.ts"],"names":[],"mappings":"","sourcesContent":["/**\n * - `page` - Represents the current page within a set of pages.\n * - `step` - Represents the current step within a process.\n * - `location` - Represents the current location, for example the current page in a breadcrumbs hierarchy.\n * - `date` - Represents the current date within a collection of dates.\n * - `time` - Represents the current time within a set of times.\n * - `true` - Represents the current item within a set.\n * - `false` - Does not represent the current item within a set.\n * - `''` - No current state.\n */\nexport type AriaCurrent = 'page' | 'step' | 'location' | 'date' | 'time' | 'true' | 'false' | ''\n\n/**\n * Valid values for `aria-expanded`.\n */\nexport type ARIAAutoComplete = 'none' | 'inline' | 'list' | 'both'\n\n/**\n * Valid values for `aria-expanded`.\n */\nexport type ARIAExpanded = 'true' | 'false'\n\n/**\n * Valid values for `aria-haspopup`.\n */\nexport type ARIAHasPopup = 'false' | 'true' | 'menu' | 'listbox' | 'tree' | 'grid' | 'dialog'\n\n/**\n * Valid values for `role`.\n */\nexport type ARIARole =\n | 'alert'\n | 'alertdialog'\n | 'button'\n | 'checkbox'\n | 'dialog'\n | 'gridcell'\n | 'link'\n | 'log'\n | 'marquee'\n | 'menuitem'\n | 'menuitemcheckbox'\n | 'menuitemradio'\n | 'option'\n | 'progressbar'\n | 'radio'\n | 'scrollbar'\n | 'searchbox'\n | 'slider'\n | 'spinbutton'\n | 'status'\n | 'switch'\n | 'tab'\n | 'tabpanel'\n | 'textbox'\n | 'timer'\n | 'tooltip'\n | 'treeitem'\n | 'combobox'\n | 'grid'\n | 'listbox'\n | 'menu'\n | 'menubar'\n | 'radiogroup'\n | 'tablist'\n | 'tree'\n | 'treegrid'\n | 'application'\n | 'article'\n | 'cell'\n | 'columnheader'\n | 'definition'\n | 'directory'\n | 'document'\n | 'feed'\n | 'figure'\n | 'group'\n | 'heading'\n | 'img'\n | 'list'\n | 'listitem'\n | 'math'\n | 'none'\n | 'note'\n | 'presentation'\n | 'region'\n | 'row'\n | 'rowgroup'\n | 'rowheader'\n | 'separator'\n | 'table'\n | 'term'\n | 'text'\n | 'toolbar'\n | 'banner'\n | 'complementary'\n | 'contentinfo'\n | 'form'\n | 'main'\n | 'navigation'\n | 'region'\n | 'search'\n | 'doc-abstract'\n | 'doc-acknowledgments'\n | 'doc-afterword'\n | 'doc-appendix'\n | 'doc-backlink'\n | 'doc-biblioentry'\n | 'doc-bibliography'\n | 'doc-biblioref'\n | 'doc-chapter'\n | 'doc-colophon'\n | 'doc-conclusion'\n | 'doc-cover'\n | 'doc-credit'\n | 'doc-credits'\n | 'doc-dedication'\n | 'doc-endnote'\n | 'doc-endnotes'\n | 'doc-epigraph'\n | 'doc-epilogue'\n | 'doc-errata'\n | 'doc-example'\n | 'doc-footnote'\n | 'doc-foreword'\n | 'doc-glossary'\n | 'doc-glossref'\n | 'doc-index'\n | 'doc-introduction'\n | 'doc-noteref'\n | 'doc-notice'\n | 'doc-pagebreak'\n | 'doc-pagelist'\n | 'doc-part'\n | 'doc-preface'\n | 'doc-prologue'\n | 'doc-pullquote'\n | 'doc-qna'\n | 'doc-subtitle'\n | 'doc-tip'\n | 'doc-toc'\n"]}
|
|
@@ -1,17 +1,2 @@
|
|
|
1
|
-
|
|
2
|
-
* Valid values for `aria-expanded`.
|
|
3
|
-
*/
|
|
4
|
-
export type ARIAAutoComplete = 'none' | 'inline' | 'list' | 'both';
|
|
5
|
-
/**
|
|
6
|
-
* Valid values for `aria-expanded`.
|
|
7
|
-
*/
|
|
8
|
-
export type ARIAExpanded = 'true' | 'false';
|
|
9
|
-
/**
|
|
10
|
-
* Valid values for `aria-haspopup`.
|
|
11
|
-
*/
|
|
12
|
-
export type ARIAHasPopup = 'false' | 'true' | 'menu' | 'listbox' | 'tree' | 'grid' | 'dialog';
|
|
13
|
-
/**
|
|
14
|
-
* Valid values for `role`.
|
|
15
|
-
*/
|
|
16
|
-
export type ARIARole = 'alert' | 'alertdialog' | 'button' | 'checkbox' | 'dialog' | 'gridcell' | 'link' | 'log' | 'marquee' | 'menuitem' | 'menuitemcheckbox' | 'menuitemradio' | 'option' | 'progressbar' | 'radio' | 'scrollbar' | 'searchbox' | 'slider' | 'spinbutton' | 'status' | 'switch' | 'tab' | 'tabpanel' | 'textbox' | 'timer' | 'tooltip' | 'treeitem' | 'combobox' | 'grid' | 'listbox' | 'menu' | 'menubar' | 'radiogroup' | 'tablist' | 'tree' | 'treegrid' | 'application' | 'article' | 'cell' | 'columnheader' | 'definition' | 'directory' | 'document' | 'feed' | 'figure' | 'group' | 'heading' | 'img' | 'list' | 'listitem' | 'math' | 'none' | 'note' | 'presentation' | 'region' | 'row' | 'rowgroup' | 'rowheader' | 'separator' | 'table' | 'term' | 'text' | 'toolbar' | 'banner' | 'complementary' | 'contentinfo' | 'form' | 'main' | 'navigation' | 'region' | 'search' | 'doc-abstract' | 'doc-acknowledgments' | 'doc-afterword' | 'doc-appendix' | 'doc-backlink' | 'doc-biblioentry' | 'doc-bibliography' | 'doc-biblioref' | 'doc-chapter' | 'doc-colophon' | 'doc-conclusion' | 'doc-cover' | 'doc-credit' | 'doc-credits' | 'doc-dedication' | 'doc-endnote' | 'doc-endnotes' | 'doc-epigraph' | 'doc-epilogue' | 'doc-errata' | 'doc-example' | 'doc-footnote' | 'doc-foreword' | 'doc-glossary' | 'doc-glossref' | 'doc-index' | 'doc-introduction' | 'doc-noteref' | 'doc-notice' | 'doc-pagebreak' | 'doc-pagelist' | 'doc-part' | 'doc-preface' | 'doc-prologue' | 'doc-pullquote' | 'doc-qna' | 'doc-subtitle' | 'doc-tip' | 'doc-toc';
|
|
1
|
+
export { ARIAAutoComplete, ARIAExpanded, ARIAHasPopup, ARIARole } from './aria.js';
|
|
17
2
|
//# sourceMappingURL=role.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"role.d.ts","sourceRoot":"","sources":["../../../src/types/role.ts"],"names":[],"mappings":"AAAA
|
|
1
|
+
{"version":3,"file":"role.d.ts","sourceRoot":"","sources":["../../../src/types/role.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,gBAAgB,EAAE,YAAY,EAAE,YAAY,EAAE,QAAQ,EAAE,MAAM,WAAW,CAAA"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"role.js","sourceRoot":"","sources":["../../../src/types/role.ts"],"names":[],"mappings":"","sourcesContent":["
|
|
1
|
+
{"version":3,"file":"role.js","sourceRoot":"","sources":["../../../src/types/role.ts"],"names":[],"mappings":"","sourcesContent":["export { ARIAAutoComplete, ARIAExpanded, ARIAHasPopup, ARIARole } from './aria.js'\n"]}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Navigation.test.d.ts","sourceRoot":"","sources":["../../../../test/elements/navigation/Navigation.test.ts"],"names":[],"mappings":"AAEA,OAAO,mDAAmD,CAAA;AAC1D,OAAO,wDAAwD,CAAA"}
|
|
@@ -0,0 +1,113 @@
|
|
|
1
|
+
import { html, fixture, assert, oneEvent, aTimeout } from '@open-wc/testing';
|
|
2
|
+
import '../../../src/elements/navigation/ui-navigation.js';
|
|
3
|
+
import '../../../src/elements/navigation/ui-navigation-item.js';
|
|
4
|
+
describe('Navigation', () => {
|
|
5
|
+
it('renders with slot content', async () => {
|
|
6
|
+
const el = await fixture(html `
|
|
7
|
+
<ui-navigation aria-label="Main navigation">
|
|
8
|
+
<ui-navigation-item selected aria-current="page">Home</ui-navigation-item>
|
|
9
|
+
<ui-navigation-item>Search</ui-navigation-item>
|
|
10
|
+
<ui-navigation-item>Files</ui-navigation-item>
|
|
11
|
+
</ui-navigation>
|
|
12
|
+
`);
|
|
13
|
+
const nav = el.shadowRoot.querySelector('nav');
|
|
14
|
+
assert.ok(nav, 'nav element is rendered');
|
|
15
|
+
assert.equal(nav?.getAttribute('aria-label'), 'Main navigation');
|
|
16
|
+
const items = el._items;
|
|
17
|
+
assert.equal(items.length, 3);
|
|
18
|
+
assert.isTrue(items[0].selected);
|
|
19
|
+
assert.equal(items[0].getAttribute('aria-current'), 'page');
|
|
20
|
+
});
|
|
21
|
+
it('sets correct tabindex for items', async () => {
|
|
22
|
+
const el = await fixture(html `
|
|
23
|
+
<ui-navigation>
|
|
24
|
+
<ui-navigation-item selected>Home</ui-navigation-item>
|
|
25
|
+
<ui-navigation-item>Search</ui-navigation-item>
|
|
26
|
+
</ui-navigation>
|
|
27
|
+
`);
|
|
28
|
+
const items = el._items;
|
|
29
|
+
assert.equal(items[0].getAttribute('tabindex'), '0');
|
|
30
|
+
assert.equal(items[1].getAttribute('tabindex'), '-1');
|
|
31
|
+
});
|
|
32
|
+
it('selects item on click and fires select event', async () => {
|
|
33
|
+
const el = await fixture(html `
|
|
34
|
+
<ui-navigation>
|
|
35
|
+
<ui-navigation-item>Home</ui-navigation-item>
|
|
36
|
+
<ui-navigation-item>Search</ui-navigation-item>
|
|
37
|
+
</ui-navigation>
|
|
38
|
+
`);
|
|
39
|
+
const items = el._items;
|
|
40
|
+
setTimeout(() => items[1].click());
|
|
41
|
+
const ev = await oneEvent(el, 'select');
|
|
42
|
+
assert.equal(ev.detail.item, items[1]);
|
|
43
|
+
assert.isTrue(items[1].selected);
|
|
44
|
+
assert.equal(items[1].getAttribute('tabindex'), '0');
|
|
45
|
+
assert.isFalse(items[0].selected);
|
|
46
|
+
assert.equal(items[0].getAttribute('tabindex'), '-1');
|
|
47
|
+
});
|
|
48
|
+
it('handles keyboard navigation (vertical)', async () => {
|
|
49
|
+
const el = await fixture(html `
|
|
50
|
+
<ui-navigation>
|
|
51
|
+
<ui-navigation-item>Home</ui-navigation-item>
|
|
52
|
+
<ui-navigation-item>Search</ui-navigation-item>
|
|
53
|
+
<ui-navigation-item>Files</ui-navigation-item>
|
|
54
|
+
</ui-navigation>
|
|
55
|
+
`);
|
|
56
|
+
const items = el._items;
|
|
57
|
+
items[0].focus();
|
|
58
|
+
// ArrowDown moves to next
|
|
59
|
+
items[0].dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowDown', bubbles: true }));
|
|
60
|
+
await aTimeout(0);
|
|
61
|
+
assert.dom.equal(document.activeElement, items[1]);
|
|
62
|
+
// ArrowUp wraps to last
|
|
63
|
+
items[1].dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowUp', bubbles: true }));
|
|
64
|
+
await aTimeout(0);
|
|
65
|
+
assert.dom.equal(document.activeElement, items[0]);
|
|
66
|
+
});
|
|
67
|
+
it('handles keyboard navigation (horizontal)', async () => {
|
|
68
|
+
const el = await fixture(html `
|
|
69
|
+
<ui-navigation orientation="horizontal">
|
|
70
|
+
<ui-navigation-item>Home</ui-navigation-item>
|
|
71
|
+
<ui-navigation-item>Search</ui-navigation-item>
|
|
72
|
+
</ui-navigation>
|
|
73
|
+
`);
|
|
74
|
+
const items = el._items;
|
|
75
|
+
items[0].focus();
|
|
76
|
+
items[0].dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowRight', bubbles: true }));
|
|
77
|
+
await aTimeout(0);
|
|
78
|
+
assert.dom.equal(document.activeElement, items[1]);
|
|
79
|
+
items[1].dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowLeft', bubbles: true }));
|
|
80
|
+
await aTimeout(0);
|
|
81
|
+
assert.dom.equal(document.activeElement, items[0]);
|
|
82
|
+
});
|
|
83
|
+
it('skips disabled items in navigation', async () => {
|
|
84
|
+
const el = await fixture(html `
|
|
85
|
+
<ui-navigation>
|
|
86
|
+
<ui-navigation-item>Home</ui-navigation-item>
|
|
87
|
+
<ui-navigation-item disabled>Search</ui-navigation-item>
|
|
88
|
+
<ui-navigation-item>Files</ui-navigation-item>
|
|
89
|
+
</ui-navigation>
|
|
90
|
+
`);
|
|
91
|
+
const items = el._items;
|
|
92
|
+
items[0].focus();
|
|
93
|
+
items[0].dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowDown', bubbles: true }));
|
|
94
|
+
await aTimeout(0);
|
|
95
|
+
// Should skip disabled and go to Files
|
|
96
|
+
assert.dom.equal(document.activeElement, items[2]);
|
|
97
|
+
});
|
|
98
|
+
it('sets aria-current on selected item if current is set', async () => {
|
|
99
|
+
const el = await fixture(html `
|
|
100
|
+
<ui-navigation current="page">
|
|
101
|
+
<ui-navigation-item>Home</ui-navigation-item>
|
|
102
|
+
<ui-navigation-item>Search</ui-navigation-item>
|
|
103
|
+
</ui-navigation>
|
|
104
|
+
`);
|
|
105
|
+
const items = el._items;
|
|
106
|
+
// Simulate user selection by clicking the item (public API)
|
|
107
|
+
items[1].click();
|
|
108
|
+
await aTimeout(0);
|
|
109
|
+
assert.equal(items[1].getAttribute('aria-current'), 'page');
|
|
110
|
+
assert.isFalse(items[0].hasAttribute('aria-current'));
|
|
111
|
+
});
|
|
112
|
+
});
|
|
113
|
+
//# sourceMappingURL=Navigation.test.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Navigation.test.js","sourceRoot":"","sources":["../../../../test/elements/navigation/Navigation.test.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, fixture, assert, oneEvent, aTimeout } from '@open-wc/testing'\nimport type Navigation from '../../../src/elements/navigation/internals/Navigation.js'\nimport '../../../src/elements/navigation/ui-navigation.js'\nimport '../../../src/elements/navigation/ui-navigation-item.js'\n\ndescribe('Navigation', () => {\n it('renders with slot content', async () => {\n const el = await fixture<Navigation>(html`\n <ui-navigation aria-label=\"Main navigation\">\n <ui-navigation-item selected aria-current=\"page\">Home</ui-navigation-item>\n <ui-navigation-item>Search</ui-navigation-item>\n <ui-navigation-item>Files</ui-navigation-item>\n </ui-navigation>\n `)\n const nav = el.shadowRoot!.querySelector('nav')\n assert.ok(nav, 'nav element is rendered')\n assert.equal(nav?.getAttribute('aria-label'), 'Main navigation')\n const items = el._items\n assert.equal(items.length, 3)\n assert.isTrue(items[0].selected)\n assert.equal(items[0].getAttribute('aria-current'), 'page')\n })\n\n it('sets correct tabindex for items', async () => {\n const el = await fixture<Navigation>(html`\n <ui-navigation>\n <ui-navigation-item selected>Home</ui-navigation-item>\n <ui-navigation-item>Search</ui-navigation-item>\n </ui-navigation>\n `)\n const items = el._items\n assert.equal(items[0].getAttribute('tabindex'), '0')\n assert.equal(items[1].getAttribute('tabindex'), '-1')\n })\n\n it('selects item on click and fires select event', async () => {\n const el = await fixture<Navigation>(html`\n <ui-navigation>\n <ui-navigation-item>Home</ui-navigation-item>\n <ui-navigation-item>Search</ui-navigation-item>\n </ui-navigation>\n `)\n const items = el._items\n setTimeout(() => items[1].click())\n const ev = await oneEvent(el, 'select')\n assert.equal(ev.detail.item, items[1])\n assert.isTrue(items[1].selected)\n assert.equal(items[1].getAttribute('tabindex'), '0')\n assert.isFalse(items[0].selected)\n assert.equal(items[0].getAttribute('tabindex'), '-1')\n })\n\n it('handles keyboard navigation (vertical)', async () => {\n const el = await fixture<Navigation>(html`\n <ui-navigation>\n <ui-navigation-item>Home</ui-navigation-item>\n <ui-navigation-item>Search</ui-navigation-item>\n <ui-navigation-item>Files</ui-navigation-item>\n </ui-navigation>\n `)\n const items = el._items\n items[0].focus()\n // ArrowDown moves to next\n items[0].dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowDown', bubbles: true }))\n await aTimeout(0)\n assert.dom.equal(document.activeElement, items[1])\n // ArrowUp wraps to last\n items[1].dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowUp', bubbles: true }))\n await aTimeout(0)\n assert.dom.equal(document.activeElement, items[0])\n })\n\n it('handles keyboard navigation (horizontal)', async () => {\n const el = await fixture<Navigation>(html`\n <ui-navigation orientation=\"horizontal\">\n <ui-navigation-item>Home</ui-navigation-item>\n <ui-navigation-item>Search</ui-navigation-item>\n </ui-navigation>\n `)\n const items = el._items\n items[0].focus()\n items[0].dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowRight', bubbles: true }))\n await aTimeout(0)\n assert.dom.equal(document.activeElement, items[1])\n items[1].dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowLeft', bubbles: true }))\n await aTimeout(0)\n assert.dom.equal(document.activeElement, items[0])\n })\n\n it('skips disabled items in navigation', async () => {\n const el = await fixture<Navigation>(html`\n <ui-navigation>\n <ui-navigation-item>Home</ui-navigation-item>\n <ui-navigation-item disabled>Search</ui-navigation-item>\n <ui-navigation-item>Files</ui-navigation-item>\n </ui-navigation>\n `)\n const items = el._items\n items[0].focus()\n items[0].dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowDown', bubbles: true }))\n await aTimeout(0)\n // Should skip disabled and go to Files\n assert.dom.equal(document.activeElement, items[2])\n })\n\n it('sets aria-current on selected item if current is set', async () => {\n const el = await fixture<Navigation>(html`\n <ui-navigation current=\"page\">\n <ui-navigation-item>Home</ui-navigation-item>\n <ui-navigation-item>Search</ui-navigation-item>\n </ui-navigation>\n `)\n const items = el._items\n // Simulate user selection by clicking the item (public API)\n items[1].click()\n await aTimeout(0)\n assert.equal(items[1].getAttribute('aria-current'), 'page')\n assert.isFalse(items[0].hasAttribute('aria-current'))\n })\n})\n"]}
|
package/demo/elements/index.html
CHANGED
|
@@ -52,6 +52,8 @@
|
|
|
52
52
|
<dt><a href="mention-textarea/index.html">Mention Textarea</a></dt>
|
|
53
53
|
<dd>The mention-textarea component.</dd>
|
|
54
54
|
|
|
55
|
+
<dt><a href="navigation/navigation.html">Navigation Menu</a></dt>
|
|
56
|
+
<dd>The navigation component.</dd>
|
|
55
57
|
<dt><a href="navigation/navigation-item.html">Navigation Item</a></dt>
|
|
56
58
|
<dd>The navigation-item component.</dd>
|
|
57
59
|
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html lang="en">
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="UTF-8">
|
|
5
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
6
|
+
<title>Navigation item Demo</title>
|
|
7
|
+
<link
|
|
8
|
+
href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap"
|
|
9
|
+
rel="stylesheet"
|
|
10
|
+
/>
|
|
11
|
+
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200" rel="stylesheet" />
|
|
12
|
+
<link href="../../../src/styles/m3/tokens.css" rel="stylesheet" type="text/css" />
|
|
13
|
+
<link href="../../../src/styles/m3/theme.css" rel="stylesheet" type="text/css" />
|
|
14
|
+
<link href="../../page.css" rel="stylesheet" type="text/css" />
|
|
15
|
+
</head>
|
|
16
|
+
<body data-gr-ext-disabled="next">
|
|
17
|
+
<div id="app"></div>
|
|
18
|
+
<script type="module" src="/.tmp/demo/elements/navigation/navigation.js"></script>
|
|
19
|
+
</body>
|
|
20
|
+
</html>
|
|
@@ -0,0 +1,45 @@
|
|
|
1
|
+
import { html, TemplateResult } from 'lit'
|
|
2
|
+
import { DemoPage } from '../../../src/demo/DemoPage.js'
|
|
3
|
+
import { reactive } from '../../../src/decorators/index.js'
|
|
4
|
+
|
|
5
|
+
import '../../../src/elements/navigation/ui-navigation-item.js'
|
|
6
|
+
import '../../../src/elements/navigation/ui-navigation.js'
|
|
7
|
+
import '../../../src/md/icons/ui-icon.js'
|
|
8
|
+
import '../../../src/md/checkbox/ui-checkbox.js'
|
|
9
|
+
|
|
10
|
+
class ComponentDemoPage extends DemoPage {
|
|
11
|
+
@reactive()
|
|
12
|
+
protected accessor selected = false
|
|
13
|
+
|
|
14
|
+
constructor() {
|
|
15
|
+
super()
|
|
16
|
+
this.componentName = '<ui-navigation>'
|
|
17
|
+
}
|
|
18
|
+
|
|
19
|
+
override contentTemplate(): TemplateResult {
|
|
20
|
+
return html`
|
|
21
|
+
<section class="demo-section">
|
|
22
|
+
<ui-navigation aria-label="Main navigation" current="page">
|
|
23
|
+
<ui-navigation-item selected aria-current="page">
|
|
24
|
+
<span slot="icon" aria-hidden="true">🏠</span>
|
|
25
|
+
Home
|
|
26
|
+
</ui-navigation-item>
|
|
27
|
+
<ui-navigation-item>
|
|
28
|
+
<span slot="icon" aria-hidden="true">🔍</span>
|
|
29
|
+
Search
|
|
30
|
+
</ui-navigation-item>
|
|
31
|
+
<ui-navigation-item>
|
|
32
|
+
<span slot="icon" aria-hidden="true">📁</span>
|
|
33
|
+
Files
|
|
34
|
+
</ui-navigation-item>
|
|
35
|
+
<ui-navigation-item iconOnly disabled aria-disabled="true" tabindex="-1" aria-label="Settings">
|
|
36
|
+
<span slot="icon" aria-hidden="true">⚙️</span>
|
|
37
|
+
</ui-navigation-item>
|
|
38
|
+
</ui-navigation>
|
|
39
|
+
</section>
|
|
40
|
+
`
|
|
41
|
+
}
|
|
42
|
+
}
|
|
43
|
+
|
|
44
|
+
const instance = new ComponentDemoPage()
|
|
45
|
+
instance.render()
|
package/package.json
CHANGED
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
import { css } from 'lit'
|
|
2
|
+
|
|
3
|
+
export default css`
|
|
4
|
+
:host {
|
|
5
|
+
display: block;
|
|
6
|
+
outline: none;
|
|
7
|
+
}
|
|
8
|
+
|
|
9
|
+
nav {
|
|
10
|
+
display: flex;
|
|
11
|
+
gap: 8px;
|
|
12
|
+
list-style: none;
|
|
13
|
+
padding: 0;
|
|
14
|
+
margin: 0;
|
|
15
|
+
}
|
|
16
|
+
|
|
17
|
+
:host([orientation='horizontal']) nav {
|
|
18
|
+
flex-direction: row;
|
|
19
|
+
}
|
|
20
|
+
|
|
21
|
+
:host([orientation='vertical']) nav {
|
|
22
|
+
flex-direction: column;
|
|
23
|
+
}
|
|
24
|
+
`
|
|
@@ -0,0 +1,181 @@
|
|
|
1
|
+
import { html, LitElement, type TemplateResult } from 'lit'
|
|
2
|
+
import { property, queryAssignedElements } from 'lit/decorators.js'
|
|
3
|
+
import type NavigationItem from './NavigationItem.js'
|
|
4
|
+
import { AriaCurrent } from '../../../types/aria.js'
|
|
5
|
+
|
|
6
|
+
/**
|
|
7
|
+
* NavigationList
|
|
8
|
+
*
|
|
9
|
+
* A semantic, accessible navigation container for `ui-navigation-item` elements.
|
|
10
|
+
* Handles keyboard navigation (roving tabindex), focus management, and ARIA roles.
|
|
11
|
+
*
|
|
12
|
+
* ## Usage Example
|
|
13
|
+
*
|
|
14
|
+
* ```html
|
|
15
|
+
* <ui-navigation aria-label="Main navigation" current="page">
|
|
16
|
+
* <ui-navigation-item selected>
|
|
17
|
+
* <span slot="icon" aria-hidden="true">🏠</span>
|
|
18
|
+
* Home
|
|
19
|
+
* </ui-navigation-item>
|
|
20
|
+
* <ui-navigation-item>
|
|
21
|
+
* <span slot="icon" aria-hidden="true">🔍</span>
|
|
22
|
+
* Search
|
|
23
|
+
* </ui-navigation-item>
|
|
24
|
+
* <ui-navigation-item>
|
|
25
|
+
* <span slot="icon" aria-hidden="true">📁</span>
|
|
26
|
+
* Files
|
|
27
|
+
* </ui-navigation-item>
|
|
28
|
+
* <ui-navigation-item iconOnly disabled aria-disabled="true" tabindex="-1">
|
|
29
|
+
* <span slot="icon" aria-hidden="true">⚙️</span>
|
|
30
|
+
* </ui-navigation-item>
|
|
31
|
+
* </ui-navigation>
|
|
32
|
+
* ```
|
|
33
|
+
*
|
|
34
|
+
* @slot - Place `ui-navigation-item` elements as direct children.
|
|
35
|
+
* @fires select - Dispatched when an item is selected via click or keyboard.
|
|
36
|
+
* The `detail` object contains the selected `item`.
|
|
37
|
+
*/
|
|
38
|
+
export default class Navigation extends LitElement {
|
|
39
|
+
/**
|
|
40
|
+
* Orientation of the navigation: 'horizontal' or 'vertical'.
|
|
41
|
+
* @attribute
|
|
42
|
+
*/
|
|
43
|
+
@property({ type: String, reflect: true }) accessor orientation: 'horizontal' | 'vertical' = 'vertical'
|
|
44
|
+
|
|
45
|
+
/**
|
|
46
|
+
* The current item in the navigation, used for ARIA attributes.
|
|
47
|
+
* Can be 'page', 'step', 'location', 'date', 'time', 'true', 'false', or ''.
|
|
48
|
+
* @attribute
|
|
49
|
+
*/
|
|
50
|
+
@property({ type: String, reflect: true }) accessor current: AriaCurrent = ''
|
|
51
|
+
|
|
52
|
+
/**
|
|
53
|
+
* Query all ui-navigation-item children
|
|
54
|
+
*/
|
|
55
|
+
@queryAssignedElements({ flatten: true }) accessor _items!: NavigationItem[]
|
|
56
|
+
|
|
57
|
+
override render(): TemplateResult {
|
|
58
|
+
return html`
|
|
59
|
+
<nav aria-label="${this.getAttribute('aria-label') || 'Navigation'}">
|
|
60
|
+
<slot @slotchange="${this._onSlotChange}"></slot>
|
|
61
|
+
</nav>
|
|
62
|
+
`
|
|
63
|
+
}
|
|
64
|
+
|
|
65
|
+
constructor() {
|
|
66
|
+
super()
|
|
67
|
+
this.addEventListener('keydown', this._onKeyDown.bind(this))
|
|
68
|
+
this.addEventListener('click', this._onClick.bind(this))
|
|
69
|
+
}
|
|
70
|
+
|
|
71
|
+
override firstUpdated() {
|
|
72
|
+
this._setTabIndexes()
|
|
73
|
+
}
|
|
74
|
+
|
|
75
|
+
private _onSlotChange = () => {
|
|
76
|
+
this._setTabIndexes()
|
|
77
|
+
}
|
|
78
|
+
|
|
79
|
+
/**
|
|
80
|
+
* Sets the initial `tabindex` for the items. The first selected item,
|
|
81
|
+
* or the first item if none are selected, receives `tabindex="0"`.
|
|
82
|
+
* All other items receive `tabindex="-1"`.
|
|
83
|
+
*/
|
|
84
|
+
private _setTabIndexes() {
|
|
85
|
+
const items = this._getEnabledItems()
|
|
86
|
+
if (!items.length) {
|
|
87
|
+
return
|
|
88
|
+
}
|
|
89
|
+
items.forEach((item) => {
|
|
90
|
+
if (item.disabled) {
|
|
91
|
+
return
|
|
92
|
+
}
|
|
93
|
+
item.setAttribute('tabindex', item.selected ? '0' : '-1')
|
|
94
|
+
})
|
|
95
|
+
}
|
|
96
|
+
|
|
97
|
+
private _getEnabledItems(): NavigationItem[] {
|
|
98
|
+
return (this._items || []).filter((item) => !item.disabled)
|
|
99
|
+
}
|
|
100
|
+
|
|
101
|
+
private _onClick = (e: MouseEvent) => {
|
|
102
|
+
const target = e.target as HTMLElement
|
|
103
|
+
const item = target.closest('ui-navigation-item')
|
|
104
|
+
if (item && this._items.includes(item)) {
|
|
105
|
+
this._selectItem(item)
|
|
106
|
+
}
|
|
107
|
+
}
|
|
108
|
+
|
|
109
|
+
private _selectItem(itemToSelect: NavigationItem) {
|
|
110
|
+
if (itemToSelect.disabled) {
|
|
111
|
+
return
|
|
112
|
+
}
|
|
113
|
+
|
|
114
|
+
this._items.forEach((item) => {
|
|
115
|
+
item.selected = item === itemToSelect
|
|
116
|
+
if (item.hasAttribute('aria-current')) {
|
|
117
|
+
item.removeAttribute('aria-current')
|
|
118
|
+
}
|
|
119
|
+
})
|
|
120
|
+
|
|
121
|
+
if (this.current) {
|
|
122
|
+
itemToSelect.setAttribute('aria-current', this.current)
|
|
123
|
+
}
|
|
124
|
+
this._updateFocus(itemToSelect)
|
|
125
|
+
|
|
126
|
+
this.dispatchEvent(
|
|
127
|
+
new CustomEvent('select', {
|
|
128
|
+
detail: { item: itemToSelect },
|
|
129
|
+
bubbles: false,
|
|
130
|
+
composed: true,
|
|
131
|
+
})
|
|
132
|
+
)
|
|
133
|
+
}
|
|
134
|
+
|
|
135
|
+
private _updateFocus(itemToFocus: NavigationItem) {
|
|
136
|
+
this._setTabIndexes()
|
|
137
|
+
itemToFocus.focus()
|
|
138
|
+
}
|
|
139
|
+
|
|
140
|
+
private _onKeyDown(e: KeyboardEvent) {
|
|
141
|
+
const items = this._getEnabledItems()
|
|
142
|
+
if (!items.length) {
|
|
143
|
+
return
|
|
144
|
+
}
|
|
145
|
+
|
|
146
|
+
const activeElement = (this.getRootNode() as Document | ShadowRoot).activeElement
|
|
147
|
+
if (!activeElement) {
|
|
148
|
+
return
|
|
149
|
+
}
|
|
150
|
+
|
|
151
|
+
// Find which of our items is the host of the active element.
|
|
152
|
+
// This is necessary because of focus delegation in ui-navigation-item.
|
|
153
|
+
const activeItem = items.find((item) => item === activeElement || item.shadowRoot?.contains(activeElement))
|
|
154
|
+
if (!activeItem) {
|
|
155
|
+
return
|
|
156
|
+
}
|
|
157
|
+
|
|
158
|
+
if (e.key === 'Enter' || e.key === ' ') {
|
|
159
|
+
e.preventDefault()
|
|
160
|
+
this._selectItem(activeItem)
|
|
161
|
+
return
|
|
162
|
+
}
|
|
163
|
+
|
|
164
|
+
const idx = items.indexOf(activeItem)
|
|
165
|
+
let nextIdx = idx
|
|
166
|
+
if (this.orientation === 'horizontal') {
|
|
167
|
+
if (e.key === 'ArrowRight') nextIdx = (idx + 1) % items.length
|
|
168
|
+
if (e.key === 'ArrowLeft') nextIdx = (idx - 1 + items.length) % items.length
|
|
169
|
+
} else {
|
|
170
|
+
if (e.key === 'ArrowDown') nextIdx = (idx + 1) % items.length
|
|
171
|
+
if (e.key === 'ArrowUp') nextIdx = (idx - 1 + items.length) % items.length
|
|
172
|
+
}
|
|
173
|
+
if (e.key === 'Home') nextIdx = 0
|
|
174
|
+
if (e.key === 'End') nextIdx = items.length - 1
|
|
175
|
+
if (nextIdx !== idx) {
|
|
176
|
+
items[nextIdx].focus()
|
|
177
|
+
items.forEach((item, i) => item.setAttribute('tabindex', i === nextIdx ? '0' : '-1'))
|
|
178
|
+
e.preventDefault()
|
|
179
|
+
}
|
|
180
|
+
}
|
|
181
|
+
}
|