[IOAPPX-274] Make Button… accessibilityLabel prop optional + Improve accessibility of selection components (except ListItemSwitch)

example/src/pages/ListItem.tsx

@@ -130,23 +130,20 @@ const renderListItemNav = () => (
           onPress={() => {
             alert("Action triggered");
           }}
-          accessibilityLabel="Empty just for testing purposes"
         />
         <ListItemNav
           value={"Value"}
           description="Description"
           onPress={() => {
             alert("Action triggered");
           }}
-          accessibilityLabel="Empty just for testing purposes"
         />
         <ListItemNav
           value="A looong looooong looooooooong looooooooooong title"
           description="Description"
           onPress={() => {
             alert("Action triggered");
           }}
-          accessibilityLabel="Empty just for testing purposes"
         />
 
         <ListItemNav
@@ -155,7 +152,6 @@ const renderListItemNav = () => (
           onPress={() => {
             alert("Action triggered");
           }}
-          accessibilityLabel="Empty just for testing purposes"
         />
         <ListItemNav
           value={"Value"}
@@ -164,7 +160,6 @@ const renderListItemNav = () => (
           onPress={() => {
             alert("Action triggered");
           }}
-          accessibilityLabel="Empty just for testing purposes"
         />
         <ListItemNav
           value={"Value"}
@@ -174,7 +169,6 @@ const renderListItemNav = () => (
           onPress={() => {
             alert("Action triggered");
           }}
-          accessibilityLabel="Empty just for testing purposes"
         />
         <ListItemNav
           value={"Value"}
@@ -183,7 +177,6 @@ const renderListItemNav = () => (
           onPress={() => {
             alert("Action triggered");
           }}
-          accessibilityLabel="Empty just for testing purposes"
         />
         <ListItemNav
           value={"Value"}
@@ -192,7 +185,6 @@ const renderListItemNav = () => (
           onPress={() => {
             alert("Action triggered");
           }}
-          accessibilityLabel="Empty just for testing purposes"
           loading
         />
         <ListItemNav
@@ -201,7 +193,6 @@ const renderListItemNav = () => (
           onPress={() => {
             alert("Action triggered");
           }}
-          accessibilityLabel="Empty just for testing purposes"
           hideChevron
         />
         <ListItemNav
@@ -210,7 +201,6 @@ const renderListItemNav = () => (
           onPress={() => {
             alert("Action triggered");
           }}
-          accessibilityLabel="Empty just for testing purposes"
           topElement={{
             badgeProps: {
               text: "Novità",
@@ -224,7 +214,6 @@ const renderListItemNav = () => (
           onPress={() => {
             alert("Action triggered");
           }}
-          accessibilityLabel="Empty just for testing purposes"
           topElement={{
             badgeProps: {
               text: "Novità",
@@ -239,7 +228,6 @@ const renderListItemNav = () => (
           onPress={() => {
             alert("Action triggered");
           }}
-          accessibilityLabel="Empty just for testing purposes"
           topElement={{
             dateValue: "14/04/2024"
           }}
@@ -710,8 +698,8 @@ const renderListItemRadioWithAmount = () => (
       <ListItemRadioWithAmount
         label="Banca Intesa"
         formattedAmountString={"2,50 €"}
+        isSuggested
         suggestReason="Perché costa meno"
-        isSuggested={true}
       />
 
       <Divider />

example/src/pages/Selection.tsx

@@ -94,31 +94,22 @@ const renderCheckboxLabel = () => (
 const renderListItemCheckbox = () => (
   <>
     <ComponentViewerBox name="ListItemCheckbox">
-      <ListItemCheckbox
-        value="Usa configurazione rapida"
-        accessibilityLabel={""}
-      />
+      <ListItemCheckbox value="Usa configurazione rapida" />
       <Divider />
-      <ListItemCheckbox
-        icon="coggle"
-        value="Usa configurazione rapida"
-        accessibilityLabel={""}
-      />
+      <ListItemCheckbox icon="coggle" value="Usa configurazione rapida" />
       <Divider />
       <ListItemCheckbox
         value="Usa configurazione rapida"
         description={
           "Ti contatteranno solo i servizi che hanno qualcosa di importante da dirti. Potrai sempre disattivare le comunicazioni che non ti interessano."
         }
-        accessibilityLabel={""}
       />
       <Divider />
       <ListItemCheckbox
         value="Questa è un'altra prova ancora più lunga per andare su due righe"
         description={
           "Ti contatteranno solo i servizi che hanno qualcosa di importante da dirti. Potrai sempre disattivare le comunicazioni che non ti interessano."
         }
-        accessibilityLabel={""}
       />
       <Divider />
       <ListItemCheckbox
@@ -127,7 +118,6 @@ const renderListItemCheckbox = () => (
         description={
           "Ti contatteranno solo i servizi che hanno qualcosa di importante da dirti. Potrai sempre disattivare le comunicazioni che non ti interessano."
         }
-        accessibilityLabel={""}
       />
       <Divider />
       <ListItemCheckbox
@@ -136,15 +126,10 @@ const renderListItemCheckbox = () => (
         description={
           "Ti contatteranno solo i servizi che hanno qualcosa di importante da dirti."
         }
-        accessibilityLabel={""}
       />
     </ComponentViewerBox>
     <ComponentViewerBox name="ListItemCheckbox (disabled)">
-      <ListItemCheckbox
-        disabled
-        value="Usa configurazione rapida"
-        accessibilityLabel={""}
-      />
+      <ListItemCheckbox disabled value="Usa configurazione rapida" />
       <Divider />
       <ListItemCheckbox
         disabled
@@ -153,15 +138,13 @@ const renderListItemCheckbox = () => (
         description={
           "Ti contatteranno solo i servizi che hanno qualcosa di importante da dirti."
         }
-        accessibilityLabel={""}
       />
       <Divider />
       <ListItemCheckbox
         disabled
         selected={true}
         icon="coggle"
         value="Usa configurazione rapida"
-        accessibilityLabel={""}
       />
     </ComponentViewerBox>
   </>

src/components/banner/__test__/__snapshots__/banner.test.tsx.snap

@@ -119,6 +119,7 @@ exports[`Test Banner Components - Experimental Enabled Banner Snapshot 1`] = `
           }
         />
         <View
+          accessibilityLabel="Action text"
           accessibilityRole="button"
           accessibilityState={
             {
@@ -475,6 +476,7 @@ exports[`Test Banner Components Banner Snapshot 1`] = `
           }
         />
         <View
+          accessibilityLabel="Action text"
           accessibilityRole="button"
           accessibilityState={
             {

src/components/buttons/ButtonLink.tsx

@@ -212,7 +212,7 @@ export const ButtonLink = React.forwardRef<View, ButtonLinkProps>(
     return (
       <Pressable
         ref={ref}
-        accessibilityLabel={accessibilityLabel}
+        accessibilityLabel={accessibilityLabel || label}
         accessibilityHint={accessibilityHint}
         accessibilityRole={"button"}
         testID={testID}

src/components/buttons/ButtonOutline.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback } from "react";
+import React, { ComponentProps, useCallback } from "react";
 import {
   GestureResponderEvent,
   Pressable,
@@ -36,19 +36,21 @@ import { HSpacer } from "../spacer/Spacer";
 import { buttonTextFontSize } from "../typography";
 
 type ColorButtonOutline = "primary" | "contrast" | "danger";
-export type ButtonOutline = WithTestID<{
-  color?: ColorButtonOutline;
-  label: string;
-  fullWidth?: boolean;
-  disabled?: boolean;
-  // Icons
-  icon?: IOIcons;
-  iconPosition?: "start" | "end";
-  // Accessibility
-  accessibilityLabel: string;
-  accessibilityHint?: string;
-  onPress: (event: GestureResponderEvent) => void;
-}>;
+export type ButtonOutline = WithTestID<
+  {
+    color?: ColorButtonOutline;
+    label: string;
+    fullWidth?: boolean;
+    // Icons
+    icon?: IOIcons;
+    iconPosition?: "start" | "end";
+    // Events
+    onPress: (event: GestureResponderEvent) => void;
+  } & Pick<
+    ComponentProps<typeof Pressable>,
+    "disabled" | "accessibilityLabel" | "accessibilityHint"
+  >
+>;
 
 type ColorStates = {
   border: {
@@ -328,7 +330,7 @@ export const ButtonOutline = React.forwardRef<View, ButtonOutline>(
     return (
       <Pressable
         ref={ref}
-        accessibilityLabel={accessibilityLabel}
+        accessibilityLabel={accessibilityLabel || label}
         accessibilityHint={accessibilityHint}
         accessibilityRole={"button"}
         testID={testID}

src/components/buttons/ButtonSolid.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback, useEffect, useRef } from "react";
+import React, { ComponentProps, useCallback, useEffect, useRef } from "react";
 import {
   GestureResponderEvent,
   Pressable,
@@ -65,33 +65,32 @@ const styles = StyleSheet.create({
   }
 });
 
-export type ButtonSolidProps = WithTestID<{
-  /**
-   * @default primary
-   */
-  color?: ButtonSolidColor;
-  label: string;
-  /**
-   * @default false
-   */
-  fullWidth?: boolean;
-  /**
-   * @default false
-   */
-  loading?: boolean;
-  /**
-   * @default false
-   */
-  disabled?: boolean;
-  icon?: IOIcons;
-  /**
-   * @default start
-   */
-  iconPosition?: "start" | "end";
-  accessibilityLabel: string;
-  accessibilityHint?: string;
-  onPress: (event: GestureResponderEvent) => void;
-}>;
+export type ButtonSolidProps = WithTestID<
+  {
+    /**
+     * @default primary
+     */
+    color?: ButtonSolidColor;
+    label: string;
+    /**
+     * @default false
+     */
+    fullWidth?: boolean;
+    /**
+     * @default false
+     */
+    loading?: boolean;
+    icon?: IOIcons;
+    /**
+     * @default start
+     */
+    iconPosition?: "start" | "end";
+    onPress: (event: GestureResponderEvent) => void;
+  } & Pick<
+    ComponentProps<typeof Pressable>,
+    "disabled" | "accessibilityLabel" | "accessibilityHint"
+  >
+>;
 
 const mapColorStates: Record<
   NonNullable<ButtonSolidProps["color"]>,
@@ -263,7 +262,8 @@ export const ButtonSolid = React.forwardRef<View, ButtonSolidProps>(
         testID={testID}
         ref={ref}
         accessible={true}
-        accessibilityLabel={accessibilityLabel}
+        // Using || operator because empty string is not an accepted value
+        accessibilityLabel={accessibilityLabel || label}
         accessibilityHint={accessibilityHint}
         accessibilityState={{ busy: loading }}
         accessibilityRole={"button"}

src/components/buttons/__test__/__snapshots__/button.test.tsx.snap

@@ -172,6 +172,7 @@ exports[`Test Buttons Components - Experimental Enabled ButtonExtendedOutline Sn
 
 exports[`Test Buttons Components - Experimental Enabled ButtonLink Snapshot 1`] = `
 <View
+  accessibilityLabel="label"
   accessibilityRole="button"
   accessibilityState={
     {
@@ -1068,6 +1069,7 @@ exports[`Test Buttons Components ButtonExtendedOutline Snapshot 1`] = `
 
 exports[`Test Buttons Components ButtonLink Snapshot 1`] = `
 <View
+  accessibilityLabel="label"
   accessibilityRole="button"
   accessibilityState={
     {

src/components/listitems/ListItemCheckbox.tsx

@@ -36,12 +36,10 @@ type Props = {
 
 const DISABLED_OPACITY = 0.5;
 
-// disabled: the component is no longer touchable
-// onPress:
-type OwnProps = Props &
+type ListItemCheckboxProps = Props &
   Pick<
     React.ComponentProps<typeof Pressable>,
-    "onPress" | "accessibilityLabel" | "disabled"
+    "onPress" | "accessibilityLabel" | "accessibilityHint" | "disabled"
   >;
 
 /**
@@ -57,9 +55,10 @@ export const ListItemCheckbox = ({
   icon,
   selected,
   accessibilityLabel,
+  accessibilityHint,
   disabled,
   onValueChange
-}: OwnProps) => {
+}: ListItemCheckboxProps) => {
   const [toggleValue, setToggleValue] = useState(selected ?? false);
   // Animations
   const isPressed: Animated.SharedValue<number> = useSharedValue(0);
@@ -74,6 +73,12 @@ export const ListItemCheckbox = ({
   // Theme
   const theme = useIOTheme();
 
+  // Accessibility
+  // Comma = Small pause when announcing content
+  const fallbackAccessibilityLabel = description
+    ? `${value}, ${description}`
+    : value;
+
   const mapBackgroundStates: Record<string, string> = {
     default: hexToRgba(IOColors[theme["listItem-pressed"]], 0),
     pressed: IOColors[theme["listItem-pressed"]]
@@ -130,7 +135,8 @@ export const ListItemCheckbox = ({
       onTouchEnd={handlePressOut}
       testID="ListItemCheckbox"
       accessible={true}
-      accessibilityLabel={accessibilityLabel}
+      accessibilityLabel={accessibilityLabel || fallbackAccessibilityLabel}
+      accessibilityHint={accessibilityHint}
       accessibilityRole="checkbox"
       accessibilityState={{
         checked: selected ?? toggleValue,