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]

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?

[lunars97]

I will try this out, thank you 💚

[lunars97]

I guess the 3rd option is the simplest and robust :)

[bahaaTuffaha]

Unless they add a tab 👀 ... so it needs a comment just incase.

[lunars97]

hmm i have't thougth about, good point 👍