@thecb/components 10.7.5-beta.2 → 10.7.5-beta.3

package/dist/index.cjs.js

@@ -39331,9 +39331,7 @@ var ToggleSwitch = function ToggleSwitch(_ref10) {
     _ref10$labelStyles = _ref10.labelStyles,
     labelStyles = _ref10$labelStyles === void 0 ? "" : _ref10$labelStyles,
     _ref10$labelAs = _ref10.labelAs,
-    labelAs = _ref10$labelAs === void 0 ? "h4" : _ref10$labelAs,
-    _ref10$srOnlyLabel = _ref10.srOnlyLabel,
-    srOnlyLabel = _ref10$srOnlyLabel === void 0 ? "" : _ref10$srOnlyLabel,
+    labelAs = _ref10$labelAs === void 0 ? "label" : _ref10$labelAs,
     themeValues = _ref10.themeValues,
     isMobile = _ref10.isMobile,
     dataQa = _ref10.dataQa,
@@ -39398,7 +39396,7 @@ var ToggleSwitch = function ToggleSwitch(_ref10) {
     }
   };
   return /*#__PURE__*/React__default.createElement(Box, {
-    padding: "0",
+    padding: "0.5rem",
     extraStyles: "\n        margin: 0 0.5rem;\n        ".concat(labelLeft ? themeValues.leftLabelStyles : themeValues.rightLabelStyles).concat(extraStyles)
   }, /*#__PURE__*/React__default.createElement(Center, null, /*#__PURE__*/React__default.createElement(Cluster, {
     justify: "space-between",
@@ -39431,18 +39429,18 @@ var ToggleSwitch = function ToggleSwitch(_ref10) {
     pose: isOn ? "on" : "off",
     tabIndex: disabled ? -1 : 0,
     disabled: disabled,
-    isMobile: isMobile
+    isMobile: isMobile,
+    tabindex: "0"
   }, /*#__PURE__*/React__default.createElement(ToggleSwitchRing, {
     isMobile: isMobile
   })))), label && /*#__PURE__*/React__default.createElement(Box, {
     as: labelAs,
+    "aria-label": "".concat(name, ": ").concat(label),
     extraStyles: "\n                font-weight: ".concat(FONT_WEIGHT_SEMIBOLD, ";\n                color: ").concat(CHARADE_GREY, ";\n                margin: 0 0 0 0.25rem; \n                position: relative; \n                bottom: 1px; \n                display: inline-block; \n                ").concat(labelStyles),
     id: "".concat(nameId, "-label"),
     htmlFor: labelAs === "label" ? nameId : null,
     padding: "0"
-  }, srOnlyLabel && /*#__PURE__*/React__default.createElement("span", {
-    style: SCREEN_READER_ONLY
-  }, srOnlyLabel), label))));
+  }, label))));
 };
 var ToggleSwitch$1 = themeComponent(ToggleSwitch, "ToggleSwitch", fallbackValues$y);