4064: Announce dynamic content updates

[lunars97]

Short Description

This PR implements announcement for dynamic content which is either updated automatically or in response to a user action, to make sure that users are notified of this update in an accessible way.

Proposed Changes

• apply additional aria attributes where it is necessary
• add announcement hook to language change in web and native and make use of LiveAnnouncer.tsx component
• useTouchableOpacity instead of react-native-paper FAB to fix the chat fab button not being recognized by screen-reader also relates to Accessibility issues with screen reader #4223

Side Effects

Uses react-native Pressable instead of react-native-paper FAB for Chat Button

Checklist

• Followed the contributing guidelines and conventions
• Considered accessibility impacts and made the necessary adjustments
• Added or updated unit tests (if applicable)
• Added or updated documentation (if applicable)
• Added a release note for native (if applicable)

Testing

• Enable screen-reader
• Go to language selection
• Select a language and wait for language selection announcement through screen-reader
• Go to Feedback in native and choose useful/not useful toggle button, the state should be announced and after the feedback is sent, the success message should be announced
• Header menu in native and web should announce when the dropdown menu extended
• Also check TTS player, it should not cover the bottom navigation anymore

Resolved Issues

Fixes: #4064 #4297
Parially fixes #4223

---

[bahaaTuffaha]

• At page.tsx we have SpaceForTts this needs to be adjusted because currently it covers the last update date. I think you need just add to the ttsPlayerHeight + bottomNavigationHeight .

• Not sure about aschaffenburg cuz it doesn't have a bottom nav.

[bahaaTuffaha]

This is already good but english voice for example can't speak some languages so how about we use what is already at accessibilityLabel : userLanguageNames?.of(code) ?? name

[lunars97]

I will check it 👍

[bahaaTuffaha]

Let's hide the chatFab when the Tts player is open because it's under the player and can't be open anyway.

[lunars97]

let's ask @ulyanahoy-cloud, whether she has other ideas? @ulyanahoy-cloud what do you think about removing chat button or fitting them together by making the dialog smaller when the read aloud player is activated? Currently chat button is underneath of the read aloud player dialog 💭

[bahaaTuffaha]

There is a space at the bottom at aschaffenburg:

[lunars97]

Thanks for catching it 🙈

[lunars97]

hmm I dont have any solution for this, except for removing additional height and leaving it to cover the last update date 🤔

[bahaaTuffaha]

sorry I think the issue is not from here its from the BottomTabNavigator.tsx

sceneStyle: bottomTabsVisible
            ? undefined
            : { paddingBottom: insets.bottom + dimensions.bottomNavigationHeight },

[lunars97]

yes, I mean this. I added it to add a height to not cover the last update date, but then it breaks the whole view when there are no navigation tabs...

[bahaaTuffaha]

I can think of 2 possible solutions for the spacing at aschaffenburg:

1. at TtsPlayer.tsx

  insetBottom={bottom + (bottomTabsVisible ? dimensions.bottomNavigationHeight : 0)}

now the difficulty is where can we get the bottomTabsVisible:

const { regionCode } = useAppContext()
const { data: regions } = useLoadRegions()

 const region = regions?.find(it => it.code === regionCode)
const bottomTabsVisible = !!(
  region?.placesEnabled ||
  region?.localNewsEnabled ||
  region?.tuNewsEnabled ||
  region?.eventsEnabled
)

2. Or create a custom hook for bottom tab navigation visibility that has a context.
3. OR maybe buildConfig().featureFlags.fixedRegion but a fixed region could have a bottom nav right?