feat: improve HeaderSecondLevel a11y visibility based on scroll (#408)

## Short description
This pull request introduces enhancements to the `HeaderSecondLevel`,
focusing on improving accessibility and adding new animated reactions

## List of changes proposed in this pull request
- Modified the `importantForAccessibility` property of the `View`
component to use the new state, ensuring that it updates correctly when
the scroll position changes.
- Implemented `useAnimatedReaction` to update the
`importantForAccessibility` state based on the scroll offset, enhancing
the component's responsiveness to user interactions.

## How to test
Using a real device 📱, check each `HeaderSecondLevel` screen with
TalkBack accessibility tool

## Preview

| Before | Now |
|--------|--------|
| <video
src="https://github.com/user-attachments/assets/3b75637c-7eb2-4dab-bcd1-b0c74226dc64"/>
| <video
src="https://github.com/user-attachments/assets/d15403fd-99d5-4ae2-80fe-5724a0924e38"/>
|

> [!TIP]
> The navigation between actions shown in the video is performed using
swipe gestures with TalkBack enabled, but you can also verify its
functionality by tapping

Co-authored-by: Damiano Plebani <[email protected]>

Author: LeleDallas

src/components/layout/HeaderSecondLevel.tsx

@@ -13,6 +13,8 @@ import Animated, {
   SharedValue,
   interpolate,
   interpolateColor,
+  runOnJS,
+  useAnimatedReaction,
   useAnimatedStyle,
   useDerivedValue,
   useScrollViewOffset,
@@ -269,6 +271,31 @@ export const HeaderSecondLevel = ({
       : 1
   }));
 
+  const [importantForAccessibility, setImportantForAccessibility] =
+    React.useState<"yes" | "no-hide-descendants">("yes");
+
+  // Updates accessibility state based on scroll position.
+  useAnimatedReaction(
+    () =>
+      enableDiscreteTransition
+        ? scrollOffset.value
+        : scrollValues?.contentOffsetY.value,
+    (currentOffset, previousOffset) => {
+      if (currentOffset !== previousOffset) {
+        const offsetToCompare = enableDiscreteTransition
+          ? 0
+          : scrollValues?.triggerOffset ?? 0;
+        // Sets accessibility to "yes" when scrolled past the threshold, else hides it from screen readers.
+        const newValue =
+          (currentOffset ?? 0) > offsetToCompare && !ignoreAccessibilityCheck
+            ? "yes"
+            : "no-hide-descendants";
+        runOnJS(setImportantForAccessibility)(newValue);
+      }
+    },
+    [scrollValues, enableDiscreteTransition]
+  );
+
   return (
     <Animated.View
       accessibilityRole="header"
@@ -303,11 +330,7 @@ export const HeaderSecondLevel = ({
         <View
           ref={titleRef}
           accessibilityElementsHidden={!isTitleAccessible}
-          importantForAccessibility={
-            isTitleAccessible && !ignoreAccessibilityCheck
-              ? "yes"
-              : "no-hide-descendants"
-          }
+          importantForAccessibility={importantForAccessibility}
           accessible={isTitleAccessible}
           accessibilityLabel={title}
           accessibilityRole="header"