@pagopa/io-app-design-system 1.25.0 → 1.26.0

package/src/components/layout/HeaderFirstLevel.tsx

@@ -1,5 +1,10 @@
 import * as React from "react";
-import { View, StyleSheet } from "react-native";
+import {
+  View,
+  StyleSheet,
+  AccessibilityInfo,
+  findNodeHandle
+} from "react-native";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
 import { WithTestID } from "../../utils/types";
 import { IOStyles, IOVisualCostants, IOColors } from "../../core";
@@ -67,6 +72,14 @@ export const HeaderFirstLevel = ({
   secondAction,
   thirdAction
 }: HeaderFirstLevel) => {
+  const titleRef = React.createRef<View>();
+
+  React.useLayoutEffect(() => {
+    const reactNode = findNodeHandle(titleRef.current);
+    if (reactNode !== null) {
+      AccessibilityInfo.setAccessibilityFocus(reactNode);
+    }
+  });
   const insets = useSafeAreaInsets();
 
   return (
@@ -82,13 +95,15 @@ export const HeaderFirstLevel = ({
       testID={testID}
     >
       <View style={styles.headerInner}>
-        <H3
-          style={{ flexShrink: 1 }}
-          numberOfLines={1}
-          color={backgroundColor === "dark" ? "white" : "black"}
-        >
-          {title}
-        </H3>
+        <View ref={titleRef} accessible accessibilityRole="header">
+          <H3
+            style={{ flexShrink: 1 }}
+            numberOfLines={1}
+            color={backgroundColor === "dark" ? "white" : "black"}
+          >
+            {title}
+          </H3>
+        </View>
         <View style={[IOStyles.row, { flexShrink: 0 }]}>
           {type === "threeActions" && (
             <>

package/src/components/layout/HeaderSecondLevel.tsx

@@ -1,5 +1,11 @@
 import * as React from "react";
-import { View, StyleSheet, Platform } from "react-native";
+import {
+  View,
+  StyleSheet,
+  Platform,
+  findNodeHandle,
+  AccessibilityInfo
+} from "react-native";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
 import Animated, {
   interpolate,
@@ -89,13 +95,15 @@ const styles = StyleSheet.create({
     alignItems: "center",
     justifyContent: "space-between"
   },
-  headerTitle: {
-    fontSize: 14,
-    textAlign: "center",
+  titleContainer: {
     flexGrow: 1,
     flexShrink: 1,
     marginHorizontal: titleHorizontalMargin
   },
+  headerTitle: {
+    fontSize: 14,
+    textAlign: "center"
+  },
   headerTitleFont: {
     ...makeFontStyleObject("Regular", false, "ReadexPro")
   },
@@ -122,9 +130,18 @@ export const HeaderSecondLevel = ({
   secondAction,
   thirdAction
 }: HeaderSecondLevel) => {
+  const titleRef = React.createRef<View>();
+
   const { isExperimental } = useIOExperimentalDesign();
   const insets = useSafeAreaInsets();
 
+  React.useLayoutEffect(() => {
+    const reactNode = findNodeHandle(titleRef.current);
+    if (reactNode !== null) {
+      AccessibilityInfo.setAccessibilityFocus(reactNode);
+    }
+  });
+
   const headerWrapperAnimatedStyle = useAnimatedStyle(() => ({
     backgroundColor:
       transparent && scrollValues
@@ -182,19 +199,27 @@ export const HeaderSecondLevel = ({
         ) : (
           <HSpacer size={32} />
         )}
-        <Animated.Text
-          numberOfLines={1}
+        <View
+          ref={titleRef}
           accessible={isTitleAccessible}
-          style={[
-            styles.headerTitle,
-            isExperimental
-              ? styles.headerTitleFont
-              : styles.headerTitleLegacyFont,
-            titleAnimatedStyle
-          ]}
+          accessibilityLabel={title}
+          accessibilityRole="header"
+          style={styles.titleContainer}
         >
-          {title}
-        </Animated.Text>
+          <Animated.Text
+            numberOfLines={1}
+            accessible={false}
+            style={[
+              styles.headerTitle,
+              isExperimental
+                ? styles.headerTitleFont
+                : styles.headerTitleLegacyFont,
+              titleAnimatedStyle
+            ]}
+          >
+            {title}
+          </Animated.Text>
+        </View>
         <View style={[IOStyles.row, { flexShrink: 0 }]}>
           {type === "threeActions" && (
             <>

package/src/components/layout/ModalBSHeader.tsx

@@ -0,0 +1,92 @@
+import * as React from "react";
+import { useLayoutEffect } from "react";
+import {
+  View,
+  StyleSheet,
+  findNodeHandle,
+  AccessibilityInfo
+} from "react-native";
+import {
+  IOColors,
+  IOVisualCostants,
+  useIOExperimentalDesign,
+  IOStyles
+} from "../../core";
+import { H4 } from "../typography";
+import { IconButton } from "../buttons";
+
+const styles = StyleSheet.create({
+  container: {
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "space-between",
+    paddingHorizontal: IOVisualCostants.appMarginDefault,
+    paddingTop: IOVisualCostants.appMarginDefault,
+    paddingBottom: IOVisualCostants.appMarginDefault,
+    backgroundColor: IOColors.white
+  }
+});
+
+type Props = {
+  title: string | React.ReactNode;
+  onClose: () => void;
+  closeAccessibilityLabel: string;
+};
+
+/**
+ * A header for a modals and bottom sheet.
+ * @param title - The title of the modal.
+ * @param onClose - The function to call when the close button is pressed.
+ * @param closeAccessibilityLabel - The accessibility label for the close button.
+ *
+ */
+export const ModalBSHeader = ({
+  title,
+  onClose,
+  closeAccessibilityLabel
+}: Props) => {
+  const { isExperimental } = useIOExperimentalDesign();
+  const headerRef = React.createRef<View>();
+
+  useLayoutEffect(() => {
+    const reactNode = findNodeHandle(headerRef.current);
+    if (reactNode !== null) {
+      AccessibilityInfo.setAccessibilityFocus(reactNode);
+    }
+  });
+
+  return (
+    <View style={styles.container} ref={headerRef}>
+      {React.isValidElement(title) ? (
+        title
+      ) : (
+        <View
+          style={IOStyles.flex}
+          accessible={true}
+          accessibilityRole={"header"}
+          accessibilityLabel={typeof title === "string" ? title : undefined}
+        >
+          <H4>{title}</H4>
+        </View>
+      )}
+      {/* ◀ REMOVE_LEGACY_COMPONENT: Remove the following condition */}
+      {isExperimental ? (
+        <IconButton
+          color="neutral"
+          onPress={onClose}
+          icon="closeMedium"
+          accessibilityLabel={closeAccessibilityLabel}
+        />
+      ) : (
+        <View style={{ opacity: 0.5 }}>
+          <IconButton
+            color="neutral"
+            onPress={onClose}
+            icon="closeMedium"
+            accessibilityLabel={closeAccessibilityLabel}
+          />
+        </View>
+      )}
+    </View>
+  );
+};

package/src/components/layout/index.tsx

@@ -6,3 +6,4 @@ export * from "./HeaderSecondLevel";
 export * from "./ForceScrollDownView";
 export * from "./FooterWithButtons";
 export * from "./BlockButtons";
+export * from "./ModalBSHeader";

package/src/components/listitems/ListItemAction.tsx

@@ -177,6 +177,7 @@ export const ListItemAction = ({
     >
       <Animated.View
         style={[IOListItemStyles.listItem, animatedBackgroundStyle]}
+        importantForAccessibility="no-hide-descendants"
       >
         <Animated.View
           style={[IOListItemStyles.listItemInner, animatedScaleStyle]}

package/src/components/listitems/ListItemCheckbox.tsx

@@ -56,6 +56,7 @@ export const ListItemCheckbox = ({
   description,
   icon,
   selected,
+  accessibilityLabel,
   disabled,
   onValueChange
 }: OwnProps) => {
@@ -128,6 +129,13 @@ export const ListItemCheckbox = ({
       onPressOut={handlePressOut}
       onTouchEnd={handlePressOut}
       testID="ListItemCheckbox"
+      accessible={true}
+      accessibilityLabel={accessibilityLabel}
+      accessibilityRole="checkbox"
+      accessibilityState={{
+        checked: selected ?? toggleValue,
+        disabled: !!disabled
+      }}
       disabled={disabled}
     >
       <Animated.View

package/src/components/listitems/__test__/__snapshots__/listitem.test.tsx.snap

@@ -36,6 +36,7 @@ exports[`Test List Item Components - Experimental Enabled  ListItemAction Snapsh
   onTouchEnd={[Function]}
 >
   <View
+    importantForAccessibility="no-hide-descendants"
     style={
       [
         {
@@ -139,6 +140,7 @@ exports[`Test List Item Components - Experimental Enabled  ListItemIDP Snapshot
           "alignItems": "center",
           "backgroundColor": "#FFFFFF",
           "borderColor": "#E8EBF1",
+          "borderCurve": "continuous",
           "borderRadius": 8,
           "borderWidth": 1,
           "flexDirection": "row",
@@ -1765,6 +1767,7 @@ exports[`Test List Item Components ListItemAction Snapshot 1`] = `
   onTouchEnd={[Function]}
 >
   <View
+    importantForAccessibility="no-hide-descendants"
     style={
       [
         {
@@ -1868,6 +1871,7 @@ exports[`Test List Item Components ListItemIDP Snapshot 1`] = `
           "alignItems": "center",
           "backgroundColor": "#FFFFFF",
           "borderColor": "#E8EBF1",
+          "borderCurve": "continuous",
           "borderRadius": 8,
           "borderWidth": 1,
           "flexDirection": "row",

package/src/components/otpInput/BoxedInput.tsx

@@ -1,6 +1,6 @@
 import * as React from "react";
 import { useMemo } from "react";
-import { View, StyleSheet } from "react-native";
+import { StyleSheet, View } from "react-native";
 import { IOColors } from "../../core";
 import { BaseTypography, H6 } from "../typography";
 
@@ -16,7 +16,8 @@ const styles = StyleSheet.create({
     justifyContent: "center",
     width: 35,
     height: 60,
-    borderRadius: 8
+    borderRadius: 8,
+    borderCurve: "continuous"
   },
   defaultBox: {
     borderWidth: 1,

package/src/components/pictograms/Pictogram.tsx

@@ -1,11 +1,6 @@
 import React, { useMemo } from "react";
 import { ColorValue } from "react-native";
-import {
-  IOColors,
-  IOThemeDark,
-  IOThemeLight,
-  useIOTheme
-} from "../../core/IOColors";
+import { IOColors, IOThemeDark, IOThemeLight, useIOTheme } from "../../core";
 
 import PictogramAbacus from "./svg/PictogramAbacus";
 import PictogramAccessDenied from "./svg/PictogramAccessDenied";

package/src/components/switch/NativeSwitch.tsx

@@ -6,7 +6,14 @@ import { IOSwitchVisualParams } from "../../core/IOStyles";
 
 type OwnProps = Pick<
   SwitchProps,
-  "onValueChange" | "value" | "accessible" | "accessibilityLabel"
+  | "onValueChange"
+  | "value"
+  | "accessible"
+  | "accessibilityLabel"
+  | "testID"
+  | "disabled"
+  | "accessibilityElementsHidden"
+  | "importantForAccessibility"
 >;
 
 // TODO: Remove this when legacy look is deprecated https://pagopa.atlassian.net/browse/IOPLT-153
@@ -35,6 +42,8 @@ export const NativeSwitch = ({
   return (
     <Switch
       {...accessibility}
+      accessibilityRole="switch"
+      accessibilityState={{ checked: value, disabled: accessibility.disabled }}
       trackColor={trackColorComponent}
       thumbColor={IOColors[IOSwitchVisualParams.bgCircle]}
       ios_backgroundColor={

package/src/components/tabs/TabItem.tsx

@@ -9,12 +9,12 @@ import Animated, {
   useSharedValue,
   withSpring
 } from "react-native-reanimated";
+import { IOColors, IOScaleValues, IOSpringValues, hexToRgba } from "../../core";
+import { useSpringPressProgressValue } from "../../utils/hooks/useSpringPressProgressValue";
 import { WithTestID } from "../../utils/types";
 import { IOIcons, Icon } from "../icons";
 import { HSpacer } from "../spacer";
 import { LabelHeader } from "../typography/LabelHeader";
-import { IOSpringValues, IOColors, hexToRgba, IOScaleValues } from "../../core";
-import { useSpringPressProgressValue } from "../../utils/hooks/useSpringPressProgressValue";
 
 type ColorMode = "light" | "dark";
 
@@ -186,7 +186,8 @@ const styles = StyleSheet.create({
     alignItems: "center",
     paddingHorizontal: 16,
     paddingVertical: 8,
-    borderRadius: 65,
+    borderRadius: 64,
+    borderCurve: "continuous",
     justifyContent: "center",
     alignSelf: "flex-start"
   },

package/src/components/tag/Tag.tsx

@@ -1,16 +1,16 @@
-import React from "react";
 import * as O from "fp-ts/lib/Option";
 import { pipe } from "fp-ts/lib/function";
-import { View, Text, StyleSheet, Platform } from "react-native";
-import { WithTestID } from "../../utils/types";
-import { makeFontStyleObject } from "../../utils/fonts";
-import { IOIconSizeScale, IOIcons, Icon } from "../icons";
+import React from "react";
+import { Platform, StyleSheet, Text, View } from "react-native";
 import { IOColors, IOTagRadius, useIOExperimentalDesign } from "../../core";
 import {
   IOSpacingScale,
   IOTagHSpacing,
   IOTagVSpacing
 } from "../../core/IOSpacing";
+import { makeFontStyleObject } from "../../utils/fonts";
+import { WithTestID } from "../../utils/types";
+import { IOIconSizeScale, IOIcons, Icon } from "../icons";
 
 export type Tag = WithTestID<{
   text?: string;
@@ -80,10 +80,11 @@ const styles = StyleSheet.create({
         textAlignVertical: "center"
       }
     }),
-    borderWidth: 1,
     backgroundColor: IOColors.white,
+    borderWidth: 1,
     borderColor: IOColors["grey-100"],
     borderRadius: IOTagRadius,
+    borderCurve: "continuous",
     paddingHorizontal: IOTagHSpacing,
     paddingVertical: IOTagVSpacing
   },

package/src/components/textInput/TextInputBase.tsx

@@ -21,14 +21,14 @@ import {
 } from "../../core";
 import { makeFontStyleObject } from "../../utils/fonts";
 import { RNTextInputProps, getInputPropsByType } from "../../utils/textInput";
-import { InputType } from "../../utils/types";
+import { InputType, WithTestID } from "../../utils/types";
 import { IOIcons, Icon } from "../icons";
 import { HSpacer } from "../spacer";
 import { LabelSmall } from "../typography";
 
 type InputStatus = "initial" | "focused" | "disabled" | "error";
 
-type InputTextProps = {
+type InputTextProps = WithTestID<{
   placeholder: string;
   value: string;
   onChangeText: (value: string) => void;
@@ -45,7 +45,7 @@ type InputTextProps = {
   isPassword?: boolean;
   onBlur?: () => void;
   onFocus?: () => void;
-};
+}>;
 
 const inputMarginTop: IOSpacingScale = 8;
 
@@ -56,6 +56,7 @@ const styles = StyleSheet.create({
     paddingVertical: 8,
     height: 60,
     borderRadius: 8,
+    borderCurve: "continuous",
     paddingHorizontal: 12
   },
   textInputStyle: {

package/src/components/toast/ToastNotification.tsx

@@ -69,6 +69,7 @@ const styles = StyleSheet.create({
   toast: {
     borderRadius: IOAlertRadius,
     borderWidth: 1,
+    borderCurve: "continuous",
     padding: 16,
     flexDirection: "row",
     alignItems: "center",

package/src/core/IOColors.ts

@@ -1,6 +1,5 @@
 import type { ComponentProps } from "react";
-import * as React from "react";
-import { Appearance, ColorValue } from "react-native";
+import { ColorValue } from "react-native";
 import type LinearGradient from "react-native-linear-gradient"; // Used by `getGradientColorValues` function
 
 /*
@@ -400,15 +399,6 @@ export const themeStatusColorsDarkMode: Record<
 
 export type themeStatusColorsDarkMode = keyof typeof themeStatusColorsDarkMode;
 
-/*
-THEME CONTEXT
-*/
-export const IOThemes = { light: IOThemeLight, dark: IOThemeDark };
-export const IOThemeContext: React.Context<IOTheme> = React.createContext(
-  Appearance.getColorScheme() === "dark" ? IOThemes.dark : IOThemes.light
-);
-export const useIOTheme = () => React.useContext(IOThemeContext);
-
 /*
 UTILS
 */

package/src/core/IOSpacing.ts

@@ -19,7 +19,8 @@ export type IOSpacingScale =
   | 56
   | 64
   | 72
-  | 80;
+  | 80
+  | 96;
 
 // Values used in the new `<Spacer>` component
 export type IOSpacer = Extract<IOSpacingScale, 4 | 8 | 16 | 24 | 32 | 40 | 48>;

package/src/core/IOStyles.ts

@@ -162,6 +162,7 @@ export const IOButtonStyles = StyleSheet.create({
     /* Legacy visual properties. They will be replaced with
     dynamic ones once NativeBase is gone */
     borderRadius: btnBorderRadius,
+    borderCurve: "continuous",
     paddingHorizontal: 24,
     // Reset default visual parameters
     elevation: 0
@@ -288,6 +289,7 @@ export const IOModuleStyles = StyleSheet.create({
     borderWidth: 1,
     borderColor: IOColors["grey-100"],
     borderRadius: IOModuleIDPRadius,
+    borderCurve: "continuous",
     backgroundColor: IOColors.white,
     flexDirection: "row",
     justifyContent: "space-between",

package/src/core/IOThemeContextProvider.tsx

@@ -0,0 +1,50 @@
+import { constVoid } from "fp-ts/function";
+import React from "react";
+import { Appearance } from "react-native";
+import { IOTheme, IOThemeDark, IOThemeLight } from "./IOColors";
+
+export const IOThemes = { light: IOThemeLight, dark: IOThemeDark };
+type IOThemeType = keyof typeof IOThemes;
+
+type IOThemeContextType = {
+  themeType: IOThemeType;
+  theme: IOTheme;
+  setTheme: (theme: IOThemeType) => void;
+};
+
+export const IOThemeContext: React.Context<IOThemeContextType> =
+  React.createContext<IOThemeContextType>({
+    themeType: Appearance.getColorScheme() === "dark" ? "dark" : "light",
+    theme:
+      Appearance.getColorScheme() === "dark" ? IOThemes.dark : IOThemes.light,
+    setTheme: constVoid
+  });
+
+export const useIOThemeContext = () => React.useContext(IOThemeContext);
+
+export const useIOTheme = () => useIOThemeContext().theme;
+
+type IOThemeContextProviderProps = {
+  theme?: IOThemeType;
+};
+
+export const IOThemeContextProvider = ({
+  children,
+  theme
+}: React.PropsWithChildren<IOThemeContextProviderProps>) => {
+  const [currentTheme, setCurrentTheme] = React.useState<IOThemeType>(
+    theme ?? "light"
+  );
+
+  return (
+    <IOThemeContext.Provider
+      value={{
+        themeType: currentTheme,
+        theme: IOThemes[currentTheme],
+        setTheme: setCurrentTheme
+      }}
+    >
+      {children}
+    </IOThemeContext.Provider>
+  );
+};

package/src/core/index.ts

@@ -6,3 +6,4 @@ export * from "./IOShapes";
 export * from "./IOSpacing";
 export * from "./IOStyleVariables";
 export * from "./IODSExperimentalContextProvider";
+export * from "./IOThemeContextProvider";