@dxc-technology/halstack-react 11.0.0 → 12.0.0
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.d.ts +1 -10
- package/BackgroundColorContext.js +3 -8
- package/HalstackContext.d.ts +32 -142
- package/HalstackContext.js +2 -2
- package/accordion/Accordion.accessibility.test.js +71 -0
- package/accordion/Accordion.js +13 -27
- package/accordion/Accordion.stories.tsx +7 -49
- package/accordion/types.d.ts +1 -1
- package/accordion-group/AccordionGroup.accessibility.test.js +88 -0
- package/accordion-group/AccordionGroup.d.ts +2 -3
- package/accordion-group/AccordionGroup.js +4 -4
- package/accordion-group/AccordionGroup.stories.tsx +23 -23
- package/accordion-group/AccordionGroupAccordion.js +3 -3
- package/accordion-group/AccordionGroupContext.d.ts +3 -0
- package/accordion-group/AccordionGroupContext.js +8 -0
- package/accordion-group/types.d.ts +1 -1
- package/action-icon/ActionIcon.accessibility.test.js +63 -0
- package/action-icon/ActionIcon.d.ts +4 -0
- package/action-icon/ActionIcon.js +48 -0
- package/action-icon/ActionIcon.stories.tsx +41 -0
- package/action-icon/ActionIcon.test.js +64 -0
- package/action-icon/types.d.ts +26 -0
- package/action-icon/types.js +5 -0
- package/alert/Alert.accessibility.test.js +95 -0
- package/alert/Alert.js +21 -75
- package/badge/Badge.accessibility.test.js +129 -0
- package/badge/Badge.d.ts +1 -1
- package/badge/Badge.js +141 -28
- package/badge/Badge.stories.tsx +210 -0
- package/badge/Badge.test.js +30 -0
- package/badge/types.d.ts +52 -3
- package/box/Box.accessibility.test.js +33 -0
- package/box/Box.js +2 -5
- 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 +169 -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.js +119 -0
- package/bulleted-list/BulletedList.js +16 -23
- package/bulleted-list/BulletedList.stories.tsx +1 -2
- package/button/Button.accessibility.test.js +127 -0
- package/button/Button.js +16 -16
- package/button/Button.stories.tsx +34 -53
- package/button/Button.test.js +3 -1
- package/button/types.d.ts +1 -1
- package/card/Card.accessibility.test.js +36 -0
- package/card/Card.js +3 -2
- package/checkbox/Checkbox.accessibility.test.js +87 -0
- package/checkbox/Checkbox.js +31 -36
- package/chip/Chip.accessibility.test.js +67 -0
- package/chip/Chip.js +11 -6
- package/chip/Chip.stories.tsx +10 -25
- package/chip/Chip.test.js +4 -4
- package/common/coreTokens.d.ts +105 -14
- package/common/coreTokens.js +40 -22
- package/common/variables.d.ts +31 -138
- package/common/variables.js +103 -210
- package/container/Container.d.ts +4 -0
- package/container/Container.js +194 -0
- package/container/Container.stories.tsx +214 -0
- package/container/types.d.ts +74 -0
- package/container/types.js +5 -0
- package/contextual-menu/ContextualMenu.accessibility.test.js +97 -0
- package/contextual-menu/ContextualMenu.d.ts +5 -0
- package/contextual-menu/ContextualMenu.js +88 -0
- package/contextual-menu/ContextualMenu.stories.tsx +232 -0
- package/contextual-menu/ContextualMenu.test.js +205 -0
- 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 +51 -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 +58 -0
- package/contextual-menu/types.js +5 -0
- package/date-input/Calendar.js +1 -1
- package/date-input/DateInput.accessibility.test.js +228 -0
- package/date-input/DateInput.js +4 -5
- package/date-input/DateInput.stories.tsx +15 -8
- package/date-input/DatePicker.js +13 -7
- package/date-input/YearPicker.js +1 -1
- package/date-input/types.d.ts +2 -2
- package/dialog/Dialog.accessibility.test.js +69 -0
- package/dialog/Dialog.js +11 -25
- package/dialog/Dialog.stories.tsx +176 -0
- package/dialog/Dialog.test.js +1 -1
- package/divider/Divider.accessibility.test.js +33 -0
- package/divider/Divider.d.ts +4 -0
- package/divider/Divider.js +36 -0
- package/divider/Divider.stories.tsx +223 -0
- package/divider/Divider.test.js +38 -0
- package/divider/types.d.ts +21 -0
- package/divider/types.js +5 -0
- package/dropdown/Dropdown.accessibility.test.js +180 -0
- package/dropdown/Dropdown.js +26 -39
- package/dropdown/Dropdown.stories.tsx +15 -26
- package/dropdown/Dropdown.test.js +18 -18
- package/dropdown/DropdownMenu.js +4 -4
- package/dropdown/DropdownMenuItem.js +8 -4
- package/dropdown/types.d.ts +3 -5
- package/file-input/FileInput.accessibility.test.js +160 -0
- package/file-input/FileInput.js +126 -141
- package/file-input/FileInput.test.js +84 -110
- package/file-input/FileItem.js +18 -28
- package/file-input/types.d.ts +1 -1
- package/footer/Footer.accessibility.test.js +125 -0
- package/footer/Footer.d.ts +1 -1
- package/footer/Footer.js +36 -31
- package/footer/Footer.stories.tsx +58 -2
- package/footer/Icons.d.ts +1 -0
- package/footer/Icons.js +52 -16
- package/footer/types.d.ts +8 -8
- package/header/Header.accessibility.test.js +93 -0
- package/header/Header.js +20 -41
- package/header/Header.stories.tsx +16 -0
- package/header/Icons.js +1 -6
- package/header/types.d.ts +4 -3
- package/heading/Heading.accessibility.test.js +33 -0
- package/heading/Heading.js +1 -1
- package/icon/Icon.accessibility.test.js +30 -0
- package/icon/Icon.d.ts +4 -0
- package/icon/Icon.js +33 -0
- package/icon/Icon.stories.tsx +28 -0
- package/icon/types.d.ts +4 -0
- package/icon/types.js +5 -0
- package/image/Image.accessibility.test.js +56 -0
- package/image/Image.js +1 -1
- package/image/Image.stories.tsx +3 -1
- package/layout/ApplicationLayout.d.ts +1 -1
- package/layout/ApplicationLayout.js +10 -7
- package/layout/Icons.d.ts +0 -1
- package/layout/Icons.js +1 -11
- package/link/Link.accessibility.test.js +108 -0
- package/link/Link.js +8 -6
- package/link/Link.stories.tsx +4 -4
- package/link/types.d.ts +1 -1
- package/main.d.ts +7 -3
- package/main.js +37 -9
- package/nav-tabs/NavTabs.accessibility.test.js +44 -0
- package/nav-tabs/NavTabs.d.ts +1 -2
- package/nav-tabs/NavTabs.js +10 -7
- package/nav-tabs/NavTabs.stories.tsx +29 -24
- package/nav-tabs/NavTabs.test.js +11 -9
- package/nav-tabs/NavTabsContext.d.ts +3 -0
- package/nav-tabs/NavTabsContext.js +8 -0
- package/nav-tabs/Tab.js +23 -23
- package/nav-tabs/types.d.ts +1 -1
- package/number-input/NumberInput.accessibility.test.js +228 -0
- package/number-input/NumberInput.d.ts +0 -7
- package/number-input/NumberInput.js +24 -5
- package/number-input/NumberInput.test.js +165 -6
- package/number-input/NumberInputContext.d.ts +3 -0
- package/number-input/NumberInputContext.js +8 -0
- package/number-input/types.d.ts +6 -0
- package/package.json +16 -14
- package/paginator/Paginator.accessibility.test.js +79 -0
- package/paginator/Paginator.js +14 -14
- package/paragraph/Paragraph.accessibility.test.js +28 -0
- package/paragraph/Paragraph.js +2 -7
- package/password-input/PasswordInput.accessibility.test.js +153 -0
- package/password-input/PasswordInput.js +7 -7
- package/password-input/PasswordInput.stories.tsx +0 -1
- package/password-input/PasswordInput.test.js +4 -4
- package/progress-bar/ProgressBar.accessibility.test.js +35 -0
- package/progress-bar/ProgressBar.js +11 -15
- package/quick-nav/QuickNav.accessibility.test.js +57 -0
- package/quick-nav/QuickNav.js +1 -1
- package/radio-group/Radio.js +1 -1
- package/radio-group/RadioGroup.accessibility.test.js +97 -0
- package/radio-group/RadioGroup.js +3 -2
- package/resultset-table/ResultsetTable.accessibility.test.js +285 -0
- package/resultset-table/ResultsetTable.d.ts +4 -1
- package/resultset-table/ResultsetTable.js +25 -13
- package/resultset-table/ResultsetTable.stories.tsx +118 -5
- package/resultset-table/ResultsetTable.test.js +76 -0
- package/resultset-table/types.d.ts +40 -7
- package/select/Listbox.js +28 -16
- package/select/Option.js +19 -10
- package/select/Select.accessibility.test.js +228 -0
- package/select/Select.js +57 -37
- package/select/Select.stories.tsx +59 -111
- package/select/Select.test.js +387 -456
- package/select/types.d.ts +3 -3
- package/sidenav/Sidenav.accessibility.test.js +59 -0
- package/sidenav/Sidenav.js +21 -19
- package/sidenav/Sidenav.stories.tsx +4 -9
- package/sidenav/types.d.ts +2 -2
- package/slider/Slider.accessibility.test.js +104 -0
- package/slider/Slider.js +40 -48
- package/spinner/Spinner.accessibility.test.js +96 -0
- package/spinner/Spinner.js +12 -16
- package/status-light/StatusLight.accessibility.test.js +157 -0
- package/status-light/StatusLight.d.ts +4 -0
- package/status-light/StatusLight.js +51 -0
- package/status-light/StatusLight.stories.tsx +74 -0
- package/status-light/StatusLight.test.js +25 -0
- package/status-light/types.d.ts +17 -0
- package/status-light/types.js +5 -0
- package/switch/Switch.accessibility.test.js +98 -0
- package/switch/Switch.js +24 -29
- package/switch/Switch.stories.tsx +12 -0
- package/table/DropdownTheme.js +62 -0
- package/table/Table.accessibility.test.js +93 -0
- package/table/Table.d.ts +6 -2
- package/table/Table.js +74 -12
- package/table/Table.stories.tsx +309 -2
- package/table/Table.test.js +92 -0
- package/table/types.d.ts +28 -0
- package/tabs/Tab.js +13 -9
- package/tabs/Tabs.accessibility.test.js +56 -0
- package/tabs/Tabs.js +12 -24
- package/tabs/Tabs.stories.tsx +8 -4
- package/tabs/Tabs.test.js +19 -37
- package/tabs/types.d.ts +2 -2
- package/tag/Tag.accessibility.test.js +69 -0
- package/tag/Tag.js +7 -7
- package/tag/Tag.stories.tsx +4 -7
- package/tag/Tag.test.js +4 -12
- package/tag/types.d.ts +2 -2
- package/text-input/Suggestion.js +1 -1
- package/text-input/Suggestions.js +19 -14
- package/text-input/TextInput.accessibility.test.js +321 -0
- package/text-input/TextInput.js +84 -105
- package/text-input/TextInput.stories.tsx +17 -8
- package/text-input/TextInput.test.js +96 -79
- package/textarea/Textarea.accessibility.test.js +155 -0
- package/textarea/Textarea.js +12 -17
- package/textarea/Textarea.stories.tsx +0 -1
- package/toggle-group/ToggleGroup.accessibility.test.js +107 -0
- package/toggle-group/ToggleGroup.js +6 -8
- package/toggle-group/ToggleGroup.stories.tsx +3 -3
- package/toggle-group/types.d.ts +2 -2
- package/typography/Typography.accessibility.test.js +339 -0
- package/useTheme.d.ts +31 -138
- package/utils/BaseTypography.js +1 -1
- package/utils/FocusLock.js +16 -6
- package/wizard/Wizard.accessibility.test.js +55 -0
- package/wizard/Wizard.js +14 -25
- package/wizard/Wizard.stories.tsx +19 -0
- package/wizard/types.d.ts +2 -2
- package/common/OpenSans.css +0 -69
- package/common/fonts/OpenSans-Bold.ttf +0 -0
- package/common/fonts/OpenSans-BoldItalic.ttf +0 -0
- package/common/fonts/OpenSans-ExtraBold.ttf +0 -0
- package/common/fonts/OpenSans-ExtraBoldItalic.ttf +0 -0
- package/common/fonts/OpenSans-Italic.ttf +0 -0
- package/common/fonts/OpenSans-Light.ttf +0 -0
- package/common/fonts/OpenSans-LightItalic.ttf +0 -0
- package/common/fonts/OpenSans-Regular.ttf +0 -0
- package/common/fonts/OpenSans-SemiBold.ttf +0 -0
- package/common/fonts/OpenSans-SemiBoldItalic.ttf +0 -0
- package/date-input/Icons.d.ts +0 -6
- package/date-input/Icons.js +0 -58
- package/paginator/Icons.d.ts +0 -5
- package/paginator/Icons.js +0 -40
- package/password-input/Icons.d.ts +0 -6
- package/password-input/Icons.js +0 -35
- package/select/Icons.d.ts +0 -10
- package/select/Icons.js +0 -89
- package/sidenav/Icons.d.ts +0 -7
- package/sidenav/Icons.js +0 -47
- package/text-input/Icons.d.ts +0 -8
- package/text-input/Icons.js +0 -56
- /package/{layout → sidenav}/SidenavContext.d.ts +0 -0
- /package/{layout → sidenav}/SidenavContext.js +0 -0
|
@@ -13,10 +13,9 @@ var _react = _interopRequireWildcard(require("react"));
|
|
|
13
13
|
var _styledComponents = _interopRequireWildcard(require("styled-components"));
|
|
14
14
|
var _variables = require("../common/variables");
|
|
15
15
|
var _useTheme = _interopRequireDefault(require("../useTheme"));
|
|
16
|
-
var _BackgroundColorContext = _interopRequireDefault(require("../BackgroundColorContext"));
|
|
17
16
|
var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8;
|
|
18
17
|
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
|
|
19
|
-
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof3(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u &&
|
|
18
|
+
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof3(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
|
|
20
19
|
var DxcProgressBar = function DxcProgressBar(_ref) {
|
|
21
20
|
var _ref$label = _ref.label,
|
|
22
21
|
label = _ref$label === void 0 ? "" : _ref$label,
|
|
@@ -29,7 +28,6 @@ var DxcProgressBar = function DxcProgressBar(_ref) {
|
|
|
29
28
|
showValue = _ref$showValue === void 0 ? false : _ref$showValue,
|
|
30
29
|
margin = _ref.margin;
|
|
31
30
|
var colorsTheme = (0, _useTheme["default"])();
|
|
32
|
-
var backgroundType = (0, _react.useContext)(_BackgroundColorContext["default"]);
|
|
33
31
|
var _useState = (0, _react.useState)(0),
|
|
34
32
|
_useState2 = (0, _slicedToArray2["default"])(_useState, 2),
|
|
35
33
|
valueProgressBar = _useState2[0],
|
|
@@ -45,26 +43,24 @@ var DxcProgressBar = function DxcProgressBar(_ref) {
|
|
|
45
43
|
overlay: overlay,
|
|
46
44
|
margin: margin
|
|
47
45
|
}, /*#__PURE__*/_react["default"].createElement(InfoProgressBar, null, /*#__PURE__*/_react["default"].createElement(ProgressBarLabel, {
|
|
48
|
-
overlay: overlay
|
|
49
|
-
backgroundType: backgroundType,
|
|
50
|
-
"aria-label": label || undefined
|
|
46
|
+
overlay: overlay
|
|
51
47
|
}, label), /*#__PURE__*/_react["default"].createElement(ProgressBarProgress, {
|
|
52
48
|
overlay: overlay,
|
|
53
49
|
showValue: showValue,
|
|
54
|
-
backgroundType: backgroundType,
|
|
55
50
|
value: valueProgressBar
|
|
56
51
|
}, valueProgressBar, " %")), /*#__PURE__*/_react["default"].createElement(LinearProgress, {
|
|
57
52
|
role: "progressbar",
|
|
58
53
|
helperText: helperText,
|
|
59
|
-
"aria-valuenow": showValue ? valueProgressBar : undefined
|
|
54
|
+
"aria-valuenow": showValue ? valueProgressBar : undefined,
|
|
55
|
+
"aria-valuemin": 0,
|
|
56
|
+
"aria-valuemax": 100,
|
|
57
|
+
"aria-label": label || "Progress Bar"
|
|
60
58
|
}, /*#__PURE__*/_react["default"].createElement(LinearProgressBar, {
|
|
61
|
-
backgroundType: backgroundType,
|
|
62
59
|
variant: value === null || value === undefined ? "indeterminate" : "determinate",
|
|
63
60
|
container: "first",
|
|
64
61
|
value: valueProgressBar
|
|
65
62
|
})), helperText && /*#__PURE__*/_react["default"].createElement(HelperText, {
|
|
66
|
-
overlay: overlay
|
|
67
|
-
backgroundType: backgroundType
|
|
63
|
+
overlay: overlay
|
|
68
64
|
}, helperText))));
|
|
69
65
|
};
|
|
70
66
|
var BackgroundProgressBar = _styledComponents["default"].div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n ", "\n display: flex;\n flex-wrap: wrap;\n min-width: 100px;\n width: 100%;\n"])), function (_ref2) {
|
|
@@ -99,7 +95,7 @@ var ProgressBarLabel = _styledComponents["default"].div(_templateObject4 || (_te
|
|
|
99
95
|
}, function (props) {
|
|
100
96
|
return props.theme.labelFontTextTransform;
|
|
101
97
|
}, function (props) {
|
|
102
|
-
return props.
|
|
98
|
+
return props.overlay === true ? props.theme.overlayFontColor : props.theme.labelFontColor;
|
|
103
99
|
});
|
|
104
100
|
var ProgressBarProgress = _styledComponents["default"].div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2["default"])(["\n font-family: ", ";\n font-style: ", ";\n font-size: ", ";\n font-weight: ", ";\n text-transform: ", ";\n color: ", ";\n display: ", ";\n flex-shrink: 0;\n"])), function (props) {
|
|
105
101
|
return props.theme.valueFontFamily;
|
|
@@ -112,12 +108,12 @@ var ProgressBarProgress = _styledComponents["default"].div(_templateObject5 || (
|
|
|
112
108
|
}, function (props) {
|
|
113
109
|
return props.theme.valueFontTextTransform;
|
|
114
110
|
}, function (props) {
|
|
115
|
-
return props.
|
|
111
|
+
return props.overlay === true ? props.theme.overlayFontColor : props.theme.valueFontColor;
|
|
116
112
|
}, function (props) {
|
|
117
113
|
return props.value !== undefined && props.value !== null && props.showValue === true && "block" || "none";
|
|
118
114
|
});
|
|
119
115
|
var HelperText = _styledComponents["default"].span(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2["default"])(["\n color: ", ";\n font-family: ", ";\n font-size: ", ";\n font-style: ", ";\n font-weight: ", ";\n line-height: 1.5em;\n"])), function (props) {
|
|
120
|
-
return props.
|
|
116
|
+
return props.overlay === true ? props.theme.overlayFontColor : props.theme.helperTextFontColor;
|
|
121
117
|
}, function (props) {
|
|
122
118
|
return props.theme.helperTextFontFamily;
|
|
123
119
|
}, function (props) {
|
|
@@ -137,7 +133,7 @@ var LinearProgress = _styledComponents["default"].div(_templateObject7 || (_temp
|
|
|
137
133
|
return props.helperText !== "" && "8px";
|
|
138
134
|
});
|
|
139
135
|
var LinearProgressBar = _styledComponents["default"].span(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2["default"])(["\n background-color: ", ";\n transform: ", ";\n top: 0;\n left: 0;\n width: 100%;\n bottom: 0;\n position: absolute;\n transition: ", ";\n transform-origin: left;\n ", ";\n ", ";\n\n @keyframes keyframes-indeterminate-first {\n 0% {\n left: -35%;\n right: 100%;\n }\n 60% {\n left: 100%;\n right: -90%;\n }\n 100% {\n left: 100%;\n right: -90%;\n }\n }\n\n @keyframes keyframes-indeterminate-second {\n 0% {\n left: -200%;\n right: 100%;\n }\n 60% {\n left: 107%;\n right: -8%;\n }\n 100% {\n left: 107%;\n right: -8%;\n }\n }\n"])), function (props) {
|
|
140
|
-
return props.
|
|
136
|
+
return props.theme.trackLineColor;
|
|
141
137
|
}, function (props) {
|
|
142
138
|
return "translateX(-".concat(props.variant === "determinate" ? 100 - props.value : 0, "%)");
|
|
143
139
|
}, function (props) {
|
|
@@ -0,0 +1,57 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
4
|
+
var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
|
|
5
|
+
var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
|
|
6
|
+
var _react = _interopRequireDefault(require("react"));
|
|
7
|
+
var _react2 = require("@testing-library/react");
|
|
8
|
+
var _axeHelper = require("../../test/accessibility/axe-helper.js");
|
|
9
|
+
var _QuickNav = _interopRequireDefault(require("./QuickNav"));
|
|
10
|
+
var links = [{
|
|
11
|
+
label: "Overview",
|
|
12
|
+
links: [{
|
|
13
|
+
label: "Introduction"
|
|
14
|
+
}]
|
|
15
|
+
}, {
|
|
16
|
+
label: "Components",
|
|
17
|
+
links: [{
|
|
18
|
+
label: "Introduction"
|
|
19
|
+
}, {
|
|
20
|
+
label: "Accordion"
|
|
21
|
+
}]
|
|
22
|
+
}, {
|
|
23
|
+
label: "Principles very very very very very very very very long",
|
|
24
|
+
links: [{
|
|
25
|
+
label: "Color very very very very very very very very long"
|
|
26
|
+
}, {
|
|
27
|
+
label: "Spacingveryveryveryveryveryveryveryverylong"
|
|
28
|
+
}, {
|
|
29
|
+
label: "Typography"
|
|
30
|
+
}]
|
|
31
|
+
}, {
|
|
32
|
+
label: "Componentsveryveryveryveryveryveryveryverylong",
|
|
33
|
+
links: [{
|
|
34
|
+
label: "Accordion"
|
|
35
|
+
}]
|
|
36
|
+
}];
|
|
37
|
+
describe("Quick Nav component accessibility tests", function () {
|
|
38
|
+
it("Should not have basic accessibility issues for icon mode", /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee() {
|
|
39
|
+
var _render, container, results;
|
|
40
|
+
return _regenerator["default"].wrap(function _callee$(_context) {
|
|
41
|
+
while (1) switch (_context.prev = _context.next) {
|
|
42
|
+
case 0:
|
|
43
|
+
_render = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_QuickNav["default"], {
|
|
44
|
+
links: links
|
|
45
|
+
})), container = _render.container;
|
|
46
|
+
_context.next = 3;
|
|
47
|
+
return (0, _axeHelper.axe)(container);
|
|
48
|
+
case 3:
|
|
49
|
+
results = _context.sent;
|
|
50
|
+
expect(results).toHaveNoViolations();
|
|
51
|
+
case 5:
|
|
52
|
+
case "end":
|
|
53
|
+
return _context.stop();
|
|
54
|
+
}
|
|
55
|
+
}, _callee);
|
|
56
|
+
})));
|
|
57
|
+
});
|
package/quick-nav/QuickNav.js
CHANGED
|
@@ -18,7 +18,7 @@ var _Typography = _interopRequireDefault(require("../typography/Typography"));
|
|
|
18
18
|
var _useTranslatedLabels = _interopRequireDefault(require("../useTranslatedLabels"));
|
|
19
19
|
var _templateObject, _templateObject2, _templateObject3, _templateObject4;
|
|
20
20
|
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
|
|
21
|
-
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u &&
|
|
21
|
+
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
|
|
22
22
|
var DxcQuickNav = function DxcQuickNav(_ref) {
|
|
23
23
|
var title = _ref.title,
|
|
24
24
|
links = _ref.links;
|
package/radio-group/Radio.js
CHANGED
|
@@ -15,7 +15,7 @@ var _useTheme = _interopRequireDefault(require("../useTheme"));
|
|
|
15
15
|
var _Flex = _interopRequireDefault(require("../flex/Flex"));
|
|
16
16
|
var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
|
|
17
17
|
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
|
|
18
|
-
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u &&
|
|
18
|
+
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
|
|
19
19
|
var DxcRadio = function DxcRadio(_ref) {
|
|
20
20
|
var label = _ref.label,
|
|
21
21
|
checked = _ref.checked,
|
|
@@ -0,0 +1,97 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
4
|
+
var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
|
|
5
|
+
var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
|
|
6
|
+
var _react = _interopRequireDefault(require("react"));
|
|
7
|
+
var _react2 = require("@testing-library/react");
|
|
8
|
+
var _axeHelper = require("../../test/accessibility/axe-helper.js");
|
|
9
|
+
var _RadioGroup = _interopRequireDefault(require("./RadioGroup.tsx"));
|
|
10
|
+
var options = [{
|
|
11
|
+
label: "Option 01",
|
|
12
|
+
value: "1"
|
|
13
|
+
}, {
|
|
14
|
+
label: "Option 02",
|
|
15
|
+
value: "2"
|
|
16
|
+
}, {
|
|
17
|
+
label: "Option 03",
|
|
18
|
+
value: "3"
|
|
19
|
+
}, {
|
|
20
|
+
label: "Option 04",
|
|
21
|
+
value: "4"
|
|
22
|
+
}, {
|
|
23
|
+
label: "Option 05",
|
|
24
|
+
value: "5",
|
|
25
|
+
disabled: true
|
|
26
|
+
}, {
|
|
27
|
+
label: "Option 06",
|
|
28
|
+
value: "6",
|
|
29
|
+
disabled: true
|
|
30
|
+
}, {
|
|
31
|
+
label: "Option 07",
|
|
32
|
+
value: "7",
|
|
33
|
+
disabled: true
|
|
34
|
+
}, {
|
|
35
|
+
label: "Option 08",
|
|
36
|
+
value: "8",
|
|
37
|
+
disabled: true
|
|
38
|
+
}, {
|
|
39
|
+
label: "Option 09",
|
|
40
|
+
value: "9"
|
|
41
|
+
}];
|
|
42
|
+
describe("Radio Group component accessibility tests", function () {
|
|
43
|
+
it("Should not have basic accessibility issues", /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee() {
|
|
44
|
+
var _render, container, results;
|
|
45
|
+
return _regenerator["default"].wrap(function _callee$(_context) {
|
|
46
|
+
while (1) switch (_context.prev = _context.next) {
|
|
47
|
+
case 0:
|
|
48
|
+
_render = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_RadioGroup["default"], {
|
|
49
|
+
label: "test-radioGroup-label",
|
|
50
|
+
options: options,
|
|
51
|
+
error: "Error",
|
|
52
|
+
defaultValue: "3",
|
|
53
|
+
helperText: "Helper Text",
|
|
54
|
+
name: "Name",
|
|
55
|
+
stacking: "row",
|
|
56
|
+
optionalItemLabel: "Optional",
|
|
57
|
+
optional: true
|
|
58
|
+
})), container = _render.container;
|
|
59
|
+
_context.next = 3;
|
|
60
|
+
return (0, _axeHelper.axe)(container);
|
|
61
|
+
case 3:
|
|
62
|
+
results = _context.sent;
|
|
63
|
+
expect(results).toHaveNoViolations();
|
|
64
|
+
case 5:
|
|
65
|
+
case "end":
|
|
66
|
+
return _context.stop();
|
|
67
|
+
}
|
|
68
|
+
}, _callee);
|
|
69
|
+
})));
|
|
70
|
+
it("Should not have basic accessibility issues for read-only mode", /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee2() {
|
|
71
|
+
var _render2, container, results;
|
|
72
|
+
return _regenerator["default"].wrap(function _callee2$(_context2) {
|
|
73
|
+
while (1) switch (_context2.prev = _context2.next) {
|
|
74
|
+
case 0:
|
|
75
|
+
_render2 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_RadioGroup["default"], {
|
|
76
|
+
label: "test-radioGroup-label",
|
|
77
|
+
options: options,
|
|
78
|
+
error: "Error",
|
|
79
|
+
defaultValue: "3",
|
|
80
|
+
helperText: "Helper Text",
|
|
81
|
+
name: "Name",
|
|
82
|
+
stacking: "row",
|
|
83
|
+
optionalItemLabel: "Optional",
|
|
84
|
+
readOnly: true
|
|
85
|
+
})), container = _render2.container;
|
|
86
|
+
_context2.next = 3;
|
|
87
|
+
return (0, _axeHelper.axe)(container);
|
|
88
|
+
case 3:
|
|
89
|
+
results = _context2.sent;
|
|
90
|
+
expect(results).toHaveNoViolations();
|
|
91
|
+
case 5:
|
|
92
|
+
case "end":
|
|
93
|
+
return _context2.stop();
|
|
94
|
+
}
|
|
95
|
+
}, _callee2);
|
|
96
|
+
})));
|
|
97
|
+
});
|
|
@@ -17,7 +17,7 @@ var _useTranslatedLabels = _interopRequireDefault(require("../useTranslatedLabel
|
|
|
17
17
|
var _Radio = _interopRequireDefault(require("./Radio"));
|
|
18
18
|
var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7;
|
|
19
19
|
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
|
|
20
|
-
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u &&
|
|
20
|
+
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
|
|
21
21
|
var getInitialFocusIndex = function getInitialFocusIndex(innerOptions, value) {
|
|
22
22
|
var initialSelectedOptionIndex = innerOptions.findIndex(function (option) {
|
|
23
23
|
return option.value === value;
|
|
@@ -158,7 +158,7 @@ var DxcRadioGroup = /*#__PURE__*/_react["default"].forwardRef(function (_ref, re
|
|
|
158
158
|
"aria-invalid": error ? true : false,
|
|
159
159
|
"aria-errormessage": error ? errorId : undefined,
|
|
160
160
|
"aria-required": !disabled && !readOnly && !optional,
|
|
161
|
-
"aria-
|
|
161
|
+
"aria-readonly": readOnly,
|
|
162
162
|
"aria-orientation": stacking === "column" ? "vertical" : "horizontal"
|
|
163
163
|
}, /*#__PURE__*/_react["default"].createElement(ValueInput, {
|
|
164
164
|
name: name,
|
|
@@ -182,6 +182,7 @@ var DxcRadioGroup = /*#__PURE__*/_react["default"].forwardRef(function (_ref, re
|
|
|
182
182
|
});
|
|
183
183
|
})), !disabled && typeof error === "string" && /*#__PURE__*/_react["default"].createElement(Error, {
|
|
184
184
|
id: errorId,
|
|
185
|
+
role: "alert",
|
|
185
186
|
"aria-live": error ? "assertive" : "off"
|
|
186
187
|
}, error)));
|
|
187
188
|
});
|
|
@@ -0,0 +1,285 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
4
|
+
var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
|
|
5
|
+
var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
|
|
6
|
+
var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
|
|
7
|
+
var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
|
|
8
|
+
var _react = _interopRequireDefault(require("react"));
|
|
9
|
+
var _react2 = require("@testing-library/react");
|
|
10
|
+
var _axeHelper = require("../../test/accessibility/axe-helper.js");
|
|
11
|
+
var _ResultsetTable = _interopRequireDefault(require("./ResultsetTable.tsx"));
|
|
12
|
+
var _disabledRules = require("../../test/accessibility/rules/specific/resultset-table/disabledRules.js");
|
|
13
|
+
// TODO: REMOVE
|
|
14
|
+
|
|
15
|
+
var disabledRules = {
|
|
16
|
+
rules: _disabledRules.disabledRules.reduce(function (rulesObj, rule) {
|
|
17
|
+
rulesObj[rule] = {
|
|
18
|
+
enabled: false
|
|
19
|
+
};
|
|
20
|
+
return rulesObj;
|
|
21
|
+
}, {})
|
|
22
|
+
};
|
|
23
|
+
var deleteIcon = /*#__PURE__*/_react["default"].createElement("svg", {
|
|
24
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
25
|
+
height: "24",
|
|
26
|
+
viewBox: "0 0 24 24",
|
|
27
|
+
width: "24"
|
|
28
|
+
}, /*#__PURE__*/_react["default"].createElement("path", {
|
|
29
|
+
fill: "currentColor",
|
|
30
|
+
d: "M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"
|
|
31
|
+
}), /*#__PURE__*/_react["default"].createElement("path", {
|
|
32
|
+
d: "M0 0h24v24H0z",
|
|
33
|
+
fill: "none"
|
|
34
|
+
}));
|
|
35
|
+
|
|
36
|
+
// Mocking DOMRect for Radix Primitive Popover
|
|
37
|
+
global.globalThis = global;
|
|
38
|
+
global.DOMRect = {
|
|
39
|
+
fromRect: function fromRect() {
|
|
40
|
+
return {
|
|
41
|
+
top: 0,
|
|
42
|
+
left: 0,
|
|
43
|
+
bottom: 0,
|
|
44
|
+
right: 0,
|
|
45
|
+
width: 0,
|
|
46
|
+
height: 0
|
|
47
|
+
};
|
|
48
|
+
}
|
|
49
|
+
};
|
|
50
|
+
global.ResizeObserver = /*#__PURE__*/function () {
|
|
51
|
+
function ResizeObserver() {
|
|
52
|
+
(0, _classCallCheck2["default"])(this, ResizeObserver);
|
|
53
|
+
}
|
|
54
|
+
(0, _createClass2["default"])(ResizeObserver, [{
|
|
55
|
+
key: "observe",
|
|
56
|
+
value: function observe() {}
|
|
57
|
+
}, {
|
|
58
|
+
key: "unobserve",
|
|
59
|
+
value: function unobserve() {}
|
|
60
|
+
}, {
|
|
61
|
+
key: "disconnect",
|
|
62
|
+
value: function disconnect() {}
|
|
63
|
+
}]);
|
|
64
|
+
return ResizeObserver;
|
|
65
|
+
}();
|
|
66
|
+
var actions = [{
|
|
67
|
+
title: "icon",
|
|
68
|
+
onClick: function onClick() {},
|
|
69
|
+
options: [{
|
|
70
|
+
value: "1",
|
|
71
|
+
label: "Amazon with a very long text"
|
|
72
|
+
}, {
|
|
73
|
+
value: "2",
|
|
74
|
+
label: "Ebay"
|
|
75
|
+
}, {
|
|
76
|
+
value: "3",
|
|
77
|
+
label: "Apple"
|
|
78
|
+
}]
|
|
79
|
+
}, {
|
|
80
|
+
icon: "https://www.freepnglogos.com/uploads/facebook-logo-design-1.png",
|
|
81
|
+
title: "icon",
|
|
82
|
+
onClick: function onClick() {}
|
|
83
|
+
}, {
|
|
84
|
+
icon: deleteIcon,
|
|
85
|
+
title: "icon",
|
|
86
|
+
onClick: function onClick() {},
|
|
87
|
+
disabled: true
|
|
88
|
+
}, {
|
|
89
|
+
icon: deleteIcon,
|
|
90
|
+
title: "icon",
|
|
91
|
+
onClick: function onClick() {}
|
|
92
|
+
}];
|
|
93
|
+
var columns = [{
|
|
94
|
+
displayValue: "Id",
|
|
95
|
+
isSortable: false
|
|
96
|
+
}, {
|
|
97
|
+
displayValue: "Name",
|
|
98
|
+
isSortable: true
|
|
99
|
+
}, {
|
|
100
|
+
displayValue: "City",
|
|
101
|
+
isSortable: false
|
|
102
|
+
}];
|
|
103
|
+
var rows = [[{
|
|
104
|
+
displayValue: "001",
|
|
105
|
+
sortValue: "001"
|
|
106
|
+
}, {
|
|
107
|
+
displayValue: "Peter",
|
|
108
|
+
sortValue: "Peter"
|
|
109
|
+
}, {
|
|
110
|
+
displayValue: "Oviedo",
|
|
111
|
+
sortValue: "Oviedo"
|
|
112
|
+
}, {
|
|
113
|
+
displayValue: /*#__PURE__*/_react["default"].createElement(_ResultsetTable["default"].ActionsCell, {
|
|
114
|
+
actions: actions
|
|
115
|
+
})
|
|
116
|
+
}], [{
|
|
117
|
+
displayValue: "002",
|
|
118
|
+
sortValue: "002"
|
|
119
|
+
}, {
|
|
120
|
+
displayValue: "Louis",
|
|
121
|
+
sortValue: "Louis"
|
|
122
|
+
}, {
|
|
123
|
+
displayValue: "Oviedo",
|
|
124
|
+
sortValue: "Oviedo"
|
|
125
|
+
}, {
|
|
126
|
+
displayValue: /*#__PURE__*/_react["default"].createElement(_ResultsetTable["default"].ActionsCell, {
|
|
127
|
+
actions: actions
|
|
128
|
+
})
|
|
129
|
+
}], [{
|
|
130
|
+
displayValue: "003",
|
|
131
|
+
sortValue: "003"
|
|
132
|
+
}, {
|
|
133
|
+
displayValue: "Lana",
|
|
134
|
+
sortValue: "Lana"
|
|
135
|
+
}, {
|
|
136
|
+
displayValue: "Albacete",
|
|
137
|
+
sortValue: "Albacete"
|
|
138
|
+
}, {
|
|
139
|
+
displayValue: /*#__PURE__*/_react["default"].createElement(_ResultsetTable["default"].ActionsCell, {
|
|
140
|
+
actions: actions
|
|
141
|
+
})
|
|
142
|
+
}], [{
|
|
143
|
+
displayValue: "004",
|
|
144
|
+
sortValue: "004"
|
|
145
|
+
}, {
|
|
146
|
+
displayValue: "Rick",
|
|
147
|
+
sortValue: "Rick"
|
|
148
|
+
}, {
|
|
149
|
+
displayValue: "Albacete",
|
|
150
|
+
sortValue: "Albacete"
|
|
151
|
+
}, {
|
|
152
|
+
displayValue: /*#__PURE__*/_react["default"].createElement(_ResultsetTable["default"].ActionsCell, {
|
|
153
|
+
actions: actions
|
|
154
|
+
})
|
|
155
|
+
}], [{
|
|
156
|
+
displayValue: "005",
|
|
157
|
+
sortValue: "005"
|
|
158
|
+
}, {
|
|
159
|
+
displayValue: "Mark",
|
|
160
|
+
sortValue: "Mark"
|
|
161
|
+
}, {
|
|
162
|
+
displayValue: "Madrid",
|
|
163
|
+
sortValue: "Madrid"
|
|
164
|
+
}, {
|
|
165
|
+
displayValue: /*#__PURE__*/_react["default"].createElement(_ResultsetTable["default"].ActionsCell, {
|
|
166
|
+
actions: actions
|
|
167
|
+
})
|
|
168
|
+
}], [{
|
|
169
|
+
displayValue: "006",
|
|
170
|
+
sortValue: "006"
|
|
171
|
+
}, {
|
|
172
|
+
displayValue: "Cris",
|
|
173
|
+
sortValue: "Cris"
|
|
174
|
+
}, {
|
|
175
|
+
displayValue: "Barcelona",
|
|
176
|
+
sortValue: "Barcelona"
|
|
177
|
+
}, {
|
|
178
|
+
displayValue: /*#__PURE__*/_react["default"].createElement(_ResultsetTable["default"].ActionsCell, {
|
|
179
|
+
actions: actions
|
|
180
|
+
})
|
|
181
|
+
}], [{
|
|
182
|
+
displayValue: "007",
|
|
183
|
+
sortValue: "007"
|
|
184
|
+
}, {
|
|
185
|
+
displayValue: "Susan",
|
|
186
|
+
sortValue: "Susan"
|
|
187
|
+
}, {
|
|
188
|
+
displayValue: "Madrid",
|
|
189
|
+
sortValue: "Madrid"
|
|
190
|
+
}, {
|
|
191
|
+
displayValue: /*#__PURE__*/_react["default"].createElement(_ResultsetTable["default"].ActionsCell, {
|
|
192
|
+
actions: actions
|
|
193
|
+
})
|
|
194
|
+
}], [{
|
|
195
|
+
displayValue: "008",
|
|
196
|
+
sortValue: "008"
|
|
197
|
+
}, {
|
|
198
|
+
displayValue: "Tina",
|
|
199
|
+
sortValue: "Tina"
|
|
200
|
+
}, {
|
|
201
|
+
displayValue: "Barcelona",
|
|
202
|
+
sortValue: "Barcelona"
|
|
203
|
+
}, {
|
|
204
|
+
displayValue: /*#__PURE__*/_react["default"].createElement(_ResultsetTable["default"].ActionsCell, {
|
|
205
|
+
actions: actions
|
|
206
|
+
})
|
|
207
|
+
}], [{
|
|
208
|
+
displayValue: "009",
|
|
209
|
+
sortValue: "009"
|
|
210
|
+
}, {
|
|
211
|
+
displayValue: "Kevin",
|
|
212
|
+
sortValue: "Kevin"
|
|
213
|
+
}, {
|
|
214
|
+
displayValue: "Oviedo",
|
|
215
|
+
sortValue: "Oviedo"
|
|
216
|
+
}, {
|
|
217
|
+
displayValue: /*#__PURE__*/_react["default"].createElement(_ResultsetTable["default"].ActionsCell, {
|
|
218
|
+
actions: actions
|
|
219
|
+
})
|
|
220
|
+
}], [{
|
|
221
|
+
displayValue: "010",
|
|
222
|
+
sortValue: "010"
|
|
223
|
+
}, {
|
|
224
|
+
displayValue: "Cosmin",
|
|
225
|
+
sortValue: "Cosmin"
|
|
226
|
+
}, {
|
|
227
|
+
displayValue: "Barcelona",
|
|
228
|
+
sortValue: "Barcelona"
|
|
229
|
+
}, {
|
|
230
|
+
displayValue: /*#__PURE__*/_react["default"].createElement(_ResultsetTable["default"].ActionsCell, {
|
|
231
|
+
actions: actions
|
|
232
|
+
})
|
|
233
|
+
}]];
|
|
234
|
+
describe("Resultset Table input component accessibility tests", function () {
|
|
235
|
+
it("Should not have basic accessibility issues", /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee() {
|
|
236
|
+
var _render, container, results;
|
|
237
|
+
return _regenerator["default"].wrap(function _callee$(_context) {
|
|
238
|
+
while (1) switch (_context.prev = _context.next) {
|
|
239
|
+
case 0:
|
|
240
|
+
_render = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_ResultsetTable["default"], {
|
|
241
|
+
columns: columns,
|
|
242
|
+
rows: rows,
|
|
243
|
+
itemsPerPage: 2,
|
|
244
|
+
margin: "medium",
|
|
245
|
+
mode: "default",
|
|
246
|
+
itemsPerPageOptions: [2, 3],
|
|
247
|
+
showGoToPage: true
|
|
248
|
+
})), container = _render.container;
|
|
249
|
+
_context.next = 3;
|
|
250
|
+
return (0, _axeHelper.axe)(container, disabledRules);
|
|
251
|
+
case 3:
|
|
252
|
+
results = _context.sent;
|
|
253
|
+
expect(results).toHaveNoViolations();
|
|
254
|
+
case 5:
|
|
255
|
+
case "end":
|
|
256
|
+
return _context.stop();
|
|
257
|
+
}
|
|
258
|
+
}, _callee);
|
|
259
|
+
})));
|
|
260
|
+
it("Should not have basic accessibility issues for reduced mode", /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee2() {
|
|
261
|
+
var _render2, container, results;
|
|
262
|
+
return _regenerator["default"].wrap(function _callee2$(_context2) {
|
|
263
|
+
while (1) switch (_context2.prev = _context2.next) {
|
|
264
|
+
case 0:
|
|
265
|
+
_render2 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_ResultsetTable["default"], {
|
|
266
|
+
columns: columns,
|
|
267
|
+
rows: rows,
|
|
268
|
+
itemsPerPage: 2,
|
|
269
|
+
margin: "medium",
|
|
270
|
+
mode: "reduced",
|
|
271
|
+
itemsPerPageOptions: [2, 3],
|
|
272
|
+
showGoToPage: true
|
|
273
|
+
})), container = _render2.container;
|
|
274
|
+
_context2.next = 3;
|
|
275
|
+
return (0, _axeHelper.axe)(container, disabledRules);
|
|
276
|
+
case 3:
|
|
277
|
+
results = _context2.sent;
|
|
278
|
+
expect(results).toHaveNoViolations();
|
|
279
|
+
case 5:
|
|
280
|
+
case "end":
|
|
281
|
+
return _context2.stop();
|
|
282
|
+
}
|
|
283
|
+
}, _callee2);
|
|
284
|
+
})));
|
|
285
|
+
});
|
|
@@ -1,4 +1,7 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
2
|
import ResultsetTablePropsType from "./types";
|
|
3
|
-
declare const DxcResultsetTable:
|
|
3
|
+
declare const DxcResultsetTable: {
|
|
4
|
+
({ columns, rows, hidePaginator, showGoToPage, itemsPerPage, itemsPerPageOptions, itemsPerPageFunction, margin, tabIndex, mode, }: ResultsetTablePropsType): JSX.Element;
|
|
5
|
+
ActionsCell: ({ actions }: import("../table/types").ActionCellsPropsType) => JSX.Element;
|
|
6
|
+
};
|
|
4
7
|
export default DxcResultsetTable;
|