feat: Add accessibilityLabel property to enhance accessibility for interaction components

Author: abhay-keyvalue

src/components/card.tsx

@@ -83,6 +83,7 @@ const Card = (props: NotificationCardProps): ReactElement => {
       <View style={style.cardIconContainer}>
         <TouchableOpacity
           disabled={Boolean(!onAvatarClick)}
+          accessibilityLabel={`siren-notification-avatar-${notification.id}`}
           onPress={avatarClick}
           style={[style.cardIconRound, styles.cardIconRound]}
         >
@@ -101,7 +102,7 @@ const Card = (props: NotificationCardProps): ReactElement => {
 
     const isSuccess = await onDelete(notification.id, false);
 
-    if (isSuccess) 
+    if (isSuccess)
       Animated.timing(opacity, {
         toValue: 0.1,
         duration: 300,
@@ -118,6 +119,7 @@ const Card = (props: NotificationCardProps): ReactElement => {
       onPress={cardClick}
       activeOpacity={0.6}
       testID='card-touchable'
+      accessibilityLabel={`siren-notification-card-${notification.id}`}
       style={[style.cardWrapper, styles.cardWrapper, !notification?.isRead && styles.highlighted]}
     >
       <View

src/components/closeIcon.tsx

@@ -34,6 +34,7 @@ const CloseIcon = ({
       onPress={() => onDelete(notification.id)}
       style={[style.closeButton, styles.closeButton]}
       testID='delete-button'
+      accessibilityLabel={`siren-notification-delete${notification.id}`}
     >
       <>{icon}</>
     </TouchableOpacity>

src/components/errorWindow.tsx

@@ -31,7 +31,7 @@ const ErrorWindow = (props: {
   const iconStyle = { opacity: darkMode ? 0.6 : 1 };
 
   return (
-    <View style={[style.container, styles.container]}>
+    <View accessibilityLabel='siren-error-state' style={[style.container, styles.container]}>
       {customErrorWindow || (
         <>
           <View style={[style.iconContainer, containerStyle]}>

src/components/header.tsx

@@ -54,7 +54,7 @@ const Header = (props: HeaderProps): ReactElement => {
   const renderBackButton = () => {
     if (showBackButton)
       return (
-        <TouchableOpacity style={style.backIcon} onPress={onBackPress}>
+        <TouchableOpacity accessibilityLabel='siren-header-back' style={style.backIcon} onPress={onBackPress}>
           {backButton || <BackIcon styles={styles} />}
         </TouchableOpacity>
       );
@@ -73,6 +73,7 @@ const Header = (props: HeaderProps): ReactElement => {
       {!hideClearAll && (
         <TouchableOpacity
           disabled={clearAllDisabled}
+          accessibilityLabel='siren-header-clear-all'
           onPress={onPressClearAll}
           style={[style.clearIconContainer, clearAllDisabled && style.lowOpacity]}
         >

src/components/sirenInbox.tsx

@@ -296,7 +296,11 @@ const SirenInbox = (props: SirenInboxProps): ReactElement => {
           <ErrorWindow styles={styles} darkMode={darkMode} customErrorWindow={customErrorWindow} />
         );
 
-      return listEmptyComponent || <EmptyWindow styles={styles} darkMode={darkMode} />;
+      return (
+        <View style={style.container} accessibilityLabel='siren-empty-state'>
+          {listEmptyComponent || <EmptyWindow styles={styles} darkMode={darkMode} />}
+        </View>
+      );
     }
 
     return (
@@ -406,6 +410,7 @@ const SirenInbox = (props: SirenInboxProps): ReactElement => {
         removeClippedSubviews
         maxToRenderPerBatch={20}
         windowSize={3}
+        accessibilityLabel='siren-notification-list'
       />
     );
   };

src/components/sirenInboxIcon.tsx

@@ -151,6 +151,7 @@ const SirenInboxIcon = (props: SirenInboxIconProps) => {
   return (
     <TouchableOpacity
       testID='notification-icon'
+      accessibilityLabel='siren-notification-icon'
       disabled={disabled}
       onPress={onPress}
       style={[styles.iconContainer, container]}