Add accessibility

App.tsx

@@ -5,11 +5,14 @@ import * as React from 'react';
 import {useCallback, useEffect, useState} from 'react';
 import {LogBox, Platform, StatusBar} from 'react-native';
 import 'react-native-gesture-handler';
+import {GestureHandlerRootView} from 'react-native-gesture-handler';
 import {SafeAreaProvider} from 'react-native-safe-area-context';
 import {Provider} from 'react-redux';
 import {bindActionCreators} from 'redux';
 import {DB_CONNECTION_NAME} from './src/@config/database';
 import {agentContext, linkHandlers} from './src/agent';
+import './src/agent/index';
+import {AccessibilityProvider} from './src/contexts/AccessibiltyContext';
 import IntentHandler from './src/handlers/IntentHandler';
 import {addLinkListeners} from './src/handlers/LinkHandlers';
 import LockingHandler from './src/handlers/LockingHandler';
@@ -22,8 +25,6 @@ import {getDbConnection} from './src/services/databaseService';
 import store from './src/store';
 import {getUsers} from './src/store/actions/user.actions';
 import {PlatformsEnum} from './src/types';
-import {GestureHandlerRootView} from 'react-native-gesture-handler';
-import './src/agent/index';
 
 LogBox.ignoreLogs([
   // Ignore require cycles for the app in dev mode. They do show up in Metro!
@@ -119,7 +120,9 @@ export default function App() {
         <NavigationContainer onReady={() => setNavigationIsReady(true)} ref={navigationRef}>
           <OnTouchProvider>
             <GestureHandlerRootView style={{flex: 1}}>
-              <AppNavigator />
+              <AccessibilityProvider>
+                <AppNavigator />
+              </AccessibilityProvider>
             </GestureHandlerRootView>
           </OnTouchProvider>
         </NavigationContainer>

src/@config/toasts/index.tsx

@@ -1,7 +1,8 @@
-import React from 'react';
+import React, {useEffect} from 'react';
 import {ToastConfigParams} from 'react-native-toast-message';
 
 import SSIToast from '../../components/messageBoxes/toasts/SSIToast';
+import {useAccessibility} from '../../hooks/useAccessibility';
 import {IToastCustomProps, ToastTypeEnum} from '../../types';
 
 export const toastsBottomOffset = 0;
@@ -12,11 +13,19 @@ export const toastConfig = {
   ssiAlertToastSuccess: (params: ToastConfigParams<IToastCustomProps>) => {
     const {text1, text2} = params;
     const {showBadge = true} = params.props;
+    const {announce} = useAccessibility();
+    useEffect(() => {
+      announce({message: `Success: ${text1 ?? ''} ${text2 ?? ''}`});
+    }, []);
     return <SSIToast type={ToastTypeEnum.TOAST_SUCCESS} title={text1} message={text2} showBadge={showBadge} />;
   },
   ssiAlertToastError: (params: ToastConfigParams<IToastCustomProps>) => {
     const {text1, text2} = params;
     const {showBadge = true} = params.props;
+    const {announce} = useAccessibility();
+    useEffect(() => {
+      announce({message: `Error: ${text1 ?? ''} ${text2 ?? ''}`});
+    }, []);
     return <SSIToast type={ToastTypeEnum.TOAST_ERROR} title={text1} message={text2} showBadge={showBadge} />;
   },
 };

src/components/NavigationButton.tsx

@@ -21,7 +21,11 @@ type NavigationButtonProps = PressableProps & {
 export const NavigationButton = (props: NavigationButtonProps) => {
   const {onPress, label, disabled, ...pressableProps} = props;
   return (
-    <NavigationButtonContainer onPress={onPress} style={({pressed}) => ({opacity: disabled ? 0.4 : pressed ? 0.7 : 1})} {...pressableProps}>
+    <NavigationButtonContainer
+      accessibilityRole="link"
+      onPress={onPress}
+      style={({pressed}) => ({opacity: disabled ? 0.4 : pressed ? 0.7 : 1})}
+      {...pressableProps}>
       <SSITextH3RegularLightStyled>{label}</SSITextH3RegularLightStyled>
       <ChevronIcon size={16} color={fontColors.light} style={{marginRight: 8, transform: [{rotate: '-90deg'}]}} />
     </NavigationButtonContainer>

src/components/activity/ActivityEventRow.tsx

@@ -32,7 +32,11 @@ const Description = styled.View`
 
 export const ActivityEventRow = forwardRef(
   (p: RowProps, _: ForwardedRef<unknown>): JSX.Element => (
-    <Container onPress={p.onPress} style={{backgroundColor: backgroundColors[p.index % 2 === 0 ? 'primaryDark' : 'secondaryDark']}}>
+    <Container
+      accessible
+      onPress={p.onPress}
+      accessibilityHint="See more about this activity"
+      style={{backgroundColor: backgroundColors[p.index % 2 === 0 ? 'primaryDark' : 'secondaryDark']}}>
       <View style={{flex: 1}}>
         <SSITextH2SemiBoldLightStyled>{p.title}</SSITextH2SemiBoldLightStyled>
         {p.subtitle && <SSITextH4LightStyled>{p.subtitle}</SSITextH4LightStyled>}

src/components/activity/ActivityList.tsx

@@ -94,6 +94,7 @@ const ActivityList = ({activities, loading, onActivityPress, onRefresh, listTitl
         <>
           <Search search={search} onSearchChange={setSearch} {...searchInputProps} />
           <SSITextH3LightStyled
+            accessibilityRole="header"
             style={{
               paddingHorizontal: 24,
               borderBottomWidth: 1,
@@ -102,6 +103,8 @@ const ActivityList = ({activities, loading, onActivityPress, onRefresh, listTitl
             {listTitle}
           </SSITextH3LightStyled>
           <SwipeListView
+            accessibilityRole="list"
+            accessibilityLabel="activities"
             style={{
               backgroundColor: backgroundColors.primaryDark,
             }}

src/components/activity/Info.tsx

@@ -58,6 +58,7 @@ export type Props = {
 
 const Info = ({header, info, onPress, showValues = false}: Props) => {
   const itemsShared = Object.entries(info);
+  const disabled = !onPress || itemsShared.length === 0;
   return (
     <SharedInfoContainer>
       {header && (
@@ -72,8 +73,14 @@ const Info = ({header, info, onPress, showValues = false}: Props) => {
           <Divider />
         </>
       )}
-      <SharedInfoBody onPress={onPress} disabled={!onPress}>
-        <SharedInfoItemList style={{gap: showValues ? 24 : 12}}>
+      <SharedInfoBody
+        onPress={onPress}
+        disabled={disabled}
+        accessibilityState={{disabled}}
+        accessibilityRole="list"
+        accessibilityLabel="Shared information"
+        accessibilityHint={disabled ? 'No information shared' : ''}>
+        <SharedInfoItemList importantForAccessibility="no" style={{gap: showValues ? 24 : 12}}>
           {itemsShared.map(([key, value]) => (
             <View key={key}>
               <SharedInfoItemKey>{key}</SharedInfoItemKey>

src/components/activity/Section.tsx

@@ -5,7 +5,9 @@ import {SSITextH3LightStyled, SSITextH4LightStyled} from '../../styles/component
 
 export const Section = ({title, children}: {title: string; children: React.ReactNode}) => (
   <View style={{gap: 8}}>
-    <SSITextH3LightStyled style={{marginHorizontal: 8}}>{title}</SSITextH3LightStyled>
+    <SSITextH3LightStyled accessibilityRole="header" style={{marginHorizontal: 8}}>
+      {title}
+    </SSITextH3LightStyled>
     {children}
   </View>
 );

src/components/activity/Status.tsx

@@ -36,7 +36,7 @@ const Status = ({activity}: Props) => {
   const {title, description, icon} = getActivityStatusText(activity);
   const colors = colorMap[activity.result];
   return (
-    <Container style={{backgroundColor: colors.background}}>
+    <Container accessible accessibilityLabel={`${activity.result}: ${title}. ${description}`} style={{backgroundColor: colors.background}}>
       {icon}
       <TextContainer>
         <SSITextH3Styled style={{color: colors.title}}>{title}</SSITextH3Styled>

src/components/bars/ContactsHeader/index.tsx

@@ -5,8 +5,8 @@ import {Back, Title} from '../components';
 
 export type Props = NativeStackHeaderProps;
 
-const ContactsHeader = ({options: {title, ...rest}, navigation}: Props) => {
-  const Left = useMemo(() => <Back onPress={navigation.goBack} />, [navigation]);
+const ContactsHeader = ({options: {title}, navigation}: Props) => {
+  const Left = useMemo(() => <Back onPress={navigation.goBack} accessibilityHint="Navigate back to the previous screen" />, [navigation]);
   const Center = useMemo(() => <Title>{title ?? 'Unknown contact'}</Title>, [title]);
 
   return <HeaderSecondaryBar left={Left} center={Center} />;

src/components/bars/FilterBar/index.tsx

@@ -1,15 +1,15 @@
+import {SSITextH7LightStyled as InactiveLabelText} from '@sphereon/ui-components.ssi-react-native';
 import React, {FC, ReactElement} from 'react';
 import {TouchableWithoutFeedback} from 'react-native';
-import {SSITextH7LightStyled as InactiveLabelText} from '@sphereon/ui-components.ssi-react-native';
 import Localization from '../../../localization/Localization';
-import {showToast} from '../../../utils';
 import {
   FilterBarActiveLabelStyled as ActiveLabel,
+  FilterBarActiveLabelTextStyled as ActiveLabelText,
   FilterBarContainerStyled as Container,
   FilterBarInactiveLabelStyled as InactiveLabel,
-  FilterBarActiveLabelTextStyled as ActiveLabelText,
 } from '../../../styles/components';
 import {ToastTypeEnum} from '../../../types';
+import {showToast} from '../../../utils';
 
 const FilterBar: FC = (): ReactElement => {
   const labels = [
@@ -36,7 +36,7 @@ const FilterBar: FC = (): ReactElement => {
 
   const getLabelElements = (): Array<ReactElement> => {
     return labels.map((label, index) => (
-      <TouchableWithoutFeedback key={index} onPress={showNotYetImplementedToast}>
+      <TouchableWithoutFeedback key={index} onPress={showNotYetImplementedToast} accessible={false} importantForAccessibility="no">
         {label.active ? (
           <ActiveLabel>
             <ActiveLabelText>{label.text}</ActiveLabelText>
@@ -50,7 +50,15 @@ const FilterBar: FC = (): ReactElement => {
     ));
   };
 
-  return <Container>{getLabelElements()}</Container>;
+  return (
+    <Container
+      accessible
+      accessibilityRole="tablist"
+      accessibilityHint={Localization.translate('item_not_yet_available_message')}
+      accessibilityState={{disabled: true}}>
+      {getLabelElements()}
+    </Container>
+  );
 };
 
 export default FilterBar;

src/components/bars/OnboardingHeader/index.tsx

@@ -92,7 +92,6 @@ const OnboardingHeader: FC<HeaderBarProps> = ({title, stepConfig, onBack, header
   );
 
   const showCogWheel = useMemo(() => {
-    console.log('current step', currentStep);
     if (!currentStep) return false;
     return currentStep < 4 && !stepConfig;
   }, [currentStep]);