@dxc-technology/halstack-react 0.0.0-59b9187 → 0.0.0-5a4d834

package/select/Option.js

@@ -34,17 +34,22 @@ var Option = function Option(_ref) {
     visualFocused: visualFocused,
     selected: isSelected,
     role: "option",
-    "aria-selected": isSelected
+    "aria-selected": !multiple ? isSelected : undefined
   }, /*#__PURE__*/_react["default"].createElement(StyledOption, {
     visualFocused: visualFocused,
     selected: isSelected,
     last: isLastOption,
     grouped: isGroupedOption,
     multiple: multiple
-  }, multiple && /*#__PURE__*/_react["default"].createElement(_Checkbox["default"], {
+  }, multiple && /*#__PURE__*/_react["default"].createElement("div", {
+    style: {
+      display: "flex",
+      pointerEvents: "none"
+    }
+  }, /*#__PURE__*/_react["default"].createElement(_Checkbox["default"], {
     checked: isSelected,
     tabIndex: -1
-  }), option.icon && /*#__PURE__*/_react["default"].createElement(OptionIcon, {
+  })), option.icon && /*#__PURE__*/_react["default"].createElement(OptionIcon, {
     grouped: isGroupedOption,
     multiple: multiple
   }, typeof option.icon === "string" ? /*#__PURE__*/_react["default"].createElement(_Icon["default"], {
@@ -59,7 +64,7 @@ var Option = function Option(_ref) {
     icon: "done"
   })))));
 };
-var OptionItem = _styledComponents["default"].li(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n  padding: 0 0.5rem;\n  box-shadow: inset 0 0 0 2px transparent;\n  ", "\n  ", ";\n  line-height: 1.715em;\n  cursor: pointer;\n\n  &:hover {\n    ", ";\n  }\n  &:active {\n    ", ";\n  }\n"])), function (props) {
+var OptionItem = _styledComponents["default"].li(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n  padding: 0 0.5rem;\n  box-shadow: inset 0 0 0 2px transparent;\n  ", "\n  ", ";\n  cursor: pointer;\n\n  &:hover {\n    ", ";\n  }\n  &:active {\n    ", ";\n  }\n"])), function (props) {
   return props.visualFocused && "box-shadow: inset 0 0 0 2px ".concat(props.theme.focusListOptionBorderColor, ";");
 }, function (props) {
   return props.selected && "background-color: ".concat(props.theme.selectedListOptionBackgroundColor);
@@ -68,21 +73,21 @@ var OptionItem = _styledComponents["default"].li(_templateObject || (_templateOb
 }, function (props) {
   return props.selected ? "background-color: ".concat(props.theme.selectedActiveListOptionBackgroundColor, ";") : "background-color: ".concat(props.theme.unselectedActiveListOptionBackgroundColor, ";");
 });
-var StyledOption = _styledComponents["default"].span(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["\n  display: flex;\n  padding: 0.25rem 0.5rem 0.188rem 0;\n  min-height: 24px;\n  align-items: center;\n  ", "\n  ", ";\n"])), function (props) {
+var StyledOption = _styledComponents["default"].span(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["\n  box-sizing: border-box;\n  display: flex;\n  align-items: center;\n  height: 32px;\n  padding: 4px 8px 4px 0;\n  ", "\n  ", ";\n"])), function (props) {
   return props.grouped && props.multiple && "padding-left: 16px;";
 }, function (props) {
   return props.last || props.visualFocused || props.selected ? "border-bottom: 1px solid transparent" : "border-bottom: 1px solid ".concat(props.theme.listOptionDividerColor);
 });
-var OptionIcon = _styledComponents["default"].span(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["\n  display: flex;\n  padding: 0.125rem;\n  margin-left: ", ";\n  color: ", ";\n\n  svg {\n    height: 24px;\n    width: 24px;\n  }\n  font-size: 24px;\n"])), function (props) {
+var OptionIcon = _styledComponents["default"].span(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["\n  margin-left: ", ";\n  display: grid;\n  place-items: center;\n  color: ", ";\n  font-size: 24px;\n  svg {\n    height: 24px;\n    width: 24px;\n  }\n"])), function (props) {
   return props.grouped && !props.multiple ? "16px" : "8px";
 }, function (props) {
   return props.theme.listOptionIconColor;
 });
