@dxc-technology/halstack-react 0.0.0-c293b72 → 0.0.0-c2b6ec9
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/BackgroundColorContext.js +1 -1
- package/HalstackContext.d.ts +2 -5
- package/HalstackContext.js +6 -6
- package/accordion/Accordion.accessibility.test.d.ts +1 -0
- package/accordion/Accordion.accessibility.test.js +4 -4
- package/accordion/Accordion.js +9 -10
- package/accordion/Accordion.stories.tsx +4 -14
- package/accordion/Accordion.test.d.ts +1 -0
- package/accordion/Accordion.test.js +3 -3
- package/accordion-group/AccordionGroup.accessibility.test.d.ts +1 -0
- package/accordion-group/AccordionGroup.accessibility.test.js +11 -17
- package/accordion-group/AccordionGroup.js +1 -1
- package/accordion-group/AccordionGroup.stories.tsx +23 -23
- package/accordion-group/AccordionGroup.test.d.ts +1 -0
- package/accordion-group/AccordionGroup.test.js +5 -9
- package/accordion-group/AccordionGroupAccordion.js +1 -1
- package/action-icon/ActionIcon.accessibility.test.d.ts +1 -0
- package/action-icon/ActionIcon.accessibility.test.js +4 -4
- package/action-icon/ActionIcon.test.d.ts +1 -0
- package/action-icon/ActionIcon.test.js +1 -1
- package/alert/Alert.accessibility.test.d.ts +1 -0
- package/alert/Alert.accessibility.test.js +6 -6
- package/alert/Alert.js +6 -3
- package/alert/Alert.test.d.ts +1 -0
- package/alert/Alert.test.js +1 -1
- package/badge/Badge.accessibility.test.d.ts +1 -0
- package/badge/Badge.accessibility.test.js +5 -5
- package/badge/Badge.test.d.ts +1 -0
- package/badge/Badge.test.js +2 -2
- package/box/Box.accessibility.test.d.ts +1 -0
- package/box/Box.accessibility.test.js +3 -3
- package/box/Box.js +1 -1
- package/box/Box.test.d.ts +1 -0
- package/box/Box.test.js +1 -1
- package/breadcrumbs/Breadcrumbs.accessibility.test.d.ts +1 -0
- package/breadcrumbs/Breadcrumbs.accessibility.test.js +96 -0
- package/breadcrumbs/Breadcrumbs.d.ts +4 -0
- package/breadcrumbs/Breadcrumbs.js +79 -0
- package/breadcrumbs/Breadcrumbs.stories.tsx +194 -0
- package/breadcrumbs/Breadcrumbs.test.d.ts +1 -0
- package/breadcrumbs/Breadcrumbs.test.js +168 -0
- package/breadcrumbs/Item.d.ts +4 -0
- package/breadcrumbs/Item.js +52 -0
- package/breadcrumbs/dropdownTheme.d.ts +53 -0
- package/breadcrumbs/dropdownTheme.js +62 -0
- package/breadcrumbs/types.d.ts +16 -0
- package/breadcrumbs/types.js +5 -0
- package/bulleted-list/BulletedList.accessibility.test.d.ts +1 -0
- package/bulleted-list/BulletedList.accessibility.test.js +18 -6
- package/bulleted-list/BulletedList.js +2 -2
- package/button/Button.accessibility.test.d.ts +1 -0
- package/button/Button.accessibility.test.js +6 -6
- package/button/Button.js +1 -1
- package/button/Button.stories.tsx +3 -3
- package/button/Button.test.d.ts +1 -0
- package/button/Button.test.js +1 -1
- package/card/Card.accessibility.test.d.ts +1 -0
- package/card/Card.accessibility.test.js +3 -3
- package/card/Card.js +3 -2
- package/card/Card.stories.tsx +1 -1
- package/card/Card.test.d.ts +1 -0
- package/card/Card.test.js +1 -1
- package/checkbox/Checkbox.accessibility.test.d.ts +1 -0
- package/checkbox/Checkbox.accessibility.test.js +5 -5
- package/checkbox/Checkbox.js +10 -13
- package/checkbox/Checkbox.test.d.ts +1 -0
- package/checkbox/Checkbox.test.js +1 -1
- package/chip/Chip.accessibility.test.d.ts +1 -0
- package/chip/Chip.accessibility.test.js +4 -4
- package/chip/Chip.js +3 -1
- package/chip/Chip.stories.tsx +1 -1
- package/chip/Chip.test.d.ts +1 -0
- package/chip/Chip.test.js +1 -1
- package/common/coreTokens.js +3 -3
- package/common/variables.d.ts +2 -5
- package/common/variables.js +68 -71
- package/container/Container.stories.tsx +3 -3
- package/contextual-menu/ContextualMenu.accessibility.test.d.ts +1 -0
- package/contextual-menu/ContextualMenu.accessibility.test.js +15 -3
- package/contextual-menu/ContextualMenu.d.ts +3 -5
- package/contextual-menu/ContextualMenu.js +89 -52
- package/contextual-menu/ContextualMenu.stories.tsx +115 -74
- package/contextual-menu/ContextualMenu.test.d.ts +1 -0
- package/contextual-menu/ContextualMenu.test.js +200 -24
- package/contextual-menu/GroupItem.d.ts +4 -0
- package/contextual-menu/GroupItem.js +67 -0
- package/contextual-menu/ItemAction.d.ts +4 -0
- package/contextual-menu/ItemAction.js +50 -0
- package/contextual-menu/MenuItem.d.ts +4 -0
- package/contextual-menu/MenuItem.js +29 -0
- package/contextual-menu/SingleItem.d.ts +4 -0
- package/contextual-menu/SingleItem.js +38 -0
- package/contextual-menu/types.d.ts +50 -11
- package/date-input/Calendar.js +47 -31
- package/date-input/DateInput.accessibility.test.d.ts +1 -0
- package/date-input/DateInput.accessibility.test.js +24 -11
- package/date-input/DateInput.js +27 -21
- package/date-input/DateInput.stories.tsx +18 -12
- package/date-input/DateInput.test.d.ts +1 -0
- package/date-input/DateInput.test.js +39 -39
- package/date-input/DatePicker.js +1 -1
- package/date-input/YearPicker.js +10 -5
- package/dialog/Dialog.accessibility.test.d.ts +1 -0
- package/dialog/Dialog.accessibility.test.js +5 -5
- package/dialog/Dialog.js +9 -20
- package/dialog/Dialog.stories.tsx +8 -4
- package/dialog/Dialog.test.d.ts +1 -0
- package/dialog/Dialog.test.js +111 -48
- package/divider/Divider.accessibility.test.d.ts +1 -0
- package/divider/Divider.accessibility.test.js +2 -2
- package/divider/Divider.test.d.ts +1 -0
- package/dropdown/Dropdown.accessibility.test.d.ts +1 -0
- package/dropdown/Dropdown.accessibility.test.js +12 -9
- package/dropdown/Dropdown.js +16 -15
- package/dropdown/Dropdown.stories.tsx +11 -11
- package/dropdown/Dropdown.test.d.ts +1 -0
- package/dropdown/Dropdown.test.js +101 -72
- package/dropdown/DropdownMenu.js +4 -4
- package/dropdown/DropdownMenuItem.js +2 -1
- package/file-input/FileInput.accessibility.test.d.ts +1 -0
- package/file-input/FileInput.accessibility.test.js +30 -23
- package/file-input/FileInput.js +3 -8
- package/file-input/FileInput.test.d.ts +1 -0
- package/file-input/FileInput.test.js +44 -22
- package/file-input/FileItem.js +6 -2
- package/file-input/types.d.ts +0 -4
- package/footer/Footer.accessibility.test.d.ts +1 -0
- package/footer/Footer.accessibility.test.js +13 -5
- package/footer/Footer.js +1 -1
- package/footer/Footer.stories.tsx +12 -0
- package/footer/Footer.test.d.ts +1 -0
- package/footer/Footer.test.js +1 -1
- package/footer/Icons.js +2 -30
- package/grid/Grid.stories.tsx +3 -1
- package/header/Header.accessibility.test.d.ts +1 -0
- package/header/Header.accessibility.test.js +16 -6
- package/header/Header.js +3 -2
- package/header/Header.stories.tsx +17 -1
- package/header/Header.test.d.ts +1 -0
- package/header/Header.test.js +1 -1
- package/header/Icons.js +1 -6
- package/heading/Heading.accessibility.test.d.ts +1 -0
- package/heading/Heading.accessibility.test.js +3 -3
- package/heading/Heading.js +1 -1
- package/heading/Heading.test.d.ts +1 -0
- package/heading/Heading.test.js +1 -14
- package/icon/Icon.accessibility.test.d.ts +1 -0
- package/icon/Icon.accessibility.test.js +2 -2
- package/icon/Icon.js +1 -1
- package/image/Image.accessibility.test.d.ts +1 -0
- package/image/Image.accessibility.test.js +3 -3
- package/image/Image.js +1 -1
- package/layout/ApplicationLayout.js +9 -6
- package/layout/Icons.d.ts +0 -1
- package/layout/Icons.js +1 -9
- package/link/Link.accessibility.test.d.ts +1 -0
- package/link/Link.accessibility.test.js +8 -12
- package/link/Link.js +1 -1
- package/link/Link.stories.tsx +2 -2
- package/link/Link.test.d.ts +1 -0
- package/link/Link.test.js +1 -1
- package/main.d.ts +2 -1
- package/main.js +8 -1
- package/nav-tabs/NavTabs.accessibility.test.d.ts +1 -0
- package/nav-tabs/NavTabs.accessibility.test.js +3 -3
- package/nav-tabs/NavTabs.js +19 -4
- package/nav-tabs/NavTabs.stories.tsx +18 -3
- package/nav-tabs/NavTabs.test.d.ts +1 -0
- package/nav-tabs/NavTabs.test.js +9 -7
- package/nav-tabs/Tab.js +7 -7
- package/number-input/NumberInput.accessibility.test.d.ts +1 -0
- package/number-input/NumberInput.accessibility.test.js +9 -10
- package/number-input/NumberInput.js +6 -3
- package/number-input/NumberInput.stories.tsx +11 -16
- package/number-input/NumberInput.test.d.ts +1 -0
- package/number-input/NumberInput.test.js +6 -7
- package/package.json +25 -20
- package/paginator/Paginator.accessibility.test.d.ts +1 -0
- package/paginator/Paginator.accessibility.test.js +4 -5
- package/paginator/Paginator.js +13 -10
- package/paginator/Paginator.test.d.ts +1 -0
- package/paginator/Paginator.test.js +2 -3
- package/paragraph/Paragraph.accessibility.test.d.ts +1 -0
- package/paragraph/Paragraph.accessibility.test.js +2 -2
- package/password-input/PasswordInput.accessibility.test.d.ts +1 -0
- package/password-input/PasswordInput.accessibility.test.js +7 -8
- package/password-input/PasswordInput.js +11 -7
- package/password-input/PasswordInput.stories.tsx +10 -1
- package/password-input/PasswordInput.test.d.ts +1 -0
- package/password-input/PasswordInput.test.js +6 -7
- package/progress-bar/ProgressBar.accessibility.test.d.ts +1 -0
- package/progress-bar/ProgressBar.accessibility.test.js +3 -3
- package/progress-bar/ProgressBar.js +6 -4
- package/progress-bar/ProgressBar.test.d.ts +1 -0
- package/progress-bar/ProgressBar.test.js +1 -1
- package/quick-nav/QuickNav.accessibility.test.d.ts +1 -0
- package/quick-nav/QuickNav.accessibility.test.js +2 -2
- package/quick-nav/QuickNav.js +1 -1
- package/radio-group/Radio.js +6 -9
- package/radio-group/RadioGroup.accessibility.test.d.ts +1 -0
- package/radio-group/RadioGroup.accessibility.test.js +4 -4
- package/radio-group/RadioGroup.js +14 -16
- package/radio-group/RadioGroup.test.d.ts +1 -0
- package/radio-group/RadioGroup.test.js +3 -5
- package/resultset-table/ResultsetTable.accessibility.test.d.ts +1 -0
- package/resultset-table/ResultsetTable.accessibility.test.js +16 -6
- package/resultset-table/ResultsetTable.js +3 -2
- package/resultset-table/ResultsetTable.stories.tsx +13 -1
- package/resultset-table/ResultsetTable.test.d.ts +1 -0
- package/resultset-table/ResultsetTable.test.js +2 -4
- package/select/Listbox.js +19 -13
- package/select/Option.js +2 -1
- package/select/Select.accessibility.test.d.ts +1 -0
- package/select/Select.accessibility.test.js +18 -8
- package/select/Select.js +25 -21
- package/select/Select.stories.tsx +36 -15
- package/select/Select.test.d.ts +1 -0
- package/select/Select.test.js +42 -51
- package/sidenav/Sidenav.accessibility.test.d.ts +1 -0
- package/sidenav/Sidenav.accessibility.test.js +3 -3
- package/sidenav/Sidenav.js +1 -1
- package/sidenav/Sidenav.stories.tsx +1 -1
- package/sidenav/Sidenav.test.d.ts +1 -0
- package/sidenav/Sidenav.test.js +1 -1
- package/slider/Slider.accessibility.test.d.ts +1 -0
- package/slider/Slider.accessibility.test.js +5 -6
- package/slider/Slider.js +11 -13
- package/slider/Slider.stories.tsx +180 -0
- package/slider/Slider.test.d.ts +1 -0
- package/slider/Slider.test.js +13 -11
- package/spinner/Spinner.accessibility.test.d.ts +1 -0
- package/spinner/Spinner.accessibility.test.js +6 -6
- package/spinner/Spinner.js +6 -2
- package/spinner/Spinner.test.d.ts +1 -0
- package/spinner/Spinner.test.js +1 -1
- package/status-light/StatusLight.accessibility.test.d.ts +1 -0
- package/status-light/StatusLight.accessibility.test.js +8 -8
- package/status-light/StatusLight.test.d.ts +1 -0
- package/status-light/StatusLight.test.js +1 -1
- package/switch/Switch.accessibility.test.d.ts +1 -0
- package/switch/Switch.accessibility.test.js +14 -5
- package/switch/Switch.js +6 -9
- package/switch/Switch.stories.tsx +12 -0
- package/switch/Switch.test.d.ts +1 -0
- package/switch/Switch.test.js +1 -1
- package/table/Table.accessibility.test.d.ts +1 -0
- package/table/Table.accessibility.test.js +16 -6
- package/table/Table.js +1 -1
- package/table/Table.stories.tsx +13 -1
- package/table/Table.test.d.ts +1 -0
- package/table/Table.test.js +2 -4
- package/tabs/Tab.js +1 -1
- package/tabs/Tabs.accessibility.test.d.ts +1 -0
- package/tabs/Tabs.accessibility.test.js +3 -3
- package/tabs/Tabs.js +1 -1
- package/tabs/Tabs.stories.tsx +7 -1
- package/tabs/Tabs.test.d.ts +1 -0
- package/tabs/Tabs.test.js +1 -1
- package/tag/Tag.accessibility.test.d.ts +1 -0
- package/tag/Tag.accessibility.test.js +4 -4
- package/tag/Tag.js +1 -1
- package/tag/Tag.stories.tsx +1 -1
- package/tag/Tag.test.d.ts +1 -0
- package/tag/Tag.test.js +1 -1
- package/text-input/Suggestion.js +1 -1
- package/text-input/Suggestions.js +14 -6
- package/text-input/TextInput.accessibility.test.d.ts +1 -0
- package/text-input/TextInput.accessibility.test.js +11 -12
- package/text-input/TextInput.js +29 -25
- package/text-input/TextInput.stories.tsx +19 -7
- package/text-input/TextInput.test.d.ts +1 -0
- package/text-input/TextInput.test.js +2 -3
- package/textarea/Textarea.accessibility.test.d.ts +1 -0
- package/textarea/Textarea.accessibility.test.js +7 -7
- package/textarea/Textarea.js +14 -13
- package/textarea/Textarea.test.d.ts +1 -0
- package/textarea/Textarea.test.js +1 -1
- package/toggle-group/ToggleGroup.accessibility.test.d.ts +1 -0
- package/toggle-group/ToggleGroup.accessibility.test.js +5 -5
- package/toggle-group/ToggleGroup.js +6 -9
- package/toggle-group/ToggleGroup.stories.tsx +1 -1
- package/toggle-group/ToggleGroup.test.d.ts +1 -0
- package/toggle-group/ToggleGroup.test.js +1 -1
- package/tooltip/Tooltip.accessibility.test.d.ts +1 -0
- package/tooltip/Tooltip.accessibility.test.js +144 -0
- package/tooltip/Tooltip.d.ts +4 -0
- package/tooltip/Tooltip.js +50 -0
- package/tooltip/Tooltip.stories.tsx +111 -0
- package/tooltip/Tooltip.test.d.ts +1 -0
- package/tooltip/Tooltip.test.js +112 -0
- package/tooltip/types.d.ts +16 -0
- package/tooltip/types.js +5 -0
- package/typography/Typography.accessibility.test.d.ts +1 -0
- package/typography/Typography.accessibility.test.js +12 -12
- package/typography/Typography.stories.tsx +1 -3
- package/useTheme.d.ts +2 -5
- package/utils/BaseTypography.js +1 -1
- package/utils/FocusLock.js +3 -2
- package/wizard/Wizard.accessibility.test.d.ts +1 -0
- package/wizard/Wizard.accessibility.test.js +3 -3
- package/wizard/Wizard.js +1 -9
- package/wizard/Wizard.stories.tsx +1 -1
- package/wizard/Wizard.test.d.ts +1 -0
- package/wizard/Wizard.test.js +1 -1
- package/contextual-menu/MenuItemAction.d.ts +0 -4
- package/contextual-menu/MenuItemAction.js +0 -46
- package/paginator/Icons.d.ts +0 -5
- package/paginator/Icons.js +0 -40
|
@@ -8,7 +8,7 @@ var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/creat
|
|
|
8
8
|
var _react = _interopRequireDefault(require("react"));
|
|
9
9
|
var _react2 = require("@testing-library/react");
|
|
10
10
|
var _userEvent = _interopRequireDefault(require("@testing-library/user-event"));
|
|
11
|
-
var _Dropdown = _interopRequireDefault(require("./Dropdown
|
|
11
|
+
var _Dropdown = _interopRequireDefault(require("./Dropdown"));
|
|
12
12
|
// Mocking DOMRect for Radix Primitive Popover
|
|
13
13
|
global.globalThis = global;
|
|
14
14
|
global.DOMRect = {
|
|
@@ -27,7 +27,7 @@ global.ResizeObserver = /*#__PURE__*/function () {
|
|
|
27
27
|
function ResizeObserver() {
|
|
28
28
|
(0, _classCallCheck2["default"])(this, ResizeObserver);
|
|
29
29
|
}
|
|
30
|
-
(0, _createClass2["default"])(ResizeObserver, [{
|
|
30
|
+
return (0, _createClass2["default"])(ResizeObserver, [{
|
|
31
31
|
key: "observe",
|
|
32
32
|
value: function observe() {}
|
|
33
33
|
}, {
|
|
@@ -37,7 +37,6 @@ global.ResizeObserver = /*#__PURE__*/function () {
|
|
|
37
37
|
key: "disconnect",
|
|
38
38
|
value: function disconnect() {}
|
|
39
39
|
}]);
|
|
40
|
-
return ResizeObserver;
|
|
41
40
|
}();
|
|
42
41
|
var options = [{
|
|
43
42
|
value: "1",
|
|
@@ -54,86 +53,92 @@ var options = [{
|
|
|
54
53
|
}];
|
|
55
54
|
describe("Dropdown component tests", function () {
|
|
56
55
|
test("Renders with correct aria attributes", /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee() {
|
|
57
|
-
var _render, getAllByRole, getByRole, dropdown, menu;
|
|
56
|
+
var onSelectOption, _render, getAllByRole, getByRole, dropdown, menu;
|
|
58
57
|
return _regenerator["default"].wrap(function _callee$(_context) {
|
|
59
58
|
while (1) switch (_context.prev = _context.next) {
|
|
60
59
|
case 0:
|
|
60
|
+
onSelectOption = jest.fn();
|
|
61
61
|
_render = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Dropdown["default"], {
|
|
62
62
|
options: options,
|
|
63
|
-
label: "dropdown-test"
|
|
63
|
+
label: "dropdown-test",
|
|
64
|
+
onSelectOption: onSelectOption
|
|
64
65
|
})), getAllByRole = _render.getAllByRole, getByRole = _render.getByRole;
|
|
65
66
|
dropdown = getByRole("button");
|
|
66
67
|
expect(dropdown.getAttribute("aria-haspopup")).toBe("true");
|
|
67
68
|
expect(dropdown.getAttribute("aria-expanded")).toBeNull();
|
|
68
69
|
expect(dropdown.getAttribute("aria-activedescendant")).toBeNull();
|
|
69
|
-
_context.next =
|
|
70
|
+
_context.next = 8;
|
|
70
71
|
return _userEvent["default"].click(dropdown);
|
|
71
|
-
case
|
|
72
|
+
case 8:
|
|
72
73
|
menu = getByRole("menu");
|
|
73
74
|
expect(dropdown.getAttribute("aria-controls")).toBe(menu.id);
|
|
74
75
|
expect(dropdown.getAttribute("aria-expanded")).toBe("true");
|
|
75
|
-
expect(menu.getAttribute("aria-activedescendant")).toBe("option-0");
|
|
76
|
+
expect(menu.getAttribute("aria-activedescendant")).toBe("".concat(menu.id, "-option-0"));
|
|
76
77
|
expect(menu.getAttribute("aria-orientation")).toBe("vertical");
|
|
77
78
|
expect(menu.getAttribute("aria-labelledby")).toBe(dropdown.id);
|
|
78
79
|
expect(getAllByRole("menuitem").length).toBe(4);
|
|
79
|
-
case
|
|
80
|
+
case 15:
|
|
80
81
|
case "end":
|
|
81
82
|
return _context.stop();
|
|
82
83
|
}
|
|
83
84
|
}, _callee);
|
|
84
85
|
})));
|
|
85
86
|
test("Button trigger opens and closes the menu options when clicked", /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee2() {
|
|
86
|
-
var _render2, getByRole, queryByRole, getByText, dropdown;
|
|
87
|
+
var onSelectOption, _render2, getByRole, queryByRole, getByText, dropdown;
|
|
87
88
|
return _regenerator["default"].wrap(function _callee2$(_context2) {
|
|
88
89
|
while (1) switch (_context2.prev = _context2.next) {
|
|
89
90
|
case 0:
|
|
91
|
+
onSelectOption = jest.fn();
|
|
90
92
|
_render2 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Dropdown["default"], {
|
|
91
93
|
options: options,
|
|
92
|
-
label: "dropdown-test"
|
|
94
|
+
label: "dropdown-test",
|
|
95
|
+
onSelectOption: onSelectOption
|
|
93
96
|
})), getByRole = _render2.getByRole, queryByRole = _render2.queryByRole, getByText = _render2.getByText;
|
|
94
97
|
dropdown = getByRole("button");
|
|
95
98
|
expect(queryByRole("menu")).toBeFalsy();
|
|
96
|
-
_context2.next =
|
|
99
|
+
_context2.next = 6;
|
|
97
100
|
return _userEvent["default"].click(dropdown);
|
|
98
|
-
case
|
|
101
|
+
case 6:
|
|
99
102
|
expect(queryByRole("menu")).toBeTruthy();
|
|
100
103
|
expect(getByText("Amazon")).toBeTruthy();
|
|
101
104
|
expect(getByText("Ebay")).toBeTruthy();
|
|
102
105
|
expect(getByText("Wallapop")).toBeTruthy();
|
|
103
106
|
expect(getByText("Aliexpress")).toBeTruthy();
|
|
104
|
-
_context2.next =
|
|
107
|
+
_context2.next = 13;
|
|
105
108
|
return _userEvent["default"].click(dropdown);
|
|
106
|
-
case 12:
|
|
107
|
-
expect(queryByRole("menu")).toBeFalsy();
|
|
108
109
|
case 13:
|
|
110
|
+
expect(queryByRole("menu")).toBeFalsy();
|
|
111
|
+
case 14:
|
|
109
112
|
case "end":
|
|
110
113
|
return _context2.stop();
|
|
111
114
|
}
|
|
112
115
|
}, _callee2);
|
|
113
116
|
})));
|
|
114
117
|
test("Button trigger is not interactive when disabled", /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee3() {
|
|
115
|
-
var _render3, getByRole, queryByRole, queryByText, dropdown;
|
|
118
|
+
var onSelectOption, _render3, getByRole, queryByRole, queryByText, dropdown;
|
|
116
119
|
return _regenerator["default"].wrap(function _callee3$(_context3) {
|
|
117
120
|
while (1) switch (_context3.prev = _context3.next) {
|
|
118
121
|
case 0:
|
|
122
|
+
onSelectOption = jest.fn();
|
|
119
123
|
_render3 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Dropdown["default"], {
|
|
120
124
|
disabled: true,
|
|
121
125
|
options: options,
|
|
122
|
-
label: "dropdown-test"
|
|
126
|
+
label: "dropdown-test",
|
|
127
|
+
onSelectOption: onSelectOption
|
|
123
128
|
})), getByRole = _render3.getByRole, queryByRole = _render3.queryByRole, queryByText = _render3.queryByText;
|
|
124
129
|
dropdown = getByRole("button");
|
|
125
130
|
expect(queryByRole("menu")).toBeFalsy();
|
|
126
|
-
_context3.next =
|
|
131
|
+
_context3.next = 6;
|
|
127
132
|
return _userEvent["default"].click(dropdown);
|
|
128
|
-
case
|
|
133
|
+
case 6:
|
|
129
134
|
expect(queryByRole("menu")).toBeFalsy();
|
|
130
135
|
expect(queryByText("Amazon")).toBeFalsy();
|
|
131
|
-
_context3.next =
|
|
136
|
+
_context3.next = 10;
|
|
132
137
|
return _userEvent["default"].click(dropdown);
|
|
133
|
-
case
|
|
138
|
+
case 10:
|
|
134
139
|
expect(queryByRole("menu")).toBeFalsy();
|
|
135
140
|
expect(dropdown.getAttribute("aria-expanded")).toBeNull();
|
|
136
|
-
case
|
|
141
|
+
case 12:
|
|
137
142
|
case "end":
|
|
138
143
|
return _context3.stop();
|
|
139
144
|
}
|
|
@@ -166,10 +171,12 @@ describe("Dropdown component tests", function () {
|
|
|
166
171
|
}, _callee4);
|
|
167
172
|
})));
|
|
168
173
|
test("When expandOnHover is true, the dropdown trigger shows and hides the menu when it is hovered", function () {
|
|
174
|
+
var onSelectOption = jest.fn();
|
|
169
175
|
var _render5 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Dropdown["default"], {
|
|
170
176
|
options: options,
|
|
171
177
|
expandOnHover: true,
|
|
172
|
-
label: "dropdown-test"
|
|
178
|
+
label: "dropdown-test",
|
|
179
|
+
onSelectOption: onSelectOption
|
|
173
180
|
})),
|
|
174
181
|
queryByText = _render5.queryByText,
|
|
175
182
|
getByRole = _render5.getByRole,
|
|
@@ -180,34 +187,38 @@ describe("Dropdown component tests", function () {
|
|
|
180
187
|
var menu = getByRole("menu");
|
|
181
188
|
expect(menu).toBeTruthy();
|
|
182
189
|
expect(document.activeElement === menu).toBeTruthy();
|
|
183
|
-
expect(menu.getAttribute("aria-activedescendant")).toBe("option-0");
|
|
190
|
+
expect(menu.getAttribute("aria-activedescendant")).toBe("".concat(menu.id, "-option-0"));
|
|
184
191
|
});
|
|
185
192
|
test("The menu is closed when the dropdown loses the focus (blur)", /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee5() {
|
|
186
|
-
var _render6, getByRole, queryByRole, dropdown;
|
|
193
|
+
var onSelectOption, _render6, getByRole, queryByRole, dropdown;
|
|
187
194
|
return _regenerator["default"].wrap(function _callee5$(_context5) {
|
|
188
195
|
while (1) switch (_context5.prev = _context5.next) {
|
|
189
196
|
case 0:
|
|
197
|
+
onSelectOption = jest.fn();
|
|
190
198
|
_render6 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Dropdown["default"], {
|
|
191
199
|
options: options,
|
|
192
|
-
label: "dropdown-test"
|
|
200
|
+
label: "dropdown-test",
|
|
201
|
+
onSelectOption: onSelectOption
|
|
193
202
|
})), getByRole = _render6.getByRole, queryByRole = _render6.queryByRole;
|
|
194
203
|
dropdown = getByRole("button");
|
|
195
|
-
_context5.next =
|
|
204
|
+
_context5.next = 5;
|
|
196
205
|
return _userEvent["default"].click(dropdown);
|
|
197
|
-
case
|
|
206
|
+
case 5:
|
|
198
207
|
expect(getByRole("menu")).toBeTruthy();
|
|
199
208
|
_react2.fireEvent.blur(getByRole("menu"));
|
|
200
209
|
expect(queryByRole("menu")).toBeFalsy();
|
|
201
|
-
case
|
|
210
|
+
case 8:
|
|
202
211
|
case "end":
|
|
203
212
|
return _context5.stop();
|
|
204
213
|
}
|
|
205
214
|
}, _callee5);
|
|
206
215
|
})));
|
|
207
216
|
test("Menu button key events - Arrow up opens the list and moves the focus to the last menu item", function () {
|
|
217
|
+
var onSelectOption = jest.fn();
|
|
208
218
|
var _render7 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Dropdown["default"], {
|
|
209
219
|
options: options,
|
|
210
|
-
label: "dropdown-test"
|
|
220
|
+
label: "dropdown-test",
|
|
221
|
+
onSelectOption: onSelectOption
|
|
211
222
|
})),
|
|
212
223
|
getByRole = _render7.getByRole;
|
|
213
224
|
var dropdown = getByRole("button");
|
|
@@ -220,12 +231,14 @@ describe("Dropdown component tests", function () {
|
|
|
220
231
|
var menu = getByRole("menu");
|
|
221
232
|
expect(menu).toBeTruthy();
|
|
222
233
|
expect(document.activeElement === menu).toBeTruthy();
|
|
223
|
-
expect(getByRole("menu").getAttribute("aria-activedescendant")).toBe("option-3");
|
|
234
|
+
expect(getByRole("menu").getAttribute("aria-activedescendant")).toBe("".concat(menu.id, "-option-3"));
|
|
224
235
|
});
|
|
225
236
|
test("Menu button key events - Arrow down opens the list and moves the focus to the first menu item", function () {
|
|
237
|
+
var onSelectOption = jest.fn();
|
|
226
238
|
var _render8 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Dropdown["default"], {
|
|
227
239
|
options: options,
|
|
228
|
-
label: "dropdown-test"
|
|
240
|
+
label: "dropdown-test",
|
|
241
|
+
onSelectOption: onSelectOption
|
|
229
242
|
})),
|
|
230
243
|
getByRole = _render8.getByRole;
|
|
231
244
|
var dropdown = getByRole("button");
|
|
@@ -238,12 +251,14 @@ describe("Dropdown component tests", function () {
|
|
|
238
251
|
var menu = getByRole("menu");
|
|
239
252
|
expect(menu).toBeTruthy();
|
|
240
253
|
expect(document.activeElement === menu).toBeTruthy();
|
|
241
|
-
expect(getByRole("menu").getAttribute("aria-activedescendant")).toBe("option-0");
|
|
254
|
+
expect(getByRole("menu").getAttribute("aria-activedescendant")).toBe("".concat(menu.id, "-option-0"));
|
|
242
255
|
});
|
|
243
256
|
test("Menu button key events - Enter opens the list and moves the focus to the first menu item", function () {
|
|
257
|
+
var onSelectOption = jest.fn();
|
|
244
258
|
var _render9 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Dropdown["default"], {
|
|
245
259
|
options: options,
|
|
246
|
-
label: "dropdown-test"
|
|
260
|
+
label: "dropdown-test",
|
|
261
|
+
onSelectOption: onSelectOption
|
|
247
262
|
})),
|
|
248
263
|
getByRole = _render9.getByRole;
|
|
249
264
|
var dropdown = getByRole("button");
|
|
@@ -256,12 +271,14 @@ describe("Dropdown component tests", function () {
|
|
|
256
271
|
var menu = getByRole("menu");
|
|
257
272
|
expect(menu).toBeTruthy();
|
|
258
273
|
expect(document.activeElement === menu).toBeTruthy();
|
|
259
|
-
expect(getByRole("menu").getAttribute("aria-activedescendant")).toBe("option-0");
|
|
274
|
+
expect(getByRole("menu").getAttribute("aria-activedescendant")).toBe("".concat(menu.id, "-option-0"));
|
|
260
275
|
});
|
|
261
276
|
test("Menu button key events - Space opens the list and moves the focus to the first menu item", function () {
|
|
277
|
+
var onSelectOption = jest.fn();
|
|
262
278
|
var _render10 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Dropdown["default"], {
|
|
263
279
|
options: options,
|
|
264
|
-
label: "dropdown-test"
|
|
280
|
+
label: "dropdown-test",
|
|
281
|
+
onSelectOption: onSelectOption
|
|
265
282
|
})),
|
|
266
283
|
getByRole = _render10.getByRole;
|
|
267
284
|
var dropdown = getByRole("button");
|
|
@@ -274,7 +291,7 @@ describe("Dropdown component tests", function () {
|
|
|
274
291
|
var menu = getByRole("menu");
|
|
275
292
|
expect(menu).toBeTruthy();
|
|
276
293
|
expect(document.activeElement === menu).toBeTruthy();
|
|
277
|
-
expect(getByRole("menu").getAttribute("aria-activedescendant")).toBe("option-0");
|
|
294
|
+
expect(getByRole("menu").getAttribute("aria-activedescendant")).toBe("".concat(menu.id, "-option-0"));
|
|
278
295
|
});
|
|
279
296
|
test("Menu key events - Arrow up moves the focus to the previous menu item", function () {
|
|
280
297
|
var onSelectOption = jest.fn();
|
|
@@ -298,7 +315,7 @@ describe("Dropdown component tests", function () {
|
|
|
298
315
|
charCode: 38
|
|
299
316
|
});
|
|
300
317
|
expect(document.activeElement === menu).toBeTruthy();
|
|
301
|
-
expect(menu.getAttribute("aria-activedescendant")).toBe("option-2");
|
|
318
|
+
expect(menu.getAttribute("aria-activedescendant")).toBe("".concat(menu.id, "-option-2"));
|
|
302
319
|
_react2.fireEvent.keyDown(menu, {
|
|
303
320
|
key: "Enter",
|
|
304
321
|
code: "Enter",
|
|
@@ -329,7 +346,7 @@ describe("Dropdown component tests", function () {
|
|
|
329
346
|
charCode: 38
|
|
330
347
|
});
|
|
331
348
|
expect(document.activeElement === menu).toBeTruthy();
|
|
332
|
-
expect(menu.getAttribute("aria-activedescendant")).toBe("option-3");
|
|
349
|
+
expect(menu.getAttribute("aria-activedescendant")).toBe("".concat(menu.id, "-option-3"));
|
|
333
350
|
_react2.fireEvent.keyDown(menu, {
|
|
334
351
|
key: "Enter",
|
|
335
352
|
code: "Enter",
|
|
@@ -371,7 +388,7 @@ describe("Dropdown component tests", function () {
|
|
|
371
388
|
charCode: 40
|
|
372
389
|
});
|
|
373
390
|
expect(document.activeElement === menu).toBeTruthy();
|
|
374
|
-
expect(menu.getAttribute("aria-activedescendant")).toBe("option-2");
|
|
391
|
+
expect(menu.getAttribute("aria-activedescendant")).toBe("".concat(menu.id, "-option-2"));
|
|
375
392
|
_react2.fireEvent.keyDown(menu, {
|
|
376
393
|
key: "Enter",
|
|
377
394
|
code: "Enter",
|
|
@@ -407,7 +424,7 @@ describe("Dropdown component tests", function () {
|
|
|
407
424
|
charCode: 40
|
|
408
425
|
});
|
|
409
426
|
expect(document.activeElement === menu).toBeTruthy();
|
|
410
|
-
expect(menu.getAttribute("aria-activedescendant")).toBe("option-0");
|
|
427
|
+
expect(menu.getAttribute("aria-activedescendant")).toBe("".concat(menu.id, "-option-0"));
|
|
411
428
|
_react2.fireEvent.keyDown(menu, {
|
|
412
429
|
key: "Enter",
|
|
413
430
|
code: "Enter",
|
|
@@ -446,17 +463,19 @@ describe("Dropdown component tests", function () {
|
|
|
446
463
|
}, _callee8);
|
|
447
464
|
})));
|
|
448
465
|
test("Menu key events - Esc closes the menu and sets focus on the menu button", /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee9() {
|
|
449
|
-
var _render16, getByRole, queryByRole;
|
|
466
|
+
var onSelectOption, _render16, getByRole, queryByRole;
|
|
450
467
|
return _regenerator["default"].wrap(function _callee9$(_context9) {
|
|
451
468
|
while (1) switch (_context9.prev = _context9.next) {
|
|
452
469
|
case 0:
|
|
470
|
+
onSelectOption = jest.fn();
|
|
453
471
|
_render16 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Dropdown["default"], {
|
|
454
472
|
options: options,
|
|
455
|
-
label: "dropdown-test"
|
|
473
|
+
label: "dropdown-test",
|
|
474
|
+
onSelectOption: onSelectOption
|
|
456
475
|
})), getByRole = _render16.getByRole, queryByRole = _render16.queryByRole;
|
|
457
|
-
_context9.next =
|
|
476
|
+
_context9.next = 4;
|
|
458
477
|
return _userEvent["default"].click(getByRole("button"));
|
|
459
|
-
case
|
|
478
|
+
case 4:
|
|
460
479
|
_react2.fireEvent.keyDown(getByRole("menu"), {
|
|
461
480
|
key: "Esc",
|
|
462
481
|
code: "Esc",
|
|
@@ -465,16 +484,18 @@ describe("Dropdown component tests", function () {
|
|
|
465
484
|
});
|
|
466
485
|
expect(queryByRole("menu")).toBeFalsy();
|
|
467
486
|
expect(document.activeElement === getByRole("button")).toBeTruthy();
|
|
468
|
-
case
|
|
487
|
+
case 7:
|
|
469
488
|
case "end":
|
|
470
489
|
return _context9.stop();
|
|
471
490
|
}
|
|
472
491
|
}, _callee9);
|
|
473
492
|
})));
|
|
474
493
|
test("Menu key events - Home moves the focus to the first menu item", function () {
|
|
494
|
+
var onSelectOption = jest.fn();
|
|
475
495
|
var _render17 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Dropdown["default"], {
|
|
476
496
|
options: options,
|
|
477
|
-
label: "dropdown-test-1"
|
|
497
|
+
label: "dropdown-test-1",
|
|
498
|
+
onSelectOption: onSelectOption
|
|
478
499
|
})),
|
|
479
500
|
getByRole = _render17.getByRole;
|
|
480
501
|
_react2.fireEvent.keyDown(getByRole("button"), {
|
|
@@ -484,46 +505,50 @@ describe("Dropdown component tests", function () {
|
|
|
484
505
|
charCode: 38
|
|
485
506
|
});
|
|
486
507
|
var menu = getByRole("menu");
|
|
487
|
-
expect(menu.getAttribute("aria-activedescendant")).toBe("option-3");
|
|
508
|
+
expect(menu.getAttribute("aria-activedescendant")).toBe("".concat(menu.id, "-option-3"));
|
|
488
509
|
_react2.fireEvent.keyDown(menu, {
|
|
489
510
|
key: "Home",
|
|
490
511
|
code: "Home",
|
|
491
512
|
keyCode: 36,
|
|
492
513
|
charCode: 36
|
|
493
514
|
});
|
|
494
|
-
expect(menu.getAttribute("aria-activedescendant")).toBe("option-0");
|
|
515
|
+
expect(menu.getAttribute("aria-activedescendant")).toBe("".concat(menu.id, "-option-0"));
|
|
495
516
|
});
|
|
496
517
|
test("Menu key events - End moves the focus to the last menu item", /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee10() {
|
|
497
|
-
var _render18, getByRole, menu;
|
|
518
|
+
var onSelectOption, _render18, getByRole, menu;
|
|
498
519
|
return _regenerator["default"].wrap(function _callee10$(_context10) {
|
|
499
520
|
while (1) switch (_context10.prev = _context10.next) {
|
|
500
521
|
case 0:
|
|
522
|
+
onSelectOption = jest.fn();
|
|
501
523
|
_render18 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Dropdown["default"], {
|
|
502
524
|
options: options,
|
|
503
|
-
label: "dropdown-test-1"
|
|
525
|
+
label: "dropdown-test-1",
|
|
526
|
+
onSelectOption: onSelectOption
|
|
504
527
|
})), getByRole = _render18.getByRole;
|
|
505
|
-
_context10.next =
|
|
528
|
+
_context10.next = 4;
|
|
506
529
|
return _userEvent["default"].click(getByRole("button"));
|
|
507
|
-
case
|
|
530
|
+
case 4:
|
|
508
531
|
menu = getByRole("menu");
|
|
509
|
-
expect(menu.getAttribute("aria-activedescendant")).toBe("option-0");
|
|
532
|
+
expect(menu.getAttribute("aria-activedescendant")).toBe("".concat(menu.id, "-option-0"));
|
|
510
533
|
_react2.fireEvent.keyDown(menu, {
|
|
511
534
|
key: "End",
|
|
512
535
|
code: "End",
|
|
513
536
|
keyCode: 35,
|
|
514
537
|
charCode: 35
|
|
515
538
|
});
|
|
516
|
-
expect(menu.getAttribute("aria-activedescendant")).toBe("option-3");
|
|
517
|
-
case
|
|
539
|
+
expect(menu.getAttribute("aria-activedescendant")).toBe("".concat(menu.id, "-option-3"));
|
|
540
|
+
case 8:
|
|
518
541
|
case "end":
|
|
519
542
|
return _context10.stop();
|
|
520
543
|
}
|
|
521
544
|
}, _callee10);
|
|
522
545
|
})));
|
|
523
546
|
test("Menu key events - PageUp moves the focus to the first menu item", function () {
|
|
547
|
+
var onSelectOption = jest.fn();
|
|
524
548
|
var _render19 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Dropdown["default"], {
|
|
525
549
|
options: options,
|
|
526
|
-
label: "dropdown-test-1"
|
|
550
|
+
label: "dropdown-test-1",
|
|
551
|
+
onSelectOption: onSelectOption
|
|
527
552
|
})),
|
|
528
553
|
getByRole = _render19.getByRole;
|
|
529
554
|
_react2.fireEvent.keyDown(getByRole("button"), {
|
|
@@ -533,55 +558,59 @@ describe("Dropdown component tests", function () {
|
|
|
533
558
|
charCode: 38
|
|
534
559
|
});
|
|
535
560
|
var menu = getByRole("menu");
|
|
536
|
-
expect(menu.getAttribute("aria-activedescendant")).toBe("option-3");
|
|
561
|
+
expect(menu.getAttribute("aria-activedescendant")).toBe("".concat(menu.id, "-option-3"));
|
|
537
562
|
_react2.fireEvent.keyDown(menu, {
|
|
538
563
|
key: "PageUp",
|
|
539
564
|
code: "PageUp",
|
|
540
565
|
keyCode: 33,
|
|
541
566
|
charCode: 33
|
|
542
567
|
});
|
|
543
|
-
expect(menu.getAttribute("aria-activedescendant")).toBe("option-0");
|
|
568
|
+
expect(menu.getAttribute("aria-activedescendant")).toBe("".concat(menu.id, "-option-0"));
|
|
544
569
|
});
|
|
545
570
|
test("Menu key events - PageDown moves the focus to the last menu item", /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee11() {
|
|
546
|
-
var _render20, getByRole, menu;
|
|
571
|
+
var onSelectOption, _render20, getByRole, menu;
|
|
547
572
|
return _regenerator["default"].wrap(function _callee11$(_context11) {
|
|
548
573
|
while (1) switch (_context11.prev = _context11.next) {
|
|
549
574
|
case 0:
|
|
575
|
+
onSelectOption = jest.fn();
|
|
550
576
|
_render20 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Dropdown["default"], {
|
|
551
577
|
options: options,
|
|
552
|
-
label: "dropdown-test-1"
|
|
578
|
+
label: "dropdown-test-1",
|
|
579
|
+
onSelectOption: onSelectOption
|
|
553
580
|
})), getByRole = _render20.getByRole;
|
|
554
|
-
_context11.next =
|
|
581
|
+
_context11.next = 4;
|
|
555
582
|
return _userEvent["default"].click(getByRole("button"));
|
|
556
|
-
case
|
|
583
|
+
case 4:
|
|
557
584
|
menu = getByRole("menu");
|
|
558
|
-
expect(menu.getAttribute("aria-activedescendant")).toBe("option-0");
|
|
585
|
+
expect(menu.getAttribute("aria-activedescendant")).toBe("".concat(menu.id, "-option-0"));
|
|
559
586
|
_react2.fireEvent.keyDown(menu, {
|
|
560
587
|
key: "PageDown",
|
|
561
588
|
code: "PageDown",
|
|
562
589
|
keyCode: 34,
|
|
563
590
|
charCode: 34
|
|
564
591
|
});
|
|
565
|
-
expect(menu.getAttribute("aria-activedescendant")).toBe("option-3");
|
|
566
|
-
case
|
|
592
|
+
expect(menu.getAttribute("aria-activedescendant")).toBe("".concat(menu.id, "-option-3"));
|
|
593
|
+
case 8:
|
|
567
594
|
case "end":
|
|
568
595
|
return _context11.stop();
|
|
569
596
|
}
|
|
570
597
|
}, _callee11);
|
|
571
598
|
})));
|
|
572
599
|
test("Menu key events - Tab closes the menu and sets focus to the next element", /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee12() {
|
|
573
|
-
var _render21, getByRole, queryByRole, dropdown;
|
|
600
|
+
var onSelectOption, _render21, getByRole, queryByRole, dropdown;
|
|
574
601
|
return _regenerator["default"].wrap(function _callee12$(_context12) {
|
|
575
602
|
while (1) switch (_context12.prev = _context12.next) {
|
|
576
603
|
case 0:
|
|
604
|
+
onSelectOption = jest.fn();
|
|
577
605
|
_render21 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Dropdown["default"], {
|
|
578
606
|
options: options,
|
|
579
|
-
label: "dropdown-test-1"
|
|
607
|
+
label: "dropdown-test-1",
|
|
608
|
+
onSelectOption: onSelectOption
|
|
580
609
|
})), getByRole = _render21.getByRole, queryByRole = _render21.queryByRole;
|
|
581
610
|
dropdown = getByRole("button");
|
|
582
|
-
_context12.next =
|
|
611
|
+
_context12.next = 5;
|
|
583
612
|
return _userEvent["default"].click(dropdown);
|
|
584
|
-
case
|
|
613
|
+
case 5:
|
|
585
614
|
expect(getByRole("menu")).toBeTruthy();
|
|
586
615
|
_react2.fireEvent.keyDown(getByRole("menu"), {
|
|
587
616
|
key: "Tab",
|
|
@@ -590,7 +619,7 @@ describe("Dropdown component tests", function () {
|
|
|
590
619
|
charCode: 9
|
|
591
620
|
});
|
|
592
621
|
expect(queryByRole("menu")).toBeFalsy();
|
|
593
|
-
case
|
|
622
|
+
case 8:
|
|
594
623
|
case "end":
|
|
595
624
|
return _context12.stop();
|
|
596
625
|
}
|
package/dropdown/DropdownMenu.js
CHANGED
|
@@ -21,7 +21,7 @@ var DropdownMenu = /*#__PURE__*/_react["default"].forwardRef(function (_ref, ref
|
|
|
21
21
|
styles = _ref.styles;
|
|
22
22
|
return /*#__PURE__*/_react["default"].createElement(DropdownMenuContainer, {
|
|
23
23
|
onMouseDown: function onMouseDown(event) {
|
|
24
|
-
// Prevent the onBlur event from closing menu when clicking on the menu since
|
|
24
|
+
// Prevent the onBlur event from closing menu when clicking on the menu since
|
|
25
25
|
// it is implemented with a Portal and the menu is not a direct child of the container
|
|
26
26
|
event.preventDefault();
|
|
27
27
|
},
|
|
@@ -30,14 +30,14 @@ var DropdownMenu = /*#__PURE__*/_react["default"].forwardRef(function (_ref, ref
|
|
|
30
30
|
role: "menu",
|
|
31
31
|
"aria-labelledby": dropdownTriggerId,
|
|
32
32
|
"aria-orientation": "vertical",
|
|
33
|
-
"aria-activedescendant": "option-".concat(visualFocusIndex),
|
|
33
|
+
"aria-activedescendant": visualFocusIndex !== -1 ? "".concat(id, "-option-").concat(visualFocusIndex) : undefined,
|
|
34
34
|
tabIndex: -1,
|
|
35
35
|
ref: ref,
|
|
36
36
|
style: styles
|
|
37
37
|
}, options.map(function (option, index) {
|
|
38
38
|
return /*#__PURE__*/_react["default"].createElement(_DropdownMenuItem["default"], {
|
|
39
|
-
id: "option-".concat(index),
|
|
40
|
-
key: "option-".concat(index),
|
|
39
|
+
id: "".concat(id, "-option-").concat(index),
|
|
40
|
+
key: "".concat(id, "-option-").concat(index),
|
|
41
41
|
visuallyFocused: index === visualFocusIndex,
|
|
42
42
|
iconPosition: iconsPosition,
|
|
43
43
|
onClick: menuItemOnClick,
|
|
@@ -25,7 +25,8 @@ var DropdownMenuItem = function DropdownMenuItem(_ref) {
|
|
|
25
25
|
role: "menuitem",
|
|
26
26
|
tabIndex: -1
|
|
27
27
|
}, iconPosition === "after" && /*#__PURE__*/_react["default"].createElement(DropdownMenuItemLabel, null, option.label), option.icon && /*#__PURE__*/_react["default"].createElement(DropdownMenuItemIcon, {
|
|
28
|
-
role: typeof option.icon === "string" ? undefined : "img"
|
|
28
|
+
role: typeof option.icon === "string" ? undefined : "img",
|
|
29
|
+
"aria-hidden": true
|
|
29
30
|
}, typeof option.icon === "string" ? /*#__PURE__*/_react["default"].createElement(_Icon["default"], {
|
|
30
31
|
icon: option.icon
|
|
31
32
|
}) : option.icon), iconPosition === "before" && /*#__PURE__*/_react["default"].createElement(DropdownMenuItemLabel, null, option.label));
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|