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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@thecb/components",
-  "version": "10.7.5-beta.1",
+  "version": "10.7.5-beta.3",
   "description": "Common lib for CityBase react components",
   "main": "dist/index.cjs.js",
   "typings": "dist/index.d.ts",

package/src/components/atoms/toggle-switch/ToggleSwitch.js

@@ -4,10 +4,7 @@ import posed from "react-pose";
 import { fallbackValues } from "./ToggleSwitch.theme";
 import { themeComponent } from "../../../util/themeUtils";
 import { Box, Center, Cover, Cluster } from "../layouts";
-import {
-  FONT_WEIGHT_SEMIBOLD,
-  SCREEN_READER_ONLY
-} from "../../../constants/style_constants";
+import { FONT_WEIGHT_SEMIBOLD } from "../../../constants/style_constants";
 import { CHARADE_GREY } from "../../../constants/colors";
 import { ENTER } from "../../../constants/keyboard";
 import { noop } from "../../../util/general";
@@ -59,8 +56,7 @@ const ToggleSwitch = ({
   label = null,
   labelLeft = false,
   labelStyles = "",
-  labelAs = "h4",
-  srOnlyLabel = "",
+  labelAs = "label",
   themeValues,
   isMobile,
   dataQa,
@@ -138,7 +134,7 @@ const ToggleSwitch = ({
 
   return (
     <Box
-      padding="0"
+      padding="0.5rem"
       extraStyles={`
         margin: 0 0.5rem;
         ${
@@ -179,6 +175,7 @@ const ToggleSwitch = ({
                 tabIndex={disabled ? -1 : 0}
                 disabled={disabled}
                 isMobile={isMobile}
+                tabindex="0"
               >
                 <ToggleSwitchRing isMobile={isMobile} />
               </VisibleSwitch>
@@ -187,6 +184,7 @@ const ToggleSwitch = ({
           {label && (
             <Box
               as={labelAs}
+              aria-label={`${name}: ${label}`}
               extraStyles={`
                 font-weight: ${FONT_WEIGHT_SEMIBOLD};
                 color: ${CHARADE_GREY};
@@ -199,9 +197,6 @@ const ToggleSwitch = ({
               htmlFor={labelAs === "label" ? nameId : null}
               padding="0"
             >
-              {srOnlyLabel && (
-                <span style={SCREEN_READER_ONLY}>{srOnlyLabel}</span>
-              )}
               {label}
             </Box>
           )}