@ovotech/element-native 4.1.1 → 4.1.2-canary-78bef7d-270

package/dist/components/ActionList/ActionList.js

@@ -48,11 +48,11 @@ var ActionList = function (_a) {
 exports.ActionList = ActionList;
 var ActionWrapper = (0, react_1.forwardRef)(function (_a, ref) {
     var children = _a.children, accessibilityRole = _a.accessibilityRole, _b = _a.activeOpacity, activeOpacity = _b === void 0 ? 0.75 : _b, fullWidth = _a.fullWidth, _c = _a.hasBorder, hasBorder = _c === void 0 ? false : _c, _d = _a.inverted, inverted = _d === void 0 ? false : _d, _e = _a.inline, inline = _e === void 0 ? false : _e, inList = _a.inList, onPress = _a.onPress, testID = _a.testID, rest = __rest(_a, ["children", "accessibilityRole", "activeOpacity", "fullWidth", "hasBorder", "inverted", "inline", "inList", "onPress", "testID"]);
-    return ((0, jsx_runtime_1.jsx)(styled_1.StyledActionWrapper, __assign({ ref: ref, hasBorder: hasBorder, inverted: inverted, testID: testID }, rest, { children: (0, jsx_runtime_1.jsx)(react_native_1.TouchableOpacity, { hitSlop: inline ? 24 : null, activeOpacity: activeOpacity, accessibilityRole: accessibilityRole, onPress: onPress, children: (0, jsx_runtime_1.jsx)(styled_1.StyledActionInner, { fullWidth: fullWidth, inList: inList, inline: inline, children: children }) }) })));
+    return ((0, jsx_runtime_1.jsx)(styled_1.StyledActionWrapper, __assign({ ref: ref, hasBorder: hasBorder, inverted: inverted, testID: testID }, rest, { children: (0, jsx_runtime_1.jsx)(react_native_1.TouchableOpacity, { hitSlop: inline ? 24 : null, activeOpacity: activeOpacity, accessible: true, accessibilityRole: accessibilityRole, onPress: onPress, children: (0, jsx_runtime_1.jsx)(styled_1.StyledActionInner, { fullWidth: fullWidth, inList: inList, inline: inline, children: children }) }) })));
 });
 var Action = (0, react_1.forwardRef)(function (_a, ref) {
     var _b = _a.accessibilityRole, accessibilityRole = _b === void 0 ? 'link' : _b, children = _a.children, _c = _a.fullWidth, fullWidth = _c === void 0 ? false : _c, _d = _a.inverted, inverted = _d === void 0 ? false : _d, _e = _a.inline, inline = _e === void 0 ? false : _e, onPress = _a.onPress, testID = _a.testID, iconLeft = _a.iconLeft, iconRight = _a.iconRight, rest = __rest(_a, ["accessibilityRole", "children", "fullWidth", "inverted", "inline", "onPress", "testID", "iconLeft", "iconRight"]);
     var smallAndUp = (0, hooks_1.useBreakpoint)().smallAndUp;
-    return ((0, jsx_runtime_1.jsxs)(ActionWrapper, __assign({ ref: ref, accessibilityRole: accessibilityRole, fullWidth: fullWidth, inverted: inverted, inline: inline, onPress: onPress, testID: testID }, rest, { children: [iconLeft ? ((0, jsx_runtime_1.jsx)(styled_1.StyledLeftIcon, { inverted: inverted, name: iconLeft, size: 16 })) : null, typeof children === 'string' ? ((0, jsx_runtime_1.jsx)(styled_1.StyledActionText, { smallAndUp: smallAndUp, inverted: inverted, inList: rest === null || rest === void 0 ? void 0 : rest.inList, children: children })) : ((0, jsx_runtime_1.jsx)(styled_1.StyledActionNodeWrapper, { children: children })), iconRight ? ((0, jsx_runtime_1.jsx)(styled_1.StyledRightIcon, { inverted: inverted, name: iconRight, size: 16 })) : null] })));
+    return ((0, jsx_runtime_1.jsxs)(ActionWrapper, __assign({ ref: ref, accessible: true, accessibilityRole: accessibilityRole, fullWidth: fullWidth, inverted: inverted, inline: inline, onPress: onPress, testID: testID }, rest, { children: [iconLeft ? ((0, jsx_runtime_1.jsx)(styled_1.StyledLeftIcon, { inverted: inverted, name: iconLeft, size: 16 })) : null, typeof children === 'string' ? ((0, jsx_runtime_1.jsx)(styled_1.StyledActionText, { smallAndUp: smallAndUp, inverted: inverted, inList: rest === null || rest === void 0 ? void 0 : rest.inList, children: children })) : ((0, jsx_runtime_1.jsx)(styled_1.StyledActionNodeWrapper, { children: children })), iconRight ? ((0, jsx_runtime_1.jsx)(styled_1.StyledRightIcon, { inverted: inverted, name: iconRight, size: 16 })) : null] })));
 });
 exports.Action = Action;

package/dist/components/CTAButton/CTAButton.js

@@ -59,7 +59,7 @@ var Icon_1 = require("../Icon/Icon");
 var StyledCTAWrapper = styled_native_1.default.TouchableOpacity(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  align-self: flex-start;\n  flex-direction: row;\n  align-items: flex-start;\n"], ["\n  align-self: flex-start;\n  flex-direction: row;\n  align-items: flex-start;\n"])));
 var CTAButtonWrapper = function (_a) {
     var children = _a.children, _b = _a.accessibilityRole, accessibilityRole = _b === void 0 ? 'button' : _b, _c = _a.activeOpacity, activeOpacity = _c === void 0 ? 0.8 : _c, rest = __rest(_a, ["children", "accessibilityRole", "activeOpacity"]);
-    return ((0, jsx_runtime_1.jsx)(StyledCTAWrapper, __assign({ accessibilityRole: accessibilityRole, activeOpacity: activeOpacity }, rest, { children: children })));
+    return ((0, jsx_runtime_1.jsx)(StyledCTAWrapper, __assign({ accessible: true, accessibilityRole: accessibilityRole, activeOpacity: activeOpacity }, rest, { children: children })));
 };
 var StyledInner = styled_native_1.default.View(function (_a) {
     var _b = _a.theme, core = _b.core, component = _b.component, fullWidth = _a.fullWidth, variant = _a.variant, inverted = _a.inverted;

package/dist/components/Checkbox/Checkbox.js

@@ -74,7 +74,7 @@ var StyledWrapper = styled_native_1.default.View(templateObject_1 || (templateOb
 var Checkbox = (0, react_1.forwardRef)(function (_a, ref) {
     var label = _a.label, hint = _a.hint, error = _a.error, checked = _a.checked, optional = _a.optional, invalid = _a.invalid, _b = _a.activeOpacity, activeOpacity = _b === void 0 ? 0.8 : _b, testID = _a.testID, rest = __rest(_a, ["label", "hint", "error", "checked", "optional", "invalid", "activeOpacity", "testID"]);
     var hasError = !!error;
-    return ((0, jsx_runtime_1.jsx)(FormGroup_1.FormGroup, { error: hasError, children: (0, jsx_runtime_1.jsxs)(Stack_1.Stack, { spaceBetween: 1, children: [error ? (0, jsx_runtime_1.jsx)(ErrorText_1.ErrorText, { children: error }) : null, (0, jsx_runtime_1.jsx)(react_native_1.TouchableOpacity, __assign({ ref: ref, accessibilityRole: "checkbox", activeOpacity: activeOpacity, accessibilityState: { checked: checked } }, rest, { children: (0, jsx_runtime_1.jsxs)(StyledWrapper, { children: [(0, jsx_runtime_1.jsx)(Input, { checked: checked, invalid: hasError || invalid, testID: testID }), (0, jsx_runtime_1.jsxs)(react_native_1.View, { style: { flexShrink: 1 }, children: [(0, jsx_runtime_1.jsxs)(CheckLabelText, { children: [label, optional ? ' (optional)' : null] }), hint ? (0, jsx_runtime_1.jsx)(HintText_1.HintText, { children: hint }) : null] })] }) }))] }) }));
+    return ((0, jsx_runtime_1.jsx)(FormGroup_1.FormGroup, { error: hasError, children: (0, jsx_runtime_1.jsxs)(Stack_1.Stack, { spaceBetween: 1, children: [error ? (0, jsx_runtime_1.jsx)(ErrorText_1.ErrorText, { children: error }) : null, (0, jsx_runtime_1.jsx)(react_native_1.TouchableOpacity, __assign({ ref: ref, accessible: true, accessibilityRole: "checkbox", activeOpacity: activeOpacity, accessibilityState: { checked: checked } }, rest, { children: (0, jsx_runtime_1.jsxs)(StyledWrapper, { children: [(0, jsx_runtime_1.jsx)(Input, { checked: checked, invalid: hasError || invalid, testID: testID }), (0, jsx_runtime_1.jsxs)(react_native_1.View, { style: { flexShrink: 1 }, children: [(0, jsx_runtime_1.jsxs)(CheckLabelText, { children: [label, optional ? ' (optional)' : null] }), hint ? (0, jsx_runtime_1.jsx)(HintText_1.HintText, { children: hint }) : null] })] }) }))] }) }));
 });
 exports.Checkbox = Checkbox;
 var templateObject_1;

package/dist/components/Heading1/Heading1.js

@@ -67,7 +67,7 @@ var StyledHeading1 = styled_native_1.default.Text(function (_a) {
 var Heading1 = function (_a) {
     var _b = _a.accessibilityRole, accessibilityRole = _b === void 0 ? 'header' : _b, rest = __rest(_a, ["accessibilityRole"]);
     var breakpoints = (0, hooks_1.useBreakpoint)();
-    return ((0, jsx_runtime_1.jsx)(StyledHeading1, __assign({ accessibilityRole: accessibilityRole }, breakpoints, rest)));
+    return ((0, jsx_runtime_1.jsx)(StyledHeading1, __assign({ accessible: true, accessibilityRole: accessibilityRole }, breakpoints, rest)));
 };
 exports.Heading1 = Heading1;
 var templateObject_1;

package/dist/components/Heading2/Heading2.js

@@ -67,7 +67,7 @@ var StyledHeading2 = styled_native_1.default.Text(function (_a) {
 var Heading2 = function (_a) {
     var _b = _a.accessibilityRole, accessibilityRole = _b === void 0 ? 'header' : _b, rest = __rest(_a, ["accessibilityRole"]);
     var breakpoints = (0, hooks_1.useBreakpoint)();
-    return ((0, jsx_runtime_1.jsx)(StyledHeading2, __assign({ accessibilityRole: accessibilityRole }, breakpoints, rest)));
+    return ((0, jsx_runtime_1.jsx)(StyledHeading2, __assign({ accessible: true, accessibilityRole: accessibilityRole }, breakpoints, rest)));
 };
 exports.Heading2 = Heading2;
 var templateObject_1;

package/dist/components/Heading3/Heading3.js

@@ -67,7 +67,7 @@ var StyledHeading3 = styled_native_1.default.Text(function (_a) {
 var Heading3 = function (_a) {
     var _b = _a.accessibilityRole, accessibilityRole = _b === void 0 ? 'header' : _b, rest = __rest(_a, ["accessibilityRole"]);
     var breakpoints = (0, hooks_1.useBreakpoint)();
-    return ((0, jsx_runtime_1.jsx)(StyledHeading3, __assign({ accessibilityRole: accessibilityRole }, breakpoints, rest)));
+    return ((0, jsx_runtime_1.jsx)(StyledHeading3, __assign({ accessible: true, accessibilityRole: accessibilityRole }, breakpoints, rest)));
 };
 exports.Heading3 = Heading3;
 var templateObject_1;

package/dist/components/Heading4/Heading4.js

@@ -67,7 +67,7 @@ var StyledHeading4 = styled_native_1.default.Text(function (_a) {
 var Heading4 = function (_a) {
     var _b = _a.accessibilityRole, accessibilityRole = _b === void 0 ? 'header' : _b, rest = __rest(_a, ["accessibilityRole"]);
     var breakpoints = (0, hooks_1.useBreakpoint)();
-    return ((0, jsx_runtime_1.jsx)(StyledHeading4, __assign({ accessibilityRole: accessibilityRole }, breakpoints, rest)));
+    return ((0, jsx_runtime_1.jsx)(StyledHeading4, __assign({ accessible: true, accessibilityRole: accessibilityRole }, breakpoints, rest)));
 };
 exports.Heading4 = Heading4;
 var templateObject_1;

package/dist/components/PasswordInput/PasswordVisibilityToggle.js

@@ -19,7 +19,7 @@ exports.useTogglePasswordVisibility = useTogglePasswordVisibility;
 var PasswordVisibilityToggle = function (_a) {
     var iconName = _a.iconName, visibilityToggleLabel = _a.visibilityToggleLabel, handlePasswordVisibility = _a.handlePasswordVisibility;
     var _b = (0, react_1.useState)(false), focused = _b[0], setFocused = _b[1];
-    return ((0, jsx_runtime_1.jsx)(PasswordInput_styled_1.StyledPressable, { testID: "password-input-visibility-toggle", focused: focused, accessibilityRole: "button", accessibilityLabel: visibilityToggleLabel, onPress: handlePasswordVisibility, hitSlop: 16, onFocus: function () {
+    return ((0, jsx_runtime_1.jsx)(PasswordInput_styled_1.StyledPressable, { testID: "password-input-visibility-toggle", focused: focused, accessible: true, accessibilityRole: "button", accessibilityLabel: visibilityToggleLabel, onPress: handlePasswordVisibility, hitSlop: 16, onFocus: function () {
             setFocused(true);
         }, onBlur: function () {
             setFocused(false);

package/dist/components/Radio/Radio.js

@@ -63,6 +63,6 @@ var Radio = (0, react_1.forwardRef)(function (_a, ref) {
     value = _a.value, // "value" is needed for RadioGroup, but isn't actually used in the radio anywhere
     _b = _a.activeOpacity, // "value" is needed for RadioGroup, but isn't actually used in the radio anywhere
     activeOpacity = _b === void 0 ? 0.8 : _b, testID = _a.testID, rest = __rest(_a, ["label", "hint", "checked", "invalid", "value", "activeOpacity", "testID"]);
-    return ((0, jsx_runtime_1.jsx)(react_native_1.TouchableOpacity, __assign({ ref: ref, accessibilityRole: "radio", activeOpacity: activeOpacity, accessibilityState: { checked: checked } }, rest, { children: (0, jsx_runtime_1.jsxs)(StyledWrapper, { children: [(0, jsx_runtime_1.jsx)(Input, { checked: checked, invalid: invalid, testID: testID }), (0, jsx_runtime_1.jsxs)(react_native_1.View, { style: { flexShrink: 1 }, children: [(0, jsx_runtime_1.jsx)(LabelText_1.LabelText, { children: label }), hint ? (0, jsx_runtime_1.jsx)(HintText_1.HintText, { children: hint }) : null] })] }) })));
+    return ((0, jsx_runtime_1.jsx)(react_native_1.TouchableOpacity, __assign({ ref: ref, accessible: true, accessibilityRole: "radio", activeOpacity: activeOpacity, accessibilityState: { checked: checked } }, rest, { children: (0, jsx_runtime_1.jsxs)(StyledWrapper, { children: [(0, jsx_runtime_1.jsx)(Input, { checked: checked, invalid: invalid, testID: testID }), (0, jsx_runtime_1.jsxs)(react_native_1.View, { style: { flexShrink: 1 }, children: [(0, jsx_runtime_1.jsx)(LabelText_1.LabelText, { children: label }), hint ? (0, jsx_runtime_1.jsx)(HintText_1.HintText, { children: hint }) : null] })] }) })));
 });
 exports.Radio = Radio;

package/dist/components/Radio/RadioField.js

@@ -36,7 +36,7 @@ var RadioField = function (_a) {
     var label = _a.label, hint = _a.hint, error = _a.error, children = _a.children, _b = _a.optional, optional = _b === void 0 ? false : _b, value = _a.value, onValueChange = _a.onValueChange, rest = __rest(_a, ["label", "hint", "error", "children", "optional", "value", "onValueChange"]);
     var hasError = !!error;
     var validChildren = (0, utils_1.getValidChildren)(children);
-    return ((0, jsx_runtime_1.jsx)(FormGroup_1.FormGroup, __assign({}, rest, { error: hasError, children: (0, jsx_runtime_1.jsxs)(Stack_1.Stack, { spaceBetween: 1, children: [(0, jsx_runtime_1.jsxs)(react_native_1.View, { children: [(0, jsx_runtime_1.jsxs)(LabelText_1.LabelText, { children: [label, optional ? ' (optional)' : null] }), hint ? (0, jsx_runtime_1.jsx)(HintText_1.HintText, { children: hint }) : null, error ? (0, jsx_runtime_1.jsx)(ErrorText_1.ErrorText, { children: error }) : null] }), (0, jsx_runtime_1.jsx)(react_native_1.View, { accessibilityRole: "radiogroup", children: react_1.Children.map(validChildren, function (child) {
+    return ((0, jsx_runtime_1.jsx)(FormGroup_1.FormGroup, __assign({}, rest, { error: hasError, children: (0, jsx_runtime_1.jsxs)(Stack_1.Stack, { spaceBetween: 1, children: [(0, jsx_runtime_1.jsxs)(react_native_1.View, { children: [(0, jsx_runtime_1.jsxs)(LabelText_1.LabelText, { children: [label, optional ? ' (optional)' : null] }), hint ? (0, jsx_runtime_1.jsx)(HintText_1.HintText, { children: hint }) : null, error ? (0, jsx_runtime_1.jsx)(ErrorText_1.ErrorText, { children: error }) : null] }), (0, jsx_runtime_1.jsx)(react_native_1.View, { accessible: true, accessibilityRole: "radiogroup", children: react_1.Children.map(validChildren, function (child) {
                         return (0, react_1.cloneElement)(child, {
                             invalid: hasError ? true : child.props.invalid,
                             checked: child.props.checked != null

package/dist/components/RadioCard/RadioCard.js

@@ -67,6 +67,6 @@ var StyledWrapper = styled_native_1.default.View(function (_a) {
 });
 exports.RadioCard = (0, react_1.forwardRef)(function (_a, ref) {
     var label = _a.label, checked = _a.checked, invalid = _a.invalid, _b = _a.activeOpacity, activeOpacity = _b === void 0 ? 0.8 : _b, testID = _a.testID, _c = _a.hasInput, hasInput = _c === void 0 ? true : _c, rest = __rest(_a, ["label", "checked", "invalid", "activeOpacity", "testID", "hasInput"]);
-    return ((0, jsx_runtime_1.jsx)(react_native_1.TouchableOpacity, __assign({ ref: ref, accessibilityRole: "radio", activeOpacity: activeOpacity, accessibilityState: { checked: checked } }, rest, { children: (0, jsx_runtime_1.jsxs)(StyledWrapper, { checked: checked, invalid: invalid, children: [typeof label === 'string' ? (0, jsx_runtime_1.jsx)(LabelText_1.LabelText, { children: label }) : label, hasInput ? ((0, jsx_runtime_1.jsx)(Input, { checked: checked, invalid: invalid, testID: testID })) : null] }) })));
+    return ((0, jsx_runtime_1.jsx)(react_native_1.TouchableOpacity, __assign({ ref: ref, accessible: true, accessibilityRole: "radio", activeOpacity: activeOpacity, accessibilityState: { checked: checked } }, rest, { children: (0, jsx_runtime_1.jsxs)(StyledWrapper, { checked: checked, invalid: invalid, children: [typeof label === 'string' ? (0, jsx_runtime_1.jsx)(LabelText_1.LabelText, { children: label }) : label, hasInput ? ((0, jsx_runtime_1.jsx)(Input, { checked: checked, invalid: invalid, testID: testID })) : null] }) })));
 });
 var templateObject_1;

package/dist/components/SelectField/Select.js

@@ -90,7 +90,7 @@ var Select = function (_a) {
         label: "-- ".concat(noOptionMessage, " --"),
         value: 'default',
     };
-    return ((0, jsx_runtime_1.jsxs)(react_native_1.View, { children: [(0, jsx_runtime_1.jsxs)(SelectInput, { testID: testID, hasError: hasError, onPress: function () { return setOpen(!isOpen); }, children: [(0, jsx_runtime_1.jsx)(P_1.P, { style: { marginTop: 0, marginBottom: 0 }, children: selected.value === 'default' ? '' : selected.label }), (0, jsx_runtime_1.jsx)(Icon_1.Icon, { name: "chevron-down", size: 16, style: { marginLeft: 'auto' } })] }), (0, jsx_runtime_1.jsx)(react_native_1.Modal, { transparent: true, visible: isOpen, animationType: "fade", onRequestClose: function () { return setOpen(false); }, children: (0, jsx_runtime_1.jsx)(DropdownWrapper, { children: (0, jsx_runtime_1.jsx)(DropdownContainer, { children: (0, jsx_runtime_1.jsxs)(react_native_1.ScrollView, { nestedScrollEnabled: true, children: [(0, jsx_runtime_1.jsxs)(SelectOption, { accessibilityRole: "radio", onPress: function () { return handleOptionPress(requiredOption); }, children: [(0, jsx_runtime_1.jsx)(StyledP, { children: (0, jsx_runtime_1.jsx)(Strong_1.Strong, { children: requiredOption.label }) }), (0, jsx_runtime_1.jsx)(Radio, { isChecked: selected.value === requiredOption.value, children: (0, jsx_runtime_1.jsx)(RadioDot, { isChecked: selected.value === requiredOption.value }) })] }), Object.keys(optionsByCategories).map(function (category) { return ((0, jsx_runtime_1.jsxs)(react_1.Fragment, { children: [category !== 'undefined' ? ((0, jsx_runtime_1.jsx)(StyledCategory, { children: category })) : null, optionsByCategories[category].map(function (option, i) { return ((0, jsx_runtime_1.jsxs)(SelectOption, { accessibilityRole: "radio", isLastOption: i === optionsByCategories[category].length - 1, onPress: function () { return handleOptionPress(option); }, children: [(0, jsx_runtime_1.jsx)(StyledP, { children: (0, jsx_runtime_1.jsx)(Strong_1.Strong, { children: option.label }) }), (0, jsx_runtime_1.jsx)(Radio, { isChecked: selected.value === option.value, children: (0, jsx_runtime_1.jsx)(RadioDot, { isChecked: selected.value === option.value }) })] }, option.label)); })] }, category)); })] }) }) }) })] }));
+    return ((0, jsx_runtime_1.jsxs)(react_native_1.View, { children: [(0, jsx_runtime_1.jsxs)(SelectInput, { testID: testID, hasError: hasError, onPress: function () { return setOpen(!isOpen); }, children: [(0, jsx_runtime_1.jsx)(P_1.P, { style: { marginTop: 0, marginBottom: 0 }, children: selected.value === 'default' ? '' : selected.label }), (0, jsx_runtime_1.jsx)(Icon_1.Icon, { name: "chevron-down", size: 16, style: { marginLeft: 'auto' } })] }), (0, jsx_runtime_1.jsx)(react_native_1.Modal, { transparent: true, visible: isOpen, animationType: "fade", onRequestClose: function () { return setOpen(false); }, children: (0, jsx_runtime_1.jsx)(DropdownWrapper, { children: (0, jsx_runtime_1.jsx)(DropdownContainer, { children: (0, jsx_runtime_1.jsxs)(react_native_1.ScrollView, { nestedScrollEnabled: true, children: [(0, jsx_runtime_1.jsxs)(SelectOption, { accessible: true, accessibilityRole: "radio", onPress: function () { return handleOptionPress(requiredOption); }, children: [(0, jsx_runtime_1.jsx)(StyledP, { children: (0, jsx_runtime_1.jsx)(Strong_1.Strong, { children: requiredOption.label }) }), (0, jsx_runtime_1.jsx)(Radio, { isChecked: selected.value === requiredOption.value, children: (0, jsx_runtime_1.jsx)(RadioDot, { isChecked: selected.value === requiredOption.value }) })] }), Object.keys(optionsByCategories).map(function (category) { return ((0, jsx_runtime_1.jsxs)(react_1.Fragment, { children: [category !== 'undefined' ? ((0, jsx_runtime_1.jsx)(StyledCategory, { children: category })) : null, optionsByCategories[category].map(function (option, i) { return ((0, jsx_runtime_1.jsxs)(SelectOption, { accessible: true, accessibilityRole: "radio", isLastOption: i === optionsByCategories[category].length - 1, onPress: function () { return handleOptionPress(option); }, children: [(0, jsx_runtime_1.jsx)(StyledP, { children: (0, jsx_runtime_1.jsx)(Strong_1.Strong, { children: option.label }) }), (0, jsx_runtime_1.jsx)(Radio, { isChecked: selected.value === option.value, children: (0, jsx_runtime_1.jsx)(RadioDot, { isChecked: selected.value === option.value }) })] }, option.label)); })] }, category)); })] }) }) }) })] }));
 };
 exports.Select = Select;
 var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8;

package/dist/components/SkeletonAnimation/SkeletonAnimation.js

@@ -21,7 +21,7 @@ var SkeletonAnimation = function (_a) {
         animationRef.current.setValue(0);
         react_native_1.Animated.loop(animationLoop.current).start();
     }, []);
-    return ((0, jsx_runtime_1.jsx)(react_native_1.View, { accessibilityRole: "none", accessibilityLabel: "loading...", accessible: false, testID: testID, children: animation === 'pulse' ? ((0, jsx_runtime_1.jsx)(react_native_1.Animated.View, { style: [
+    return ((0, jsx_runtime_1.jsx)(react_native_1.View, { accessible: false, accessibilityRole: "none", accessibilityLabel: "loading...", testID: testID, children: animation === 'pulse' ? ((0, jsx_runtime_1.jsx)(react_native_1.Animated.View, { style: [
                 {
                     height: '100%',
                     width: '100%',

package/dist/components/Tabs/Tab.js

@@ -74,6 +74,6 @@ var TabTouchable = styled_native_1.default.TouchableOpacity(function (_a) {
 exports.Tab = (0, react_1.forwardRef)(function (_a, ref) {
     var active = _a.active, _b = _a.fullWidth, fullWidth = _b === void 0 ? false : _b, children = _a.children, rest = __rest(_a, ["active", "fullWidth", "children"]);
     var breakpoints = (0, hooks_1.useBreakpoint)();
-    return ((0, jsx_runtime_1.jsx)(TabTouchable, __assign({ accessibilityRole: "tab", accessibilityState: { selected: active }, active: active, stretch: fullWidth, ref: ref }, rest, { children: (0, jsx_runtime_1.jsx)(TabText, __assign({ active: active }, breakpoints, { children: children })) })));
+    return ((0, jsx_runtime_1.jsx)(TabTouchable, __assign({ accessible: true, accessibilityRole: "tab", accessibilityState: { selected: active }, active: active, stretch: fullWidth, ref: ref }, rest, { children: (0, jsx_runtime_1.jsx)(TabText, __assign({ active: active }, breakpoints, { children: children })) })));
 });
 var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6;

package/dist/components/Tabs/TabList.js

@@ -62,7 +62,7 @@ var StyledTabList = styled_native_1.default.View(function (_a) {
 var TabList = function (_a) {
     var children = _a.children, setActiveTab = _a.setActiveTab, activeTab = _a.activeTab, tabRefs = _a.tabRefs, fullWidth = _a.fullWidth, inline = _a.inline, rest = __rest(_a, ["children", "setActiveTab", "activeTab", "tabRefs", "fullWidth", "inline"]);
     var validChildren = (0, utils_1.getValidChildren)(children);
-    return ((0, jsx_runtime_1.jsx)(StyledTabList, __assign({ accessibilityRole: "tablist" }, rest, { children: react_1.Children.map(validChildren, function (child, i) {
+    return ((0, jsx_runtime_1.jsx)(StyledTabList, __assign({ accessible: true, accessibilityRole: "tablist" }, rest, { children: react_1.Children.map(validChildren, function (child, i) {
             return (0, react_1.cloneElement)(child, {
                 onPress: (0, utils_1.callAll)(function () { return setActiveTab && setActiveTab(i); }, child.props.onPress),
                 active: activeTab === i,

package/dist/components/Toggle/Toggle.js

@@ -52,5 +52,5 @@ exports.Toggle = (0, react_1.forwardRef)(function (_a, ref) {
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
     activeOpacity = _b === void 0 ? 0.8 : _b, _c = _a.checked, checked = _c === void 0 ? false : _c, label = _a.label, hint = _a.hint, inline = _a.inline, _d = _a.labelPosition, labelPosition = _d === void 0 ? 'left' : _d, testID = _a.testID, rest = __rest(_a, ["activeOpacity", "checked", "label", "hint", "inline", "labelPosition", "testID"]);
     var hasLabel = label !== undefined;
-    return ((0, jsx_runtime_1.jsxs)(styles_1.StyledWrapper, __assign({ ref: ref, accessibilityRole: "checkbox", activeOpacity: activeOpacity, accessibilityState: { checked: checked }, hitSlop: 10, hasLabel: hasLabel, labelPosition: labelPosition, inline: inline }, rest, { children: [hasLabel ? ((0, jsx_runtime_1.jsxs)(react_native_1.View, { style: { flexShrink: 1 }, children: [(0, jsx_runtime_1.jsx)(LabelText_1.LabelText, { children: label }), hint ? (0, jsx_runtime_1.jsx)(HintText_1.HintText, { children: hint }) : null] })) : null, (0, jsx_runtime_1.jsx)(Input, { checked: checked, testID: testID, labelPosition: hasLabel ? labelPosition : undefined })] })));
+    return ((0, jsx_runtime_1.jsxs)(styles_1.StyledWrapper, __assign({ ref: ref, accessible: true, accessibilityRole: "checkbox", activeOpacity: activeOpacity, accessibilityState: { checked: checked }, hitSlop: 10, hasLabel: hasLabel, labelPosition: labelPosition, inline: inline }, rest, { children: [hasLabel ? ((0, jsx_runtime_1.jsxs)(react_native_1.View, { style: { flexShrink: 1 }, children: [(0, jsx_runtime_1.jsx)(LabelText_1.LabelText, { children: label }), hint ? (0, jsx_runtime_1.jsx)(HintText_1.HintText, { children: hint }) : null] })) : null, (0, jsx_runtime_1.jsx)(Input, { checked: checked, testID: testID, labelPosition: hasLabel ? labelPosition : undefined })] })));
 });

package/dist/esm/components/ActionList/ActionList.js

@@ -44,11 +44,11 @@ var ActionList = function (_a) {
 };
 var ActionWrapper = forwardRef(function (_a, ref) {
     var children = _a.children, accessibilityRole = _a.accessibilityRole, _b = _a.activeOpacity, activeOpacity = _b === void 0 ? 0.75 : _b, fullWidth = _a.fullWidth, _c = _a.hasBorder, hasBorder = _c === void 0 ? false : _c, _d = _a.inverted, inverted = _d === void 0 ? false : _d, _e = _a.inline, inline = _e === void 0 ? false : _e, inList = _a.inList, onPress = _a.onPress, testID = _a.testID, rest = __rest(_a, ["children", "accessibilityRole", "activeOpacity", "fullWidth", "hasBorder", "inverted", "inline", "inList", "onPress", "testID"]);
-    return (_jsx(StyledActionWrapper, __assign({ ref: ref, hasBorder: hasBorder, inverted: inverted, testID: testID }, rest, { children: _jsx(TouchableOpacity, { hitSlop: inline ? 24 : null, activeOpacity: activeOpacity, accessibilityRole: accessibilityRole, onPress: onPress, children: _jsx(StyledActionInner, { fullWidth: fullWidth, inList: inList, inline: inline, children: children }) }) })));
+    return (_jsx(StyledActionWrapper, __assign({ ref: ref, hasBorder: hasBorder, inverted: inverted, testID: testID }, rest, { children: _jsx(TouchableOpacity, { hitSlop: inline ? 24 : null, activeOpacity: activeOpacity, accessible: true, accessibilityRole: accessibilityRole, onPress: onPress, children: _jsx(StyledActionInner, { fullWidth: fullWidth, inList: inList, inline: inline, children: children }) }) })));
 });
 var Action = forwardRef(function (_a, ref) {
     var _b = _a.accessibilityRole, accessibilityRole = _b === void 0 ? 'link' : _b, children = _a.children, _c = _a.fullWidth, fullWidth = _c === void 0 ? false : _c, _d = _a.inverted, inverted = _d === void 0 ? false : _d, _e = _a.inline, inline = _e === void 0 ? false : _e, onPress = _a.onPress, testID = _a.testID, iconLeft = _a.iconLeft, iconRight = _a.iconRight, rest = __rest(_a, ["accessibilityRole", "children", "fullWidth", "inverted", "inline", "onPress", "testID", "iconLeft", "iconRight"]);
     var smallAndUp = useBreakpoint().smallAndUp;
-    return (_jsxs(ActionWrapper, __assign({ ref: ref, accessibilityRole: accessibilityRole, fullWidth: fullWidth, inverted: inverted, inline: inline, onPress: onPress, testID: testID }, rest, { children: [iconLeft ? (_jsx(StyledLeftIcon, { inverted: inverted, name: iconLeft, size: 16 })) : null, typeof children === 'string' ? (_jsx(StyledActionText, { smallAndUp: smallAndUp, inverted: inverted, inList: rest === null || rest === void 0 ? void 0 : rest.inList, children: children })) : (_jsx(StyledActionNodeWrapper, { children: children })), iconRight ? (_jsx(StyledRightIcon, { inverted: inverted, name: iconRight, size: 16 })) : null] })));
+    return (_jsxs(ActionWrapper, __assign({ ref: ref, accessible: true, accessibilityRole: accessibilityRole, fullWidth: fullWidth, inverted: inverted, inline: inline, onPress: onPress, testID: testID }, rest, { children: [iconLeft ? (_jsx(StyledLeftIcon, { inverted: inverted, name: iconLeft, size: 16 })) : null, typeof children === 'string' ? (_jsx(StyledActionText, { smallAndUp: smallAndUp, inverted: inverted, inList: rest === null || rest === void 0 ? void 0 : rest.inList, children: children })) : (_jsx(StyledActionNodeWrapper, { children: children })), iconRight ? (_jsx(StyledRightIcon, { inverted: inverted, name: iconRight, size: 16 })) : null] })));
 });
 export { ActionList, Action };

package/dist/esm/components/CTAButton/CTAButton.js

@@ -33,7 +33,7 @@ import { Icon } from '../Icon/Icon';
 var StyledCTAWrapper = styled.TouchableOpacity(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  align-self: flex-start;\n  flex-direction: row;\n  align-items: flex-start;\n"], ["\n  align-self: flex-start;\n  flex-direction: row;\n  align-items: flex-start;\n"])));
 var CTAButtonWrapper = function (_a) {
     var children = _a.children, _b = _a.accessibilityRole, accessibilityRole = _b === void 0 ? 'button' : _b, _c = _a.activeOpacity, activeOpacity = _c === void 0 ? 0.8 : _c, rest = __rest(_a, ["children", "accessibilityRole", "activeOpacity"]);
-    return (_jsx(StyledCTAWrapper, __assign({ accessibilityRole: accessibilityRole, activeOpacity: activeOpacity }, rest, { children: children })));
+    return (_jsx(StyledCTAWrapper, __assign({ accessible: true, accessibilityRole: accessibilityRole, activeOpacity: activeOpacity }, rest, { children: children })));
 };
 var StyledInner = styled.View(function (_a) {
     var _b = _a.theme, core = _b.core, component = _b.component, fullWidth = _a.fullWidth, variant = _a.variant, inverted = _a.inverted;

package/dist/esm/components/Checkbox/Checkbox.js

@@ -68,7 +68,7 @@ var StyledWrapper = styled.View(templateObject_1 || (templateObject_1 = __makeTe
 var Checkbox = forwardRef(function (_a, ref) {
     var label = _a.label, hint = _a.hint, error = _a.error, checked = _a.checked, optional = _a.optional, invalid = _a.invalid, _b = _a.activeOpacity, activeOpacity = _b === void 0 ? 0.8 : _b, testID = _a.testID, rest = __rest(_a, ["label", "hint", "error", "checked", "optional", "invalid", "activeOpacity", "testID"]);
     var hasError = !!error;
-    return (_jsx(FormGroup, { error: hasError, children: _jsxs(Stack, { spaceBetween: 1, children: [error ? _jsx(ErrorText, { children: error }) : null, _jsx(TouchableOpacity, __assign({ ref: ref, accessibilityRole: "checkbox", activeOpacity: activeOpacity, accessibilityState: { checked: checked } }, rest, { children: _jsxs(StyledWrapper, { children: [_jsx(Input, { checked: checked, invalid: hasError || invalid, testID: testID }), _jsxs(View, { style: { flexShrink: 1 }, children: [_jsxs(CheckLabelText, { children: [label, optional ? ' (optional)' : null] }), hint ? _jsx(HintText, { children: hint }) : null] })] }) }))] }) }));
+    return (_jsx(FormGroup, { error: hasError, children: _jsxs(Stack, { spaceBetween: 1, children: [error ? _jsx(ErrorText, { children: error }) : null, _jsx(TouchableOpacity, __assign({ ref: ref, accessible: true, accessibilityRole: "checkbox", activeOpacity: activeOpacity, accessibilityState: { checked: checked } }, rest, { children: _jsxs(StyledWrapper, { children: [_jsx(Input, { checked: checked, invalid: hasError || invalid, testID: testID }), _jsxs(View, { style: { flexShrink: 1 }, children: [_jsxs(CheckLabelText, { children: [label, optional ? ' (optional)' : null] }), hint ? _jsx(HintText, { children: hint }) : null] })] }) }))] }) }));
 });
 export { Checkbox };
 var templateObject_1;

package/dist/esm/components/Heading1/Heading1.js

@@ -41,6 +41,6 @@ var StyledHeading1 = styled.Text(function (_a) {
 export var Heading1 = function (_a) {
     var _b = _a.accessibilityRole, accessibilityRole = _b === void 0 ? 'header' : _b, rest = __rest(_a, ["accessibilityRole"]);
     var breakpoints = useBreakpoint();
-    return (_jsx(StyledHeading1, __assign({ accessibilityRole: accessibilityRole }, breakpoints, rest)));
+    return (_jsx(StyledHeading1, __assign({ accessible: true, accessibilityRole: accessibilityRole }, breakpoints, rest)));
 };
 var templateObject_1;

package/dist/esm/components/Heading2/Heading2.js

@@ -41,6 +41,6 @@ var StyledHeading2 = styled.Text(function (_a) {
 export var Heading2 = function (_a) {
     var _b = _a.accessibilityRole, accessibilityRole = _b === void 0 ? 'header' : _b, rest = __rest(_a, ["accessibilityRole"]);
     var breakpoints = useBreakpoint();
-    return (_jsx(StyledHeading2, __assign({ accessibilityRole: accessibilityRole }, breakpoints, rest)));
+    return (_jsx(StyledHeading2, __assign({ accessible: true, accessibilityRole: accessibilityRole }, breakpoints, rest)));
 };
 var templateObject_1;

package/dist/esm/components/Heading3/Heading3.js

@@ -41,6 +41,6 @@ var StyledHeading3 = styled.Text(function (_a) {
 export var Heading3 = function (_a) {
     var _b = _a.accessibilityRole, accessibilityRole = _b === void 0 ? 'header' : _b, rest = __rest(_a, ["accessibilityRole"]);
     var breakpoints = useBreakpoint();
-    return (_jsx(StyledHeading3, __assign({ accessibilityRole: accessibilityRole }, breakpoints, rest)));
+    return (_jsx(StyledHeading3, __assign({ accessible: true, accessibilityRole: accessibilityRole }, breakpoints, rest)));
 };
 var templateObject_1;

package/dist/esm/components/Heading4/Heading4.js

@@ -41,6 +41,6 @@ var StyledHeading4 = styled.Text(function (_a) {
 export var Heading4 = function (_a) {
     var _b = _a.accessibilityRole, accessibilityRole = _b === void 0 ? 'header' : _b, rest = __rest(_a, ["accessibilityRole"]);
     var breakpoints = useBreakpoint();
-    return (_jsx(StyledHeading4, __assign({ accessibilityRole: accessibilityRole }, breakpoints, rest)));
+    return (_jsx(StyledHeading4, __assign({ accessible: true, accessibilityRole: accessibilityRole }, breakpoints, rest)));
 };
 var templateObject_1;

package/dist/esm/components/PasswordInput/PasswordVisibilityToggle.js

@@ -15,7 +15,7 @@ export var useTogglePasswordVisibility = function () {
 export var PasswordVisibilityToggle = function (_a) {
     var iconName = _a.iconName, visibilityToggleLabel = _a.visibilityToggleLabel, handlePasswordVisibility = _a.handlePasswordVisibility;
     var _b = useState(false), focused = _b[0], setFocused = _b[1];
-    return (_jsx(StyledPressable, { testID: "password-input-visibility-toggle", focused: focused, accessibilityRole: "button", accessibilityLabel: visibilityToggleLabel, onPress: handlePasswordVisibility, hitSlop: 16, onFocus: function () {
+    return (_jsx(StyledPressable, { testID: "password-input-visibility-toggle", focused: focused, accessible: true, accessibilityRole: "button", accessibilityLabel: visibilityToggleLabel, onPress: handlePasswordVisibility, hitSlop: 16, onFocus: function () {
             setFocused(true);
         }, onBlur: function () {
             setFocused(false);

package/dist/esm/components/Radio/Radio.js

@@ -57,6 +57,6 @@ var Radio = forwardRef(function (_a, ref) {
     value = _a.value, // "value" is needed for RadioGroup, but isn't actually used in the radio anywhere
     _b = _a.activeOpacity, // "value" is needed for RadioGroup, but isn't actually used in the radio anywhere
     activeOpacity = _b === void 0 ? 0.8 : _b, testID = _a.testID, rest = __rest(_a, ["label", "hint", "checked", "invalid", "value", "activeOpacity", "testID"]);
-    return (_jsx(TouchableOpacity, __assign({ ref: ref, accessibilityRole: "radio", activeOpacity: activeOpacity, accessibilityState: { checked: checked } }, rest, { children: _jsxs(StyledWrapper, { children: [_jsx(Input, { checked: checked, invalid: invalid, testID: testID }), _jsxs(View, { style: { flexShrink: 1 }, children: [_jsx(LabelText, { children: label }), hint ? _jsx(HintText, { children: hint }) : null] })] }) })));
+    return (_jsx(TouchableOpacity, __assign({ ref: ref, accessible: true, accessibilityRole: "radio", activeOpacity: activeOpacity, accessibilityState: { checked: checked } }, rest, { children: _jsxs(StyledWrapper, { children: [_jsx(Input, { checked: checked, invalid: invalid, testID: testID }), _jsxs(View, { style: { flexShrink: 1 }, children: [_jsx(LabelText, { children: label }), hint ? _jsx(HintText, { children: hint }) : null] })] }) })));
 });
 export { Radio };

package/dist/esm/components/Radio/RadioField.js

@@ -33,7 +33,7 @@ var RadioField = function (_a) {
     var label = _a.label, hint = _a.hint, error = _a.error, children = _a.children, _b = _a.optional, optional = _b === void 0 ? false : _b, value = _a.value, onValueChange = _a.onValueChange, rest = __rest(_a, ["label", "hint", "error", "children", "optional", "value", "onValueChange"]);
     var hasError = !!error;
     var validChildren = getValidChildren(children);
-    return (_jsx(FormGroup, __assign({}, rest, { error: hasError, children: _jsxs(Stack, { spaceBetween: 1, children: [_jsxs(View, { children: [_jsxs(LabelText, { children: [label, optional ? ' (optional)' : null] }), hint ? _jsx(HintText, { children: hint }) : null, error ? _jsx(ErrorText, { children: error }) : null] }), _jsx(View, { accessibilityRole: "radiogroup", children: Children.map(validChildren, function (child) {
+    return (_jsx(FormGroup, __assign({}, rest, { error: hasError, children: _jsxs(Stack, { spaceBetween: 1, children: [_jsxs(View, { children: [_jsxs(LabelText, { children: [label, optional ? ' (optional)' : null] }), hint ? _jsx(HintText, { children: hint }) : null, error ? _jsx(ErrorText, { children: error }) : null] }), _jsx(View, { accessible: true, accessibilityRole: "radiogroup", children: Children.map(validChildren, function (child) {
                         return cloneElement(child, {
                             invalid: hasError ? true : child.props.invalid,
                             checked: child.props.checked != null

package/dist/esm/components/RadioCard/RadioCard.js

@@ -61,6 +61,6 @@ var StyledWrapper = styled.View(function (_a) {
 });
 export var RadioCard = forwardRef(function (_a, ref) {
     var label = _a.label, checked = _a.checked, invalid = _a.invalid, _b = _a.activeOpacity, activeOpacity = _b === void 0 ? 0.8 : _b, testID = _a.testID, _c = _a.hasInput, hasInput = _c === void 0 ? true : _c, rest = __rest(_a, ["label", "checked", "invalid", "activeOpacity", "testID", "hasInput"]);
-    return (_jsx(TouchableOpacity, __assign({ ref: ref, accessibilityRole: "radio", activeOpacity: activeOpacity, accessibilityState: { checked: checked } }, rest, { children: _jsxs(StyledWrapper, { checked: checked, invalid: invalid, children: [typeof label === 'string' ? _jsx(LabelText, { children: label }) : label, hasInput ? (_jsx(Input, { checked: checked, invalid: invalid, testID: testID })) : null] }) })));
+    return (_jsx(TouchableOpacity, __assign({ ref: ref, accessible: true, accessibilityRole: "radio", activeOpacity: activeOpacity, accessibilityState: { checked: checked } }, rest, { children: _jsxs(StyledWrapper, { checked: checked, invalid: invalid, children: [typeof label === 'string' ? _jsx(LabelText, { children: label }) : label, hasInput ? (_jsx(Input, { checked: checked, invalid: invalid, testID: testID })) : null] }) })));
 });
 var templateObject_1;

package/dist/esm/components/SelectField/Select.js

@@ -61,6 +61,6 @@ export var Select = function (_a) {
         label: "-- ".concat(noOptionMessage, " --"),
         value: 'default',
     };
-    return (_jsxs(View, { children: [_jsxs(SelectInput, { testID: testID, hasError: hasError, onPress: function () { return setOpen(!isOpen); }, children: [_jsx(P, { style: { marginTop: 0, marginBottom: 0 }, children: selected.value === 'default' ? '' : selected.label }), _jsx(Icon, { name: "chevron-down", size: 16, style: { marginLeft: 'auto' } })] }), _jsx(Modal, { transparent: true, visible: isOpen, animationType: "fade", onRequestClose: function () { return setOpen(false); }, children: _jsx(DropdownWrapper, { children: _jsx(DropdownContainer, { children: _jsxs(ScrollView, { nestedScrollEnabled: true, children: [_jsxs(SelectOption, { accessibilityRole: "radio", onPress: function () { return handleOptionPress(requiredOption); }, children: [_jsx(StyledP, { children: _jsx(Strong, { children: requiredOption.label }) }), _jsx(Radio, { isChecked: selected.value === requiredOption.value, children: _jsx(RadioDot, { isChecked: selected.value === requiredOption.value }) })] }), Object.keys(optionsByCategories).map(function (category) { return (_jsxs(Fragment, { children: [category !== 'undefined' ? (_jsx(StyledCategory, { children: category })) : null, optionsByCategories[category].map(function (option, i) { return (_jsxs(SelectOption, { accessibilityRole: "radio", isLastOption: i === optionsByCategories[category].length - 1, onPress: function () { return handleOptionPress(option); }, children: [_jsx(StyledP, { children: _jsx(Strong, { children: option.label }) }), _jsx(Radio, { isChecked: selected.value === option.value, children: _jsx(RadioDot, { isChecked: selected.value === option.value }) })] }, option.label)); })] }, category)); })] }) }) }) })] }));
+    return (_jsxs(View, { children: [_jsxs(SelectInput, { testID: testID, hasError: hasError, onPress: function () { return setOpen(!isOpen); }, children: [_jsx(P, { style: { marginTop: 0, marginBottom: 0 }, children: selected.value === 'default' ? '' : selected.label }), _jsx(Icon, { name: "chevron-down", size: 16, style: { marginLeft: 'auto' } })] }), _jsx(Modal, { transparent: true, visible: isOpen, animationType: "fade", onRequestClose: function () { return setOpen(false); }, children: _jsx(DropdownWrapper, { children: _jsx(DropdownContainer, { children: _jsxs(ScrollView, { nestedScrollEnabled: true, children: [_jsxs(SelectOption, { accessible: true, accessibilityRole: "radio", onPress: function () { return handleOptionPress(requiredOption); }, children: [_jsx(StyledP, { children: _jsx(Strong, { children: requiredOption.label }) }), _jsx(Radio, { isChecked: selected.value === requiredOption.value, children: _jsx(RadioDot, { isChecked: selected.value === requiredOption.value }) })] }), Object.keys(optionsByCategories).map(function (category) { return (_jsxs(Fragment, { children: [category !== 'undefined' ? (_jsx(StyledCategory, { children: category })) : null, optionsByCategories[category].map(function (option, i) { return (_jsxs(SelectOption, { accessible: true, accessibilityRole: "radio", isLastOption: i === optionsByCategories[category].length - 1, onPress: function () { return handleOptionPress(option); }, children: [_jsx(StyledP, { children: _jsx(Strong, { children: option.label }) }), _jsx(Radio, { isChecked: selected.value === option.value, children: _jsx(RadioDot, { isChecked: selected.value === option.value }) })] }, option.label)); })] }, category)); })] }) }) }) })] }));
 };
 var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8;

package/dist/esm/components/SkeletonAnimation/SkeletonAnimation.js

@@ -18,7 +18,7 @@ export var SkeletonAnimation = function (_a) {
         animationRef.current.setValue(0);
         Animated.loop(animationLoop.current).start();
     }, []);
-    return (_jsx(View, { accessibilityRole: "none", accessibilityLabel: "loading...", accessible: false, testID: testID, children: animation === 'pulse' ? (_jsx(Animated.View, { style: [
+    return (_jsx(View, { accessible: false, accessibilityRole: "none", accessibilityLabel: "loading...", testID: testID, children: animation === 'pulse' ? (_jsx(Animated.View, { style: [
                 {
                     height: '100%',
                     width: '100%',

package/dist/esm/components/Tabs/Tab.js

@@ -48,6 +48,6 @@ var TabTouchable = styled.TouchableOpacity(function (_a) {
 export var Tab = forwardRef(function (_a, ref) {
     var active = _a.active, _b = _a.fullWidth, fullWidth = _b === void 0 ? false : _b, children = _a.children, rest = __rest(_a, ["active", "fullWidth", "children"]);
     var breakpoints = useBreakpoint();
-    return (_jsx(TabTouchable, __assign({ accessibilityRole: "tab", accessibilityState: { selected: active }, active: active, stretch: fullWidth, ref: ref }, rest, { children: _jsx(TabText, __assign({ active: active }, breakpoints, { children: children })) })));
+    return (_jsx(TabTouchable, __assign({ accessible: true, accessibilityRole: "tab", accessibilityState: { selected: active }, active: active, stretch: fullWidth, ref: ref }, rest, { children: _jsx(TabText, __assign({ active: active }, breakpoints, { children: children })) })));
 });
 var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6;

package/dist/esm/components/Tabs/TabList.js

@@ -36,7 +36,7 @@ var StyledTabList = styled.View(function (_a) {
 export var TabList = function (_a) {
     var children = _a.children, setActiveTab = _a.setActiveTab, activeTab = _a.activeTab, tabRefs = _a.tabRefs, fullWidth = _a.fullWidth, inline = _a.inline, rest = __rest(_a, ["children", "setActiveTab", "activeTab", "tabRefs", "fullWidth", "inline"]);
     var validChildren = getValidChildren(children);
-    return (_jsx(StyledTabList, __assign({ accessibilityRole: "tablist" }, rest, { children: Children.map(validChildren, function (child, i) {
+    return (_jsx(StyledTabList, __assign({ accessible: true, accessibilityRole: "tablist" }, rest, { children: Children.map(validChildren, function (child, i) {
             return cloneElement(child, {
                 onPress: callAll(function () { return setActiveTab && setActiveTab(i); }, child.props.onPress),
                 active: activeTab === i,

package/dist/esm/components/Toggle/Toggle.js

@@ -49,5 +49,5 @@ export var Toggle = forwardRef(function (_a, ref) {
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
     activeOpacity = _b === void 0 ? 0.8 : _b, _c = _a.checked, checked = _c === void 0 ? false : _c, label = _a.label, hint = _a.hint, inline = _a.inline, _d = _a.labelPosition, labelPosition = _d === void 0 ? 'left' : _d, testID = _a.testID, rest = __rest(_a, ["activeOpacity", "checked", "label", "hint", "inline", "labelPosition", "testID"]);
     var hasLabel = label !== undefined;
-    return (_jsxs(StyledWrapper, __assign({ ref: ref, accessibilityRole: "checkbox", activeOpacity: activeOpacity, accessibilityState: { checked: checked }, hitSlop: 10, hasLabel: hasLabel, labelPosition: labelPosition, inline: inline }, rest, { children: [hasLabel ? (_jsxs(View, { style: { flexShrink: 1 }, children: [_jsx(LabelText, { children: label }), hint ? _jsx(HintText, { children: hint }) : null] })) : null, _jsx(Input, { checked: checked, testID: testID, labelPosition: hasLabel ? labelPosition : undefined })] })));
+    return (_jsxs(StyledWrapper, __assign({ ref: ref, accessible: true, accessibilityRole: "checkbox", activeOpacity: activeOpacity, accessibilityState: { checked: checked }, hitSlop: 10, hasLabel: hasLabel, labelPosition: labelPosition, inline: inline }, rest, { children: [hasLabel ? (_jsxs(View, { style: { flexShrink: 1 }, children: [_jsx(LabelText, { children: label }), hint ? _jsx(HintText, { children: hint }) : null] })) : null, _jsx(Input, { checked: checked, testID: testID, labelPosition: hasLabel ? labelPosition : undefined })] })));
 });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ovotech/element-native",
-  "version": "4.1.1",
+  "version": "4.1.2-canary-78bef7d-270",
   "main": "dist/index.js",
   "module": "dist/esm/index.js",
   "types": "dist/index.d.ts",
@@ -14,10 +14,10 @@
   },
   "dependencies": {
     "@backpackapp-io/react-native-toast": "^0.10.0",
+    "@ovotech/element-core": "3.0.1-canary-78bef7d-270",
     "deepmerge": "^4.2.2",
     "lodash.groupby": "^4.6.0",
-    "react-native-reanimated-carousel": "^3.5.1",
-    "@ovotech/element-core": "3.0.1"
+    "react-native-reanimated-carousel": "^3.5.1"
   },
   "devDependencies": {
     "@babel/core": "^7.11.5",