-var OptionContent = _styledComponents["default"].span(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["\n  display: flex;\n  justify-content: space-between;\n  gap: 0.25rem;\n  width: 100%;\n  overflow: hidden;\n  margin-left: ", ";\n"])), function (props) {
+var OptionContent = _styledComponents["default"].span(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["\n  margin-left: ", ";\n  display: flex;\n  justify-content: space-between;\n  gap: 0.25rem;\n  width: 100%;\n  overflow: hidden;\n"])), function (props) {
   return props.grouped && !props.multiple && !props.hasIcon ? "16px" : "8px";
 });
 var OptionLabel = _styledComponents["default"].span(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2["default"])(["\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n"])));
 var OptionSelectedIndicator = _styledComponents["default"].span(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2["default"])(["\n  display: flex;\n  align-items: center;\n  color: ", ";\n  font-size: 16px;\n"])), function (props) {
   return props.theme.selectedListOptionIconColor;
 });
-var _default = exports["default"] = /*#__PURE__*/_react["default"].memo(Option);
+var _default = exports["default"] = Option;

package/select/Select.accessibility.test.d.ts

@@ -0,0 +1 @@
+export {};

package/select/Select.accessibility.test.js

@@ -7,9 +7,20 @@ var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/cl
 var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
 var _react = _interopRequireDefault(require("react"));
 var _react2 = require("@testing-library/react");
-var _jestAxe = require("jest-axe");
-var _Select = _interopRequireDefault(require("./Select.tsx"));
-var _Flex = _interopRequireDefault(require("../flex/Flex.tsx"));
+var _axeHelper = require("../../test/accessibility/axe-helper.js");
+var _Select = _interopRequireDefault(require("./Select"));
+var _Flex = _interopRequireDefault(require("../flex/Flex"));
+var _disabledRules = require("../../test/accessibility/rules/specific/select/disabledRules.js");
+// TODO: REMOVE
+
+var disabledRules = {
+  rules: _disabledRules.disabledRules.reduce(function (rulesObj, rule) {
+    rulesObj[rule] = {
+      enabled: false
+    };
+    return rulesObj;
+  }, {})
+};
 var iconSVG = /*#__PURE__*/_react["default"].createElement("svg", {
   xmlns: "http://www.w3.org/2000/svg",
   height: "24px",
@@ -119,7 +130,7 @@ global.ResizeObserver = /*#__PURE__*/function () {
   function ResizeObserver() {
     (0, _classCallCheck2["default"])(this, ResizeObserver);
   }
-  (0, _createClass2["default"])(ResizeObserver, [{
+  return (0, _createClass2["default"])(ResizeObserver, [{
     key: "observe",
     value: function observe() {}
   }, {
@@ -129,7 +140,6 @@ global.ResizeObserver = /*#__PURE__*/function () {
     key: "disconnect",
     value: function disconnect() {}
   }]);
-  return ResizeObserver;
 }();
 describe("Select component accessibility tests", function () {
   it("Should not have basic accessibility issues", /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee() {
@@ -143,7 +153,7 @@ describe("Select component accessibility tests", function () {
             helperText: "test-select-helper-text",
             placeholder: "Example text",
             options: single_options,
-            defaultValue: 1,
+            defaultValue: "1",
             margin: "medium",
             name: "Name",
             size: "medium",
@@ -162,7 +172,7 @@ describe("Select component accessibility tests", function () {
             optional: true
           }))), baseElement = _render.baseElement;
           _context.next = 3;
-          return (0, _jestAxe.axe)(baseElement);
+          return (0, _axeHelper.axe)(baseElement, disabledRules);
         case 3:
           results = _context.sent;
           expect(results).toHaveNoViolations();
@@ -204,7 +214,7 @@ describe("Select component accessibility tests", function () {
             disabled: true
           }))), baseElement = _render2.baseElement;
           _context2.next = 3;
-          return (0, _jestAxe.axe)(baseElement);
+          return (0, _axeHelper.axe)(baseElement, disabledRules);
         case 3:
           results = _context2.sent;
           expect(results).toHaveNoViolations();