@lion/ui 0.18.0-menu-system.4 → 0.18.0-menu-system.5
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/components/collapsible/test-suites/DisclosureMixin.suite.js +30 -0
- package/components/menu/src/InteractiveListMixin.js +56 -23
- package/components/menu/src/LionMenu.js +1 -1
- package/components/menu/src/LionToolbar.js +1 -1
- package/components/menu/src/utils/listItemInteractions.js +25 -6
- package/components/menu/test/lion-menu.test.js +2 -1
- package/components/menu/test-suites/InteractiveListMixin.suite.js +164 -2
- package/custom-elements.json +263 -19
- package/dist-types/components/collapsible/test-suites/DisclosureMixin.suite.d.ts +2 -0
- package/dist-types/components/collapsible/test-suites/DisclosureMixin.suite.d.ts.map +1 -0
- package/dist-types/components/menu/src/InteractiveListMixin.d.ts +11 -5
- package/dist-types/components/menu/src/InteractiveListMixin.d.ts.map +1 -1
- package/dist-types/components/menu/src/LionMenu.d.ts +4 -2
- package/dist-types/components/menu/src/LionMenu.d.ts.map +1 -1
- package/dist-types/components/menu/src/LionMenuOverlay.d.ts +8 -4
- package/dist-types/components/menu/src/LionMenuOverlay.d.ts.map +1 -1
- package/dist-types/components/menu/src/LionTree.d.ts +4 -2
- package/dist-types/components/menu/src/LionTree.d.ts.map +1 -1
- package/dist-types/components/menu/src/MultiLevelListMixin.d.ts +4 -2
- package/dist-types/components/menu/src/MultiLevelListMixin.d.ts.map +1 -1
- package/dist-types/components/menu/src/utils/listItemInteractions.d.ts +8 -2
- package/dist-types/components/menu/src/utils/listItemInteractions.d.ts.map +1 -1
- package/dist-types/components/menu/test-suites/InteractiveListMixin.suite.d.ts +6 -5
- package/dist-types/components/menu/test-suites/InteractiveListMixin.suite.d.ts.map +1 -1
- package/dist-types/exports/menu-test-suites.d.ts +2 -0
- package/dist-types/exports/menu-test-suites.d.ts.map +1 -0
- package/dist-types/tsconfig.tsbuildinfo +1 -1
- package/docs/components/checkbox-group/overview.md +2 -2
- package/docs/components/collapsible/overview.md +1 -1
- package/docs/components/combobox/overview.md +1 -1
- package/docs/components/combobox/use-cases.md +1 -1
- package/docs/components/dialog/overview.md +1 -1
- package/docs/components/fieldset/overview.md +5 -5
- package/docs/components/form/overview.md +3 -3
- package/docs/components/form/use-cases.md +2 -2
- package/docs/components/icon/use-cases.md +1 -1
- package/docs/components/input/overview.md +1 -1
- package/docs/components/input-amount/overview.md +3 -3
- package/docs/components/input-date/overview.md +3 -3
- package/docs/components/input-datepicker/overview.md +5 -5
- package/docs/components/input-email/overview.md +2 -2
- package/docs/components/input-file/overview.md +1 -1
- package/docs/components/input-iban/overview.md +2 -2
- package/docs/components/input-range/overview.md +2 -2
- package/docs/components/input-stepper/overview.md +1 -1
- package/docs/components/input-tel/overview.md +1 -1
- package/docs/components/input-tel/use-cases.md +6 -6
- package/docs/components/input-tel-dropdown/overview.md +1 -1
- package/docs/components/listbox/use-cases.md +1 -1
- package/docs/components/menu/api-table.md +197 -192
- package/docs/components/menu/overview.md +39 -39
- package/docs/components/radio-group/overview.md +3 -3
- package/docs/components/select/use-cases.md +1 -1
- package/docs/components/select-rich/use-cases.md +2 -2
- package/docs/components/tabs/examples.md +1 -1
- package/docs/fundamentals/index.md +4 -4
- package/docs/fundamentals/node-tools/publish-docs/overview.md +3 -3
- package/docs/fundamentals/node-tools/rocket-preset-extend-lion-docs/overview.md +2 -2
- package/docs/fundamentals/rationales/accessibility.md +1 -1
- package/docs/fundamentals/systems/core/SlotMixin.md +1 -1
- package/docs/fundamentals/systems/core/overview.md +1 -1
- package/docs/fundamentals/systems/form/formatting-and-parsing.md +4 -4
- package/docs/fundamentals/systems/form/model-value.md +1 -1
- package/docs/fundamentals/systems/form/overview.md +28 -28
- package/docs/fundamentals/systems/form/validate.md +2 -2
- package/docs/fundamentals/systems/localize/overview.md +4 -4
- package/docs/fundamentals/systems/overlays/configuration.md +2 -2
- package/docs/fundamentals/systems/overlays/overview.md +5 -5
- package/docs/fundamentals/systems/overlays/use-cases.md +2 -2
- package/docs/fundamentals/tools/helpers/overview.md +1 -1
- package/docs/fundamentals/tools/singleton-manager/overview.md +4 -4
- package/docs/guides/how-to/create-a-custom-field.md +5 -5
- package/docs/guides/how-to/create-a-form.md +4 -4
- package/docs/guides/how-to/extend-a-native-input.md +2 -2
- package/docs/guides/how-to/index.md +1 -1
- package/docs/guides/index.md +8 -8
- package/docs/guides/principles/index.md +5 -5
- package/docs/guides/principles/styling.md +1 -1
- package/exports/menu-test-suites.js +2 -0
- package/menu-test-suites.js +2 -0
- package/package.json +1 -1
|
@@ -16,41 +16,42 @@ eleventyNavigation:
|
|
|
16
16
|
|
|
17
17
|
### Fields
|
|
18
18
|
|
|
19
|
-
| Name | Privacy | Type | Default | Description
|
|
20
|
-
| --------------------------- | --------- | ---------------------------------------------------------------------- | ------------------- |
|
|
21
|
-
| `activeIndex` | public | | |
|
|
22
|
-
| `activeItem` | public | | |
|
|
23
|
-
| `bar` | public | `boolean` | `false` | Enable bar to use \[role="menubar"] and horizontal navigation
|
|
24
|
-
| `behaveAsAccordion` | public | `boolean` | `true` | When true, will have a maximum of one submenu open at a time
|
|
25
|
-
| `checkedIndex` | public | `number \| number[]` | |
|
|
26
|
-
| `handleFocus` | public | `boolean` | `true` |
|
|
27
|
-
| `invokerInteraction` | public | `string` | `'click'` |
|
|
28
|
-
| `invokerNode` | public | `HTMLElement` | `undefined` | When an invokerNode is supplied (usually by a parent level menu), it will take precedence
over \[slot=invoker] and previousElementSibling with \[data-invoker] attribute
|
|
29
|
-
| `isInteractiveList` | public | | | Since we cannot check instanceof with mixins, use this getter instead.
This way, the outside world can confirm the type of an element
|
|
30
|
-
| `itemWrap` | public | `boolean` | |
|
|
31
|
-
| `level` | public | `number` | `1` | The level of nested menus. Will be reflected as attribute for styling purposes
|
|
32
|
-
| `listItems` | public | `HTMLElement[]` | | When used with FormRegistrarMixin, children will register themselves. Otherwise,
\_\_listItems are gathered via a slotchange listener
|
|
33
|
-
| `multipleChoice` | public | `boolean` | `false` |
|
|
34
|
-
| `noPreselect` | public | `boolean` | `true` | By default, checkedIndex is set to 0. When noPreselect is true,
checkedIndex will not be set
|
|
35
|
-
| `orientation` | public | `string` | `'vertical'` |
|
|
36
|
-
| `parentList` | public | `InteractiveList` | `undefined` | The parent list if level > 1
|
|
37
|
-
| `rotateKeyboardNavigation` | public | `boolean` | `false` |
|
|
38
|
-
| `selectionFollowsFocus` | public | `boolean` | `false` |
|
|
39
|
-
| `slots` | public | | |
|
|
40
|
-
| `_activateOnCharTimeout` | protected | `number` | `2000` | The pending char sequence that will set active list item
|
|
41
|
-
| `_activateOnTypedChars` | public | `boolean` | `true` | By default, a typed character (or a sequence thereof) will be matched against
the values of list items. The first and closest match, becomes active
(focused or activedescendant depending on \_matchMode)
|
|
42
|
-
| `_activeMode` | public | `'activedescendant'\|'roving-tabindex'\|'tabbable-disclosure'\|'none'` | `'roving-tabindex'` | Whenever possible (for \[role="listbox\|menu"], usually with one level) we use an
\[active descendant]\(https\://www\.w3.org/TR/wai-aria-practices-1.1/#kbd\_focus\_activedescendant).
For \[role=toolbar], we use a \[roving tabindex]\(https\://www\.w3.org/TR/wai-aria-practices-1.1/#kbd\_roving\_tabindex)
Other examples:
- \[role="menubar"]\(https\://www\.w3.org/TR/wai-aria-practices-1.1/examples/menubar/menubar-1/menubar-1.html)
- \[role="tree"]\(https\://www\.w3.org/TR/wai-aria-practices-1.1/examples/treeview/treeview-1/treeview-1b.html)
For disclosure menus, we need keyboard navigation, but treat every list item
(more precisely its anchor child) as a tab stop.
|
|
43
|
-
| `_childrenRoles` | protected | `InteractiveListItemRole[]` | | The roles to look for when children are registered to listItems
|
|
44
|
-
| `_contentNode` | protected | | |
|
|
45
|
-
| `_hasSmartChildren` | protected | `boolean` | `false` | When children are 'smart' (like LionOption), checked and active states will be set
to them and they are responsible for setting \[aria-selected].
When false, \`get listItems()\` needs to be configured to point to the list items.
|
|
46
|
-
| `_hasSmartListItems` | public | | |
|
|
47
|
-
| `_interactiveChildrenRoles` | protected | | |
|
|
48
|
-
| `_invokerNode` | protected | | |
|
|
49
|
-
| `_listItemsSlot` | protected | `HTMLSlotElement` | | Place in the template that contains children with .\_childrenRoles
|
|
50
|
-
| `_listNode` | protected | `HTMLElement` | | This is the (usually focusable, unless combobox) element that will contain \[aria-activedescendant]
Depending on the children, role will be "listbox\|menu\|menubar\|tree\|toolbar"
|
|
51
|
-
| `_listRole` | protected | `'menu'\|'menubar'\|'listbox'\|'tree'\|'toolbar'` | `'menu'` | The role that will be put on \_listNode
|
|
52
|
-
| `
|
|
53
|
-
| `
|
|
19
|
+
| Name | Privacy | Type | Default | Description | Inherited From |
|
|
20
|
+
| --------------------------- | --------- | ---------------------------------------------------------------------- | ------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | -------------------- |
|
|
21
|
+
| `activeIndex` | public | | | | InteractiveListMixin |
|
|
22
|
+
| `activeItem` | public | | | | InteractiveListMixin |
|
|
23
|
+
| `bar` | public | `boolean` | `false` | Enable bar to use \[role="menubar"] and horizontal navigation | |
|
|
24
|
+
| `behaveAsAccordion` | public | `boolean` | `true` | When true, will have a maximum of one submenu open at a time | MultiLevelListMixin |
|
|
25
|
+
| `checkedIndex` | public | `number \| number[]` | | | InteractiveListMixin |
|
|
26
|
+
| `handleFocus` | public | `boolean` | `true` | | MultiLevelListMixin |
|
|
27
|
+
| `invokerInteraction` | public | `string` | `'click'` | | |
|
|
28
|
+
| `invokerNode` | public | `HTMLElement` | `undefined` | When an invokerNode is supplied (usually by a parent level menu), it will take precedence
over \[slot=invoker] and previousElementSibling with \[data-invoker] attribute | MultiLevelListMixin |
|
|
29
|
+
| `isInteractiveList` | public | | | Since we cannot check instanceof with mixins, use this getter instead.
This way, the outside world can confirm the type of an element | InteractiveListMixin |
|
|
30
|
+
| `itemWrap` | public | `boolean` | | | InteractiveListMixin |
|
|
31
|
+
| `level` | public | `number` | `1` | The level of nested menus. Will be reflected as attribute for styling purposes | MultiLevelListMixin |
|
|
32
|
+
| `listItems` | public | `HTMLElement[]` | | When used with FormRegistrarMixin, children will register themselves. Otherwise,
\_\_listItems are gathered via a slotchange listener | InteractiveListMixin |
|
|
33
|
+
| `multipleChoice` | public | `boolean` | `false` | | InteractiveListMixin |
|
|
34
|
+
| `noPreselect` | public | `boolean` | `true` | By default, checkedIndex is set to 0. When noPreselect is true,
checkedIndex will not be set | InteractiveListMixin |
|
|
35
|
+
| `orientation` | public | `string` | `'vertical'` | | InteractiveListMixin |
|
|
36
|
+
| `parentList` | public | `InteractiveList` | `undefined` | The parent list if level > 1 | MultiLevelListMixin |
|
|
37
|
+
| `rotateKeyboardNavigation` | public | `boolean` | `false` | | InteractiveListMixin |
|
|
38
|
+
| `selectionFollowsFocus` | public | `boolean` | `false` | | InteractiveListMixin |
|
|
39
|
+
| `slots` | public | | | | InteractiveListMixin |
|
|
40
|
+
| `_activateOnCharTimeout` | protected | `number` | `2000` | The pending char sequence that will set active list item | InteractiveListMixin |
|
|
41
|
+
| `_activateOnTypedChars` | public | `boolean` | `true` | By default, a typed character (or a sequence thereof) will be matched against
the values of list items. The first and closest match, becomes active
(focused or activedescendant depending on \_matchMode) | InteractiveListMixin |
|
|
42
|
+
| `_activeMode` | public | `'activedescendant'\|'roving-tabindex'\|'tabbable-disclosure'\|'none'` | `'roving-tabindex'` | Whenever possible (for \[role="listbox\|menu"], usually with one level) we use an
\[active descendant]\(https\://www\.w3.org/TR/wai-aria-practices-1.1/#kbd\_focus\_activedescendant).
For \[role=toolbar], we use a \[roving tabindex]\(https\://www\.w3.org/TR/wai-aria-practices-1.1/#kbd\_roving\_tabindex)
Other examples:
- \[role="menubar"]\(https\://www\.w3.org/TR/wai-aria-practices-1.1/examples/menubar/menubar-1/menubar-1.html)
- \[role="tree"]\(https\://www\.w3.org/TR/wai-aria-practices-1.1/examples/treeview/treeview-1/treeview-1b.html)
For disclosure menus, we need keyboard navigation, but treat every list item
(more precisely its anchor child) as a tab stop. | InteractiveListMixin |
|
|
43
|
+
| `_childrenRoles` | protected | `InteractiveListItemRole[]` | | The roles to look for when children are registered to listItems | InteractiveListMixin |
|
|
44
|
+
| `_contentNode` | protected | | | | MultiLevelListMixin |
|
|
45
|
+
| `_hasSmartChildren` | protected | `boolean` | `false` | When children are 'smart' (like LionOption), checked and active states will be set
to them and they are responsible for setting \[aria-selected].
When false, \`get listItems()\` needs to be configured to point to the list items. | InteractiveListMixin |
|
|
46
|
+
| `_hasSmartListItems` | public | | | | InteractiveListMixin |
|
|
47
|
+
| `_interactiveChildrenRoles` | protected | | | | InteractiveListMixin |
|
|
48
|
+
| `_invokerNode` | protected | | | | MultiLevelListMixin |
|
|
49
|
+
| `_listItemsSlot` | protected | `HTMLSlotElement` | | Place in the template that contains children with .\_childrenRoles | InteractiveListMixin |
|
|
50
|
+
| `_listNode` | protected | `HTMLElement` | | This is the (usually focusable, unless combobox) element that will contain \[aria-activedescendant]
Depending on the children, role will be "listbox\|menu\|menubar\|tree\|toolbar" | InteractiveListMixin |
|
|
51
|
+
| `_listRole` | protected | `'menu'\|'menubar'\|'listbox'\|'tree'\|'toolbar'` | `'menu'` | The role that will be put on \_listNode | InteractiveListMixin |
|
|
52
|
+
| `_onPopState` | protected | | | | InteractiveListMixin |
|
|
53
|
+
| `_scrollTargetNode` | protected | | | | InteractiveListMixin |
|
|
54
|
+
| `_subListMap` | protected | `Map<HTMLElement\|LionItem,InteractiveList>` | `new Map()` | | MultiLevelListMixin |
|
|
54
55
|
|
|
55
56
|
### Methods
|
|
56
57
|
|
|
@@ -93,51 +94,52 @@ eleventyNavigation:
|
|
|
93
94
|
|
|
94
95
|
### Fields
|
|
95
96
|
|
|
96
|
-
| Name | Privacy | Type | Default | Description
|
|
97
|
-
| ---------------------------- | --------- | ---------------------------------------------------------------------- | -------------------- |
|
|
98
|
-
| `activeIndex` | public | | |
|
|
99
|
-
| `activeItem` | public | | |
|
|
100
|
-
| `bar` | public | `boolean` | `false` | Enable bar to use \[role="menubar"] and horizontal navigation
|
|
101
|
-
| `behaveAsAccordion` | public | `boolean` | `false` | When true, will have a maximum of one submenu open at a time
|
|
102
|
-
| `checkedIndex` | public | `number \| number[]` | |
|
|
103
|
-
| `config` | public | `Partial<OverlayConfig>` | `{}` | Configure the many options of the \`OverlayController\`
|
|
104
|
-
| `handleFocus` | public | `boolean` | `true` |
|
|
105
|
-
| `invokerInteraction` | public | `string` | `'click'` |
|
|
106
|
-
| `invokerNode` | public | `HTMLElement` | `undefined` | When an invokerNode is supplied (usually by a parent level menu), it will take precedence
over \[slot=invoker] and previousElementSibling with \[data-invoker] attribute
|
|
107
|
-
| `isInteractiveList` | public | | | Since we cannot check instanceof with mixins, use this getter instead.
This way, the outside world can confirm the type of an element
|
|
108
|
-
| `itemWrap` | public | `boolean` | |
|
|
109
|
-
| `level` | public | `number` | `1` | The level of nested menus. Will be reflected as attribute for styling purposes
|
|
110
|
-
| `listItems` | public | `HTMLElement[]` | | When used with FormRegistrarMixin, children will register themselves. Otherwise,
\_\_listItems are gathered via a slotchange listener
|
|
111
|
-
| `multipleChoice` | public | `boolean` | `false` |
|
|
112
|
-
| `noPreselect` | public | `boolean` | `false` | By default, checkedIndex is set to 0. When noPreselect is true,
checkedIndex will not be set
|
|
113
|
-
| `openableMode` | public | `'disclosure'\|'overlay'` | `'disclosure'` | Terminology aligned with https\://open-ui.org/components/openable.explainer/
|
|
114
|
-
| `opened` | public | `boolean` | `false` | If you add the opened attribute a dialog will be opened on page load. The invoker can be left out
in case the user does not need to be able to reopen the dialog.
|
|
115
|
-
| `orientation` | public | `string` | `'vertical'` |
|
|
116
|
-
| `parentList` | public | `InteractiveList` | `undefined` | The parent list if level > 1
|
|
117
|
-
| `rotateKeyboardNavigation` | public | `boolean` | `false` |
|
|
118
|
-
| `selectionFollowsFocus` | public | `boolean` | `false` |
|
|
119
|
-
| `slots` | public | | |
|
|
120
|
-
| `_activateOnCharTimeout` | protected | `number` | `2000` | The pending char sequence that will set active list item
|
|
121
|
-
| `_activateOnTypedChars` | public | `boolean` | `false` | By default, a typed character (or a sequence thereof) will be matched against
the values of list items. The first and closest match, becomes active
(focused or activedescendant depending on \_matchMode)
|
|
122
|
-
| `_activeMode` | public | `'activedescendant'\|'roving-tabindex'\|'tabbable-disclosure'\|'none'` | `'activedescendant'` | Whenever possible (for \[role="listbox\|menu"], usually with one level) we use an
\[active descendant]\(https\://www\.w3.org/TR/wai-aria-practices-1.1/#kbd\_focus\_activedescendant).
For \[role=toolbar], we use a \[roving tabindex]\(https\://www\.w3.org/TR/wai-aria-practices-1.1/#kbd\_roving\_tabindex)
Other examples:
- \[role="menubar"]\(https\://www\.w3.org/TR/wai-aria-practices-1.1/examples/menubar/menubar-1/menubar-1.html)
- \[role="tree"]\(https\://www\.w3.org/TR/wai-aria-practices-1.1/examples/treeview/treeview-1/treeview-1b.html)
For disclosure menus, we need keyboard navigation, but treat every list item
(more precisely its anchor child) as a tab stop.
|
|
123
|
-
| `_childrenRoles` | protected | `InteractiveListItemRole[]` | | The roles to look for when children are registered to listItems
|
|
124
|
-
| `_contentNode` | protected | | |
|
|
125
|
-
| `_hasSmartChildren` | protected | `boolean` | `false` | When children are 'smart' (like LionOption), checked and active states will be set
to them and they are responsible for setting \[aria-selected].
When false, \`get listItems()\` needs to be configured to point to the list items.
|
|
126
|
-
| `_hasSmartListItems` | public | | |
|
|
127
|
-
| `_interactiveChildrenRoles` | protected | | |
|
|
128
|
-
| `_invokerNode` | protected | | |
|
|
129
|
-
| `_listItemsSlot` | protected | `HTMLSlotElement` | | Place in the template that contains children with .\_childrenRoles
|
|
130
|
-
| `_listNode` | protected | `HTMLElement` | | This is the (usually focusable, unless combobox) element that will contain \[aria-activedescendant]
Depending on the children, role will be "listbox\|menu\|menubar\|tree\|toolbar"
|
|
131
|
-
| `_listRole` | protected | `'menu'\|'menubar'\|'listbox'\|'tree'\|'toolbar'` | `'menu'` | The role that will be put on \_listNode
|
|
132
|
-
| `_onOverlayShow` | protected | | |
|
|
133
|
-
| `
|
|
134
|
-
| `
|
|
135
|
-
| `
|
|
136
|
-
| `
|
|
137
|
-
| `
|
|
138
|
-
| `
|
|
139
|
-
| `
|
|
140
|
-
| `
|
|
97
|
+
| Name | Privacy | Type | Default | Description | Inherited From |
|
|
98
|
+
| ---------------------------- | --------- | ---------------------------------------------------------------------- | -------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | --------------------------- |
|
|
99
|
+
| `activeIndex` | public | | | | LionMenu |
|
|
100
|
+
| `activeItem` | public | | | | LionMenu |
|
|
101
|
+
| `bar` | public | `boolean` | `false` | Enable bar to use \[role="menubar"] and horizontal navigation | LionMenu |
|
|
102
|
+
| `behaveAsAccordion` | public | `boolean` | `false` | When true, will have a maximum of one submenu open at a time | LionMenu |
|
|
103
|
+
| `checkedIndex` | public | `number \| number[]` | | | LionMenu |
|
|
104
|
+
| `config` | public | `Partial<OverlayConfig>` | `{}` | Configure the many options of the \`OverlayController\` | OverlayMixin |
|
|
105
|
+
| `handleFocus` | public | `boolean` | `true` | | LionMenu |
|
|
106
|
+
| `invokerInteraction` | public | `string` | `'click'` | | LionMenu |
|
|
107
|
+
| `invokerNode` | public | `HTMLElement` | `undefined` | When an invokerNode is supplied (usually by a parent level menu), it will take precedence
over \[slot=invoker] and previousElementSibling with \[data-invoker] attribute | LionMenu |
|
|
108
|
+
| `isInteractiveList` | public | | | Since we cannot check instanceof with mixins, use this getter instead.
This way, the outside world can confirm the type of an element | LionMenu |
|
|
109
|
+
| `itemWrap` | public | `boolean` | | | LionMenu |
|
|
110
|
+
| `level` | public | `number` | `1` | The level of nested menus. Will be reflected as attribute for styling purposes | LionMenu |
|
|
111
|
+
| `listItems` | public | `HTMLElement[]` | | When used with FormRegistrarMixin, children will register themselves. Otherwise,
\_\_listItems are gathered via a slotchange listener | LionMenu |
|
|
112
|
+
| `multipleChoice` | public | `boolean` | `false` | | LionMenu |
|
|
113
|
+
| `noPreselect` | public | `boolean` | `false` | By default, checkedIndex is set to 0. When noPreselect is true,
checkedIndex will not be set | LionMenu |
|
|
114
|
+
| `openableMode` | public | `'disclosure'\|'overlay'` | `'disclosure'` | Terminology aligned with https\://open-ui.org/components/openable.explainer/ | |
|
|
115
|
+
| `opened` | public | `boolean` | `false` | If you add the opened attribute a dialog will be opened on page load. The invoker can be left out
in case the user does not need to be able to reopen the dialog. | OverlayMixin |
|
|
116
|
+
| `orientation` | public | `string` | `'vertical'` | | LionMenu |
|
|
117
|
+
| `parentList` | public | `InteractiveList` | `undefined` | The parent list if level > 1 | LionMenu |
|
|
118
|
+
| `rotateKeyboardNavigation` | public | `boolean` | `false` | | LionMenu |
|
|
119
|
+
| `selectionFollowsFocus` | public | `boolean` | `false` | | LionMenu |
|
|
120
|
+
| `slots` | public | | | | LionMenu |
|
|
121
|
+
| `_activateOnCharTimeout` | protected | `number` | `2000` | The pending char sequence that will set active list item | LionMenu |
|
|
122
|
+
| `_activateOnTypedChars` | public | `boolean` | `false` | By default, a typed character (or a sequence thereof) will be matched against
the values of list items. The first and closest match, becomes active
(focused or activedescendant depending on \_matchMode) | LionMenu |
|
|
123
|
+
| `_activeMode` | public | `'activedescendant'\|'roving-tabindex'\|'tabbable-disclosure'\|'none'` | `'activedescendant'` | Whenever possible (for \[role="listbox\|menu"], usually with one level) we use an
\[active descendant]\(https\://www\.w3.org/TR/wai-aria-practices-1.1/#kbd\_focus\_activedescendant).
For \[role=toolbar], we use a \[roving tabindex]\(https\://www\.w3.org/TR/wai-aria-practices-1.1/#kbd\_roving\_tabindex)
Other examples:
- \[role="menubar"]\(https\://www\.w3.org/TR/wai-aria-practices-1.1/examples/menubar/menubar-1/menubar-1.html)
- \[role="tree"]\(https\://www\.w3.org/TR/wai-aria-practices-1.1/examples/treeview/treeview-1/treeview-1b.html)
For disclosure menus, we need keyboard navigation, but treat every list item
(more precisely its anchor child) as a tab stop. | LionMenu |
|
|
124
|
+
| `_childrenRoles` | protected | `InteractiveListItemRole[]` | | The roles to look for when children are registered to listItems | LionMenu |
|
|
125
|
+
| `_contentNode` | protected | | | | LionMenu |
|
|
126
|
+
| `_hasSmartChildren` | protected | `boolean` | `false` | When children are 'smart' (like LionOption), checked and active states will be set
to them and they are responsible for setting \[aria-selected].
When false, \`get listItems()\` needs to be configured to point to the list items. | LionMenu |
|
|
127
|
+
| `_hasSmartListItems` | public | | | | LionMenu |
|
|
128
|
+
| `_interactiveChildrenRoles` | protected | | | | LionMenu |
|
|
129
|
+
| `_invokerNode` | protected | | | | LionMenu |
|
|
130
|
+
| `_listItemsSlot` | protected | `HTMLSlotElement` | | Place in the template that contains children with .\_childrenRoles | LionMenu |
|
|
131
|
+
| `_listNode` | protected | `HTMLElement` | | This is the (usually focusable, unless combobox) element that will contain \[aria-activedescendant]
Depending on the children, role will be "listbox\|menu\|menubar\|tree\|toolbar" | LionMenu |
|
|
132
|
+
| `_listRole` | protected | `'menu'\|'menubar'\|'listbox'\|'tree'\|'toolbar'` | `'menu'` | The role that will be put on \_listNode | LionMenu |
|
|
133
|
+
| `_onOverlayShow` | protected | | | | OverlayWithListInvokerMixin |
|
|
134
|
+
| `_onPopState` | protected | | | | LionMenu |
|
|
135
|
+
| `_overlayBackdropNode` | protected | | | | OverlayMixin |
|
|
136
|
+
| `_overlayContentNode` | protected | | | make sure OverlayMixin gets the contentNode defined by DisclosureMixin | OverlayMixin |
|
|
137
|
+
| `_overlayContentWrapperNode` | protected | | | | OverlayMixin |
|
|
138
|
+
| `_overlayInvokerNode` | protected | | | make sure OverlayMixin gets the invokerNode defined by DisclosureMixin | OverlayMixin |
|
|
139
|
+
| `_overlayReferenceNode` | protected | | | | OverlayMixin |
|
|
140
|
+
| `_scrollTargetNode` | protected | | | | LionMenu |
|
|
141
|
+
| `_shouldSetupOverlay` | protected | `boolean` | `false` | | |
|
|
142
|
+
| `_subListMap` | protected | `Map<HTMLElement\|LionItem,InteractiveList>` | `new Map()` | | LionMenu |
|
|
141
143
|
|
|
142
144
|
### Methods
|
|
143
145
|
|
|
@@ -199,49 +201,50 @@ eleventyNavigation:
|
|
|
199
201
|
|
|
200
202
|
### Fields
|
|
201
203
|
|
|
202
|
-
| Name | Privacy | Type | Default | Description
|
|
203
|
-
| ---------------------------- | --------- | ---------------------------------------------------------------------- | -------------------- |
|
|
204
|
-
| `activeIndex` | public | | |
|
|
205
|
-
| `activeItem` | public | | |
|
|
206
|
-
| `bar` | public | `boolean` | `false` | Enable bar to use \[role="menubar"] and horizontal navigation
|
|
207
|
-
| `behaveAsAccordion` | public | `boolean` | `false` | When true, will have a maximum of one submenu open at a time
|
|
208
|
-
| `checkedIndex` | public | `number \| number[]` | |
|
|
209
|
-
| `config` | public | `Partial<OverlayConfig>` | `{}` | Configure the many options of the \`OverlayController\`
|
|
210
|
-
| `handleFocus` | public | `boolean` | `true` |
|
|
211
|
-
| `invokerInteraction` | public | `string` | `'click'` |
|
|
212
|
-
| `invokerNode` | public | `HTMLElement` | `undefined` | When an invokerNode is supplied (usually by a parent level menu), it will take precedence
over \[slot=invoker] and previousElementSibling with \[data-invoker] attribute
|
|
213
|
-
| `isInteractiveList` | public | | | Since we cannot check instanceof with mixins, use this getter instead.
This way, the outside world can confirm the type of an element
|
|
214
|
-
| `itemWrap` | public | `boolean` | |
|
|
215
|
-
| `level` | public | `number` | `1` | The level of nested menus. Will be reflected as attribute for styling purposes
|
|
216
|
-
| `listItems` | public | `HTMLElement[]` | | When used with FormRegistrarMixin, children will register themselves. Otherwise,
\_\_listItems are gathered via a slotchange listener
|
|
217
|
-
| `multipleChoice` | public | `boolean` | `false` |
|
|
218
|
-
| `noPreselect` | public | `boolean` | `false` | By default, checkedIndex is set to 0. When noPreselect is true,
checkedIndex will not be set
|
|
219
|
-
| `opened` | public | `boolean` | `false` | If you add the opened attribute a dialog will be opened on page load. The invoker can be left out
in case the user does not need to be able to reopen the dialog.
|
|
220
|
-
| `orientation` | public | `string` | `'vertical'` |
|
|
221
|
-
| `parentList` | public | `InteractiveList` | `undefined` | The parent list if level > 1
|
|
222
|
-
| `rotateKeyboardNavigation` | public | `boolean` | `false` |
|
|
223
|
-
| `selectionFollowsFocus` | public | `boolean` | `false` |
|
|
224
|
-
| `slots` | public | | |
|
|
225
|
-
| `_activateOnCharTimeout` | protected | `number` | `2000` | The pending char sequence that will set active list item
|
|
226
|
-
| `_activateOnTypedChars` | public | `boolean` | `false` | By default, a typed character (or a sequence thereof) will be matched against
the values of list items. The first and closest match, becomes active
(focused or activedescendant depending on \_matchMode)
|
|
227
|
-
| `_activeMode` | public | `'activedescendant'\|'roving-tabindex'\|'tabbable-disclosure'\|'none'` | `'activedescendant'` | Whenever possible (for \[role="listbox\|menu"], usually with one level) we use an
\[active descendant]\(https\://www\.w3.org/TR/wai-aria-practices-1.1/#kbd\_focus\_activedescendant).
For \[role=toolbar], we use a \[roving tabindex]\(https\://www\.w3.org/TR/wai-aria-practices-1.1/#kbd\_roving\_tabindex)
Other examples:
- \[role="menubar"]\(https\://www\.w3.org/TR/wai-aria-practices-1.1/examples/menubar/menubar-1/menubar-1.html)
- \[role="tree"]\(https\://www\.w3.org/TR/wai-aria-practices-1.1/examples/treeview/treeview-1/treeview-1b.html)
For disclosure menus, we need keyboard navigation, but treat every list item
(more precisely its anchor child) as a tab stop.
|
|
228
|
-
| `_childrenRoles` | protected | `InteractiveListItemRole[]` | | The roles to look for when children are registered to listItems
|
|
229
|
-
| `_contentNode` | protected | | |
|
|
230
|
-
| `_hasSmartChildren` | protected | `boolean` | `false` | When children are 'smart' (like LionOption), checked and active states will be set
to them and they are responsible for setting \[aria-selected].
When false, \`get listItems()\` needs to be configured to point to the list items.
|
|
231
|
-
| `_hasSmartListItems` | public | | |
|
|
232
|
-
| `_interactiveChildrenRoles` | protected | | |
|
|
233
|
-
| `_invokerNode` | protected | | |
|
|
234
|
-
| `_listItemsSlot` | protected | `HTMLSlotElement` | | Place in the template that contains children with .\_childrenRoles
|
|
235
|
-
| `_listNode` | protected | `HTMLElement` | | This is the (usually focusable, unless combobox) element that will contain \[aria-activedescendant]
Depending on the children, role will be "listbox\|menu\|menubar\|tree\|toolbar"
|
|
236
|
-
| `_listRole` | protected | `'menu'\|'menubar'\|'listbox'\|'tree'\|'toolbar'` | `'menu'` | The role that will be put on \_listNode
|
|
237
|
-
| `_onOverlayShow` | protected | | |
|
|
238
|
-
| `
|
|
239
|
-
| `
|
|
240
|
-
| `
|
|
241
|
-
| `
|
|
242
|
-
| `
|
|
243
|
-
| `
|
|
244
|
-
| `
|
|
204
|
+
| Name | Privacy | Type | Default | Description | Inherited From |
|
|
205
|
+
| ---------------------------- | --------- | ---------------------------------------------------------------------- | -------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | --------------------------- |
|
|
206
|
+
| `activeIndex` | public | | | | LionMenu |
|
|
207
|
+
| `activeItem` | public | | | | LionMenu |
|
|
208
|
+
| `bar` | public | `boolean` | `false` | Enable bar to use \[role="menubar"] and horizontal navigation | LionMenu |
|
|
209
|
+
| `behaveAsAccordion` | public | `boolean` | `false` | When true, will have a maximum of one submenu open at a time | LionMenu |
|
|
210
|
+
| `checkedIndex` | public | `number \| number[]` | | | LionMenu |
|
|
211
|
+
| `config` | public | `Partial<OverlayConfig>` | `{}` | Configure the many options of the \`OverlayController\` | OverlayMixin |
|
|
212
|
+
| `handleFocus` | public | `boolean` | `true` | | LionMenu |
|
|
213
|
+
| `invokerInteraction` | public | `string` | `'click'` | | LionMenu |
|
|
214
|
+
| `invokerNode` | public | `HTMLElement` | `undefined` | When an invokerNode is supplied (usually by a parent level menu), it will take precedence
over \[slot=invoker] and previousElementSibling with \[data-invoker] attribute | LionMenu |
|
|
215
|
+
| `isInteractiveList` | public | | | Since we cannot check instanceof with mixins, use this getter instead.
This way, the outside world can confirm the type of an element | LionMenu |
|
|
216
|
+
| `itemWrap` | public | `boolean` | | | LionMenu |
|
|
217
|
+
| `level` | public | `number` | `1` | The level of nested menus. Will be reflected as attribute for styling purposes | LionMenu |
|
|
218
|
+
| `listItems` | public | `HTMLElement[]` | | When used with FormRegistrarMixin, children will register themselves. Otherwise,
\_\_listItems are gathered via a slotchange listener | LionMenu |
|
|
219
|
+
| `multipleChoice` | public | `boolean` | `false` | | LionMenu |
|
|
220
|
+
| `noPreselect` | public | `boolean` | `false` | By default, checkedIndex is set to 0. When noPreselect is true,
checkedIndex will not be set | LionMenu |
|
|
221
|
+
| `opened` | public | `boolean` | `false` | If you add the opened attribute a dialog will be opened on page load. The invoker can be left out
in case the user does not need to be able to reopen the dialog. | OverlayMixin |
|
|
222
|
+
| `orientation` | public | `string` | `'vertical'` | | LionMenu |
|
|
223
|
+
| `parentList` | public | `InteractiveList` | `undefined` | The parent list if level > 1 | LionMenu |
|
|
224
|
+
| `rotateKeyboardNavigation` | public | `boolean` | `false` | | LionMenu |
|
|
225
|
+
| `selectionFollowsFocus` | public | `boolean` | `false` | | LionMenu |
|
|
226
|
+
| `slots` | public | | | | LionMenu |
|
|
227
|
+
| `_activateOnCharTimeout` | protected | `number` | `2000` | The pending char sequence that will set active list item | LionMenu |
|
|
228
|
+
| `_activateOnTypedChars` | public | `boolean` | `false` | By default, a typed character (or a sequence thereof) will be matched against
the values of list items. The first and closest match, becomes active
(focused or activedescendant depending on \_matchMode) | LionMenu |
|
|
229
|
+
| `_activeMode` | public | `'activedescendant'\|'roving-tabindex'\|'tabbable-disclosure'\|'none'` | `'activedescendant'` | Whenever possible (for \[role="listbox\|menu"], usually with one level) we use an
\[active descendant]\(https\://www\.w3.org/TR/wai-aria-practices-1.1/#kbd\_focus\_activedescendant).
For \[role=toolbar], we use a \[roving tabindex]\(https\://www\.w3.org/TR/wai-aria-practices-1.1/#kbd\_roving\_tabindex)
Other examples:
- \[role="menubar"]\(https\://www\.w3.org/TR/wai-aria-practices-1.1/examples/menubar/menubar-1/menubar-1.html)
- \[role="tree"]\(https\://www\.w3.org/TR/wai-aria-practices-1.1/examples/treeview/treeview-1/treeview-1b.html)
For disclosure menus, we need keyboard navigation, but treat every list item
(more precisely its anchor child) as a tab stop. | LionMenu |
|
|
230
|
+
| `_childrenRoles` | protected | `InteractiveListItemRole[]` | | The roles to look for when children are registered to listItems | LionMenu |
|
|
231
|
+
| `_contentNode` | protected | | | | LionMenu |
|
|
232
|
+
| `_hasSmartChildren` | protected | `boolean` | `false` | When children are 'smart' (like LionOption), checked and active states will be set
to them and they are responsible for setting \[aria-selected].
When false, \`get listItems()\` needs to be configured to point to the list items. | LionMenu |
|
|
233
|
+
| `_hasSmartListItems` | public | | | | LionMenu |
|
|
234
|
+
| `_interactiveChildrenRoles` | protected | | | | LionMenu |
|
|
235
|
+
| `_invokerNode` | protected | | | | LionMenu |
|
|
236
|
+
| `_listItemsSlot` | protected | `HTMLSlotElement` | | Place in the template that contains children with .\_childrenRoles | LionMenu |
|
|
237
|
+
| `_listNode` | protected | `HTMLElement` | | This is the (usually focusable, unless combobox) element that will contain \[aria-activedescendant]
Depending on the children, role will be "listbox\|menu\|menubar\|tree\|toolbar" | LionMenu |
|
|
238
|
+
| `_listRole` | protected | `'menu'\|'menubar'\|'listbox'\|'tree'\|'toolbar'` | `'menu'` | The role that will be put on \_listNode | LionMenu |
|
|
239
|
+
| `_onOverlayShow` | protected | | | | OverlayWithListInvokerMixin |
|
|
240
|
+
| `_onPopState` | protected | | | | LionMenu |
|
|
241
|
+
| `_overlayBackdropNode` | protected | | | | OverlayMixin |
|
|
242
|
+
| `_overlayContentNode` | protected | | | make sure OverlayMixin gets the contentNode defined by DisclosureMixin | OverlayMixin |
|
|
243
|
+
| `_overlayContentWrapperNode` | protected | | | | OverlayMixin |
|
|
244
|
+
| `_overlayInvokerNode` | protected | | | make sure OverlayMixin gets the invokerNode defined by DisclosureMixin | OverlayMixin |
|
|
245
|
+
| `_overlayReferenceNode` | protected | | | | OverlayMixin |
|
|
246
|
+
| `_scrollTargetNode` | protected | | | | LionMenu |
|
|
247
|
+
| `_subListMap` | protected | `Map<HTMLElement\|LionItem,InteractiveList>` | `new Map()` | | LionMenu |
|
|
245
248
|
|
|
246
249
|
### Methods
|
|
247
250
|
|
|
@@ -302,41 +305,42 @@ eleventyNavigation:
|
|
|
302
305
|
|
|
303
306
|
### Fields
|
|
304
307
|
|
|
305
|
-
| Name | Privacy | Type | Default | Description
|
|
306
|
-
| --------------------------- | --------- | ---------------------------------------------------------------------- | ------------------- |
|
|
307
|
-
| `activeIndex` | public | | |
|
|
308
|
-
| `activeItem` | public | | |
|
|
309
|
-
| `bar` | public | `boolean` | `true` | Enable bar to use \[role="menubar"] and horizontal navigation
|
|
310
|
-
| `behaveAsAccordion` | public | `boolean` | `false` | When true, will have a maximum of one submenu open at a time
|
|
311
|
-
| `checkedIndex` | public | `number \| number[]` | |
|
|
312
|
-
| `handleFocus` | public | `boolean` | `true` |
|
|
313
|
-
| `invokerInteraction` | public | `string` | `'click'` |
|
|
314
|
-
| `invokerNode` | public | `HTMLElement` | `undefined` | When an invokerNode is supplied (usually by a parent level menu), it will take precedence
over \[slot=invoker] and previousElementSibling with \[data-invoker] attribute
|
|
315
|
-
| `isInteractiveList` | public | | | Since we cannot check instanceof with mixins, use this getter instead.
This way, the outside world can confirm the type of an element
|
|
316
|
-
| `itemWrap` | public | `boolean` | |
|
|
317
|
-
| `level` | public | `number` | `1` | The level of nested menus. Will be reflected as attribute for styling purposes
|
|
318
|
-
| `listItems` | public | `HTMLElement[]` | | When used with FormRegistrarMixin, children will register themselves. Otherwise,
\_\_listItems are gathered via a slotchange listener
|
|
319
|
-
| `multipleChoice` | public | `boolean` | `false` |
|
|
320
|
-
| `noPreselect` | public | `boolean` | `true` | By default, checkedIndex is set to 0. When noPreselect is true,
checkedIndex will not be set
|
|
321
|
-
| `orientation` | public | `string` | `'vertical'` |
|
|
322
|
-
| `parentList` | public | `InteractiveList` | `undefined` | The parent list if level > 1
|
|
323
|
-
| `rotateKeyboardNavigation` | public | `boolean` | `false` |
|
|
324
|
-
| `selectionFollowsFocus` | public | `boolean` | `false` |
|
|
325
|
-
| `slots` | public | | |
|
|
326
|
-
| `_activateOnCharTimeout` | protected | `number` | `2000` | The pending char sequence that will set active list item
|
|
327
|
-
| `_activateOnTypedChars` | public | `boolean` | `false` | By default, a typed character (or a sequence thereof) will be matched against
the values of list items. The first and closest match, becomes active
(focused or activedescendant depending on \_matchMode)
|
|
328
|
-
| `_activeMode` | public | `'activedescendant'\|'roving-tabindex'\|'tabbable-disclosure'\|'none'` | `'roving-tabindex'` | Whenever possible (for \[role="listbox\|menu"], usually with one level) we use an
\[active descendant]\(https\://www\.w3.org/TR/wai-aria-practices-1.1/#kbd\_focus\_activedescendant).
For \[role=toolbar], we use a \[roving tabindex]\(https\://www\.w3.org/TR/wai-aria-practices-1.1/#kbd\_roving\_tabindex)
Other examples:
- \[role="menubar"]\(https\://www\.w3.org/TR/wai-aria-practices-1.1/examples/menubar/menubar-1/menubar-1.html)
- \[role="tree"]\(https\://www\.w3.org/TR/wai-aria-practices-1.1/examples/treeview/treeview-1/treeview-1b.html)
For disclosure menus, we need keyboard navigation, but treat every list item
(more precisely its anchor child) as a tab stop.
|
|
329
|
-
| `_childrenRoles` | protected | `InteractiveListItemRole[]` | | The roles to look for when children are registered to listItems
|
|
330
|
-
| `_contentNode` | protected | | |
|
|
331
|
-
| `_hasSmartChildren` | protected | `boolean` | `false` | When children are 'smart' (like LionOption), checked and active states will be set
to them and they are responsible for setting \[aria-selected].
When false, \`get listItems()\` needs to be configured to point to the list items.
|
|
332
|
-
| `_hasSmartListItems` | public | | |
|
|
333
|
-
| `_interactiveChildrenRoles` | protected | | |
|
|
334
|
-
| `_invokerNode` | protected | | |
|
|
335
|
-
| `_listItemsSlot` | protected | `HTMLSlotElement` | | Place in the template that contains children with .\_childrenRoles
|
|
336
|
-
| `_listNode` | protected | `HTMLElement` | | This is the (usually focusable, unless combobox) element that will contain \[aria-activedescendant]
Depending on the children, role will be "listbox\|menu\|menubar\|tree\|toolbar"
|
|
337
|
-
| `_listRole` | protected | `'menu'\|'menubar'\|'listbox'\|'tree'\|'toolbar'` | `'toolbar'` | The role that will be put on \_listNode
|
|
338
|
-
| `
|
|
339
|
-
| `
|
|
308
|
+
| Name | Privacy | Type | Default | Description | Inherited From |
|
|
309
|
+
| --------------------------- | --------- | ---------------------------------------------------------------------- | ------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | -------------- |
|
|
310
|
+
| `activeIndex` | public | | | | LionMenu |
|
|
311
|
+
| `activeItem` | public | | | | LionMenu |
|
|
312
|
+
| `bar` | public | `boolean` | `true` | Enable bar to use \[role="menubar"] and horizontal navigation | LionMenu |
|
|
313
|
+
| `behaveAsAccordion` | public | `boolean` | `false` | When true, will have a maximum of one submenu open at a time | LionMenu |
|
|
314
|
+
| `checkedIndex` | public | `number \| number[]` | | | LionMenu |
|
|
315
|
+
| `handleFocus` | public | `boolean` | `true` | | LionMenu |
|
|
316
|
+
| `invokerInteraction` | public | `string` | `'click'` | | LionMenu |
|
|
317
|
+
| `invokerNode` | public | `HTMLElement` | `undefined` | When an invokerNode is supplied (usually by a parent level menu), it will take precedence
over \[slot=invoker] and previousElementSibling with \[data-invoker] attribute | LionMenu |
|
|
318
|
+
| `isInteractiveList` | public | | | Since we cannot check instanceof with mixins, use this getter instead.
This way, the outside world can confirm the type of an element | LionMenu |
|
|
319
|
+
| `itemWrap` | public | `boolean` | | | LionMenu |
|
|
320
|
+
| `level` | public | `number` | `1` | The level of nested menus. Will be reflected as attribute for styling purposes | LionMenu |
|
|
321
|
+
| `listItems` | public | `HTMLElement[]` | | When used with FormRegistrarMixin, children will register themselves. Otherwise,
\_\_listItems are gathered via a slotchange listener | LionMenu |
|
|
322
|
+
| `multipleChoice` | public | `boolean` | `false` | | LionMenu |
|
|
323
|
+
| `noPreselect` | public | `boolean` | `true` | By default, checkedIndex is set to 0. When noPreselect is true,
checkedIndex will not be set | LionMenu |
|
|
324
|
+
| `orientation` | public | `string` | `'vertical'` | | LionMenu |
|
|
325
|
+
| `parentList` | public | `InteractiveList` | `undefined` | The parent list if level > 1 | LionMenu |
|
|
326
|
+
| `rotateKeyboardNavigation` | public | `boolean` | `false` | | LionMenu |
|
|
327
|
+
| `selectionFollowsFocus` | public | `boolean` | `false` | | LionMenu |
|
|
328
|
+
| `slots` | public | | | | LionMenu |
|
|
329
|
+
| `_activateOnCharTimeout` | protected | `number` | `2000` | The pending char sequence that will set active list item | LionMenu |
|
|
330
|
+
| `_activateOnTypedChars` | public | `boolean` | `false` | By default, a typed character (or a sequence thereof) will be matched against
the values of list items. The first and closest match, becomes active
(focused or activedescendant depending on \_matchMode) | LionMenu |
|
|
331
|
+
| `_activeMode` | public | `'activedescendant'\|'roving-tabindex'\|'tabbable-disclosure'\|'none'` | `'roving-tabindex'` | Whenever possible (for \[role="listbox\|menu"], usually with one level) we use an
\[active descendant]\(https\://www\.w3.org/TR/wai-aria-practices-1.1/#kbd\_focus\_activedescendant).
For \[role=toolbar], we use a \[roving tabindex]\(https\://www\.w3.org/TR/wai-aria-practices-1.1/#kbd\_roving\_tabindex)
Other examples:
- \[role="menubar"]\(https\://www\.w3.org/TR/wai-aria-practices-1.1/examples/menubar/menubar-1/menubar-1.html)
- \[role="tree"]\(https\://www\.w3.org/TR/wai-aria-practices-1.1/examples/treeview/treeview-1/treeview-1b.html)
For disclosure menus, we need keyboard navigation, but treat every list item
(more precisely its anchor child) as a tab stop. | LionMenu |
|
|
332
|
+
| `_childrenRoles` | protected | `InteractiveListItemRole[]` | | The roles to look for when children are registered to listItems | LionMenu |
|
|
333
|
+
| `_contentNode` | protected | | | | LionMenu |
|
|
334
|
+
| `_hasSmartChildren` | protected | `boolean` | `false` | When children are 'smart' (like LionOption), checked and active states will be set
to them and they are responsible for setting \[aria-selected].
When false, \`get listItems()\` needs to be configured to point to the list items. | LionMenu |
|
|
335
|
+
| `_hasSmartListItems` | public | | | | LionMenu |
|
|
336
|
+
| `_interactiveChildrenRoles` | protected | | | | LionMenu |
|
|
337
|
+
| `_invokerNode` | protected | | | | LionMenu |
|
|
338
|
+
| `_listItemsSlot` | protected | `HTMLSlotElement` | | Place in the template that contains children with .\_childrenRoles | LionMenu |
|
|
339
|
+
| `_listNode` | protected | `HTMLElement` | | This is the (usually focusable, unless combobox) element that will contain \[aria-activedescendant]
Depending on the children, role will be "listbox\|menu\|menubar\|tree\|toolbar" | LionMenu |
|
|
340
|
+
| `_listRole` | protected | `'menu'\|'menubar'\|'listbox'\|'tree'\|'toolbar'` | `'toolbar'` | The role that will be put on \_listNode | LionMenu |
|
|
341
|
+
| `_onPopState` | protected | | | | LionMenu |
|
|
342
|
+
| `_scrollTargetNode` | protected | | | | LionMenu |
|
|
343
|
+
| `_subListMap` | protected | `Map<HTMLElement\|LionItem,InteractiveList>` | `new Map()` | | LionMenu |
|
|
340
344
|
|
|
341
345
|
### Methods
|
|
342
346
|
|
|
@@ -379,40 +383,41 @@ eleventyNavigation:
|
|
|
379
383
|
|
|
380
384
|
### Fields
|
|
381
385
|
|
|
382
|
-
| Name | Privacy | Type | Default | Description
|
|
383
|
-
| --------------------------- | --------- | ---------------------------------------------------------------------- | ------------------- |
|
|
384
|
-
| `activeIndex` | public | | |
|
|
385
|
-
| `activeItem` | public | | |
|
|
386
|
-
| `behaveAsAccordion` | public | `boolean` | `false` | When true, will have a maximum of one submenu open at a time
|
|
387
|
-
| `checkedIndex` | public | `number \| number[]` | |
|
|
388
|
-
| `handleFocus` | public | `boolean` | `true` |
|
|
389
|
-
| `invokerInteraction` | public | `string` | `'click'` |
|
|
390
|
-
| `invokerNode` | public | `HTMLElement` | `undefined` | When an invokerNode is supplied (usually by a parent level menu), it will take precedence
over \[slot=invoker] and previousElementSibling with \[data-invoker] attribute
|
|
391
|
-
| `isInteractiveList` | public | | | Since we cannot check instanceof with mixins, use this getter instead.
This way, the outside world can confirm the type of an element
|
|
392
|
-
| `itemWrap` | public | `boolean` | |
|
|
393
|
-
| `level` | public | `number` | `1` | The level of nested menus. Will be reflected as attribute for styling purposes
|
|
394
|
-
| `listItems` | public | `HTMLElement[]` | | When used with FormRegistrarMixin, children will register themselves. Otherwise,
\_\_listItems are gathered via a slotchange listener
|
|
395
|
-
| `multipleChoice` | public | `boolean` | `false` |
|
|
396
|
-
| `noPreselect` | public | `boolean` | `true` | By default, checkedIndex is set to 0. When noPreselect is true,
checkedIndex will not be set
|
|
397
|
-
| `orientation` | public | `string` | `'vertical'` |
|
|
398
|
-
| `parentList` | public | `InteractiveList` | `undefined` | The parent list if level > 1
|
|
399
|
-
| `rotateKeyboardNavigation` | public | `boolean` | `false` |
|
|
400
|
-
| `selectionFollowsFocus` | public | `boolean` | `false` |
|
|
401
|
-
| `slots` | public | | |
|
|
402
|
-
| `_activateOnCharTimeout` | protected | `number` | `2000` | The pending char sequence that will set active list item
|
|
403
|
-
| `_activateOnTypedChars` | public | `boolean` | `true` | By default, a typed character (or a sequence thereof) will be matched against
the values of list items. The first and closest match, becomes active
(focused or activedescendant depending on \_matchMode)
|
|
404
|
-
| `_activeMode` | public | `'activedescendant'\|'roving-tabindex'\|'tabbable-disclosure'\|'none'` | `'roving-tabindex'` | Whenever possible (for \[role="listbox\|menu"], usually with one level) we use an
\[active descendant]\(https\://www\.w3.org/TR/wai-aria-practices-1.1/#kbd\_focus\_activedescendant).
For \[role=toolbar], we use a \[roving tabindex]\(https\://www\.w3.org/TR/wai-aria-practices-1.1/#kbd\_roving\_tabindex)
Other examples:
- \[role="menubar"]\(https\://www\.w3.org/TR/wai-aria-practices-1.1/examples/menubar/menubar-1/menubar-1.html)
- \[role="tree"]\(https\://www\.w3.org/TR/wai-aria-practices-1.1/examples/treeview/treeview-1/treeview-1b.html)
For disclosure menus, we need keyboard navigation, but treat every list item
(more precisely its anchor child) as a tab stop.
|
|
405
|
-
| `_childrenRoles` | protected | `InteractiveListItemRole[]` | | The roles to look for when children are registered to listItems
|
|
406
|
-
| `_contentNode` | protected | | |
|
|
407
|
-
| `_hasSmartChildren` | protected | `boolean` | `false` | When children are 'smart' (like LionOption), checked and active states will be set
to them and they are responsible for setting \[aria-selected].
When false, \`get listItems()\` needs to be configured to point to the list items.
|
|
408
|
-
| `_hasSmartListItems` | public | | |
|
|
409
|
-
| `_interactiveChildrenRoles` | protected | | |
|
|
410
|
-
| `_invokerNode` | protected | | |
|
|
411
|
-
| `_listItemsSlot` | protected | `HTMLSlotElement` | | Place in the template that contains children with .\_childrenRoles
|
|
412
|
-
| `_listNode` | protected | `HTMLElement` | | This is the (usually focusable, unless combobox) element that will contain \[aria-activedescendant]
Depending on the children, role will be "listbox\|menu\|menubar\|tree\|toolbar"
|
|
413
|
-
| `_listRole` | protected | `'menu'\|'menubar'\|'listbox'\|'tree'\|'toolbar'` | `'tree'` | The role that will be put on \_listNode
|
|
414
|
-
| `
|
|
415
|
-
| `
|
|
386
|
+
| Name | Privacy | Type | Default | Description | Inherited From |
|
|
387
|
+
| --------------------------- | --------- | ---------------------------------------------------------------------- | ------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | -------------------- |
|
|
388
|
+
| `activeIndex` | public | | | | InteractiveListMixin |
|
|
389
|
+
| `activeItem` | public | | | | InteractiveListMixin |
|
|
390
|
+
| `behaveAsAccordion` | public | `boolean` | `false` | When true, will have a maximum of one submenu open at a time | MultiLevelListMixin |
|
|
391
|
+
| `checkedIndex` | public | `number \| number[]` | | | InteractiveListMixin |
|
|
392
|
+
| `handleFocus` | public | `boolean` | `true` | | MultiLevelListMixin |
|
|
393
|
+
| `invokerInteraction` | public | `string` | `'click'` | | |
|
|
394
|
+
| `invokerNode` | public | `HTMLElement` | `undefined` | When an invokerNode is supplied (usually by a parent level menu), it will take precedence
over \[slot=invoker] and previousElementSibling with \[data-invoker] attribute | MultiLevelListMixin |
|
|
395
|
+
| `isInteractiveList` | public | | | Since we cannot check instanceof with mixins, use this getter instead.
This way, the outside world can confirm the type of an element | InteractiveListMixin |
|
|
396
|
+
| `itemWrap` | public | `boolean` | | | InteractiveListMixin |
|
|
397
|
+
| `level` | public | `number` | `1` | The level of nested menus. Will be reflected as attribute for styling purposes | MultiLevelListMixin |
|
|
398
|
+
| `listItems` | public | `HTMLElement[]` | | When used with FormRegistrarMixin, children will register themselves. Otherwise,
\_\_listItems are gathered via a slotchange listener | InteractiveListMixin |
|
|
399
|
+
| `multipleChoice` | public | `boolean` | `false` | | InteractiveListMixin |
|
|
400
|
+
| `noPreselect` | public | `boolean` | `true` | By default, checkedIndex is set to 0. When noPreselect is true,
checkedIndex will not be set | InteractiveListMixin |
|
|
401
|
+
| `orientation` | public | `string` | `'vertical'` | | InteractiveListMixin |
|
|
402
|
+
| `parentList` | public | `InteractiveList` | `undefined` | The parent list if level > 1 | MultiLevelListMixin |
|
|
403
|
+
| `rotateKeyboardNavigation` | public | `boolean` | `false` | | InteractiveListMixin |
|
|
404
|
+
| `selectionFollowsFocus` | public | `boolean` | `false` | | InteractiveListMixin |
|
|
405
|
+
| `slots` | public | | | | InteractiveListMixin |
|
|
406
|
+
| `_activateOnCharTimeout` | protected | `number` | `2000` | The pending char sequence that will set active list item | InteractiveListMixin |
|
|
407
|
+
| `_activateOnTypedChars` | public | `boolean` | `true` | By default, a typed character (or a sequence thereof) will be matched against
the values of list items. The first and closest match, becomes active
(focused or activedescendant depending on \_matchMode) | InteractiveListMixin |
|
|
408
|
+
| `_activeMode` | public | `'activedescendant'\|'roving-tabindex'\|'tabbable-disclosure'\|'none'` | `'roving-tabindex'` | Whenever possible (for \[role="listbox\|menu"], usually with one level) we use an
\[active descendant]\(https\://www\.w3.org/TR/wai-aria-practices-1.1/#kbd\_focus\_activedescendant).
For \[role=toolbar], we use a \[roving tabindex]\(https\://www\.w3.org/TR/wai-aria-practices-1.1/#kbd\_roving\_tabindex)
Other examples:
- \[role="menubar"]\(https\://www\.w3.org/TR/wai-aria-practices-1.1/examples/menubar/menubar-1/menubar-1.html)
- \[role="tree"]\(https\://www\.w3.org/TR/wai-aria-practices-1.1/examples/treeview/treeview-1/treeview-1b.html)
For disclosure menus, we need keyboard navigation, but treat every list item
(more precisely its anchor child) as a tab stop. | InteractiveListMixin |
|
|
409
|
+
| `_childrenRoles` | protected | `InteractiveListItemRole[]` | | The roles to look for when children are registered to listItems | InteractiveListMixin |
|
|
410
|
+
| `_contentNode` | protected | | | | MultiLevelListMixin |
|
|
411
|
+
| `_hasSmartChildren` | protected | `boolean` | `false` | When children are 'smart' (like LionOption), checked and active states will be set
to them and they are responsible for setting \[aria-selected].
When false, \`get listItems()\` needs to be configured to point to the list items. | InteractiveListMixin |
|
|
412
|
+
| `_hasSmartListItems` | public | | | | InteractiveListMixin |
|
|
413
|
+
| `_interactiveChildrenRoles` | protected | | | | InteractiveListMixin |
|
|
414
|
+
| `_invokerNode` | protected | | | | MultiLevelListMixin |
|
|
415
|
+
| `_listItemsSlot` | protected | `HTMLSlotElement` | | Place in the template that contains children with .\_childrenRoles | InteractiveListMixin |
|
|
416
|
+
| `_listNode` | protected | `HTMLElement` | | This is the (usually focusable, unless combobox) element that will contain \[aria-activedescendant]
Depending on the children, role will be "listbox\|menu\|menubar\|tree\|toolbar" | InteractiveListMixin |
|
|
417
|
+
| `_listRole` | protected | `'menu'\|'menubar'\|'listbox'\|'tree'\|'toolbar'` | `'tree'` | The role that will be put on \_listNode | InteractiveListMixin |
|
|
418
|
+
| `_onPopState` | protected | | | | InteractiveListMixin |
|
|
419
|
+
| `_scrollTargetNode` | protected | | | | InteractiveListMixin |
|
|
420
|
+
| `_subListMap` | protected | `Map<HTMLElement\|LionItem,InteractiveList>` | `new Map()` | | MultiLevelListMixin |
|
|
416
421
|
|
|
417
422
|
### Methods
|
|
418
423
|
|