TabBar - Better accessibility roles and instructions

[nitzanyiz]

Description

• Added tab accessibility role to the tab items and tablist role to the tab controller.
• Added selected accessibility state - It was reading that everything was not selected, even when the tab was selected.
• Remove the state and test the instructions it gives on a real device. When it is not passed it doesn't give feedback that the tab was selected and doesn't state if the tab is selected when you focus it.

We can give each tab item an isSelected state and change it accordingly so a state change will only effect the specific TabItem instead of handling it in the context scope and passing it down. wdyt?

Changelog

TabBar - Added better accessibility roles.

Additional info

MADS-4590

[M-i-k-e-l]

Not sure why but it's not working for me

[M-i-k-e-l]

I think you can use currentPage.value to remove most of the code in the PR

Suggested change

	accessibilityState={{selected: selectedIndex === index}}
	accessibilityState={{selected: currentPage.value === index}}

[nitzanyiz]

Unfortunately this doesn't work because the value doesn't change with the javascript :/
Did it work for you?

[M-i-k-e-l]

Maybe it's the re-selection, I'll re-test

[M-i-k-e-l]

@nitzanyiz lets try to do what you've suggested (use useAnimatedReaction) instead of the context

[nitzanyiz]

Changed. I added useAnimatedReaction in the TabBarItem that will change its state only when it becomes selected or unselected.

[nitzanyiz]

Did you try on a real device? It not working in the inspector but does on a real device.

[M-i-k-e-l]

Yes, I've tested on a real device withe the public demo

[nitzanyiz]

@M-i-k-e-l I changed the state to be controlled in the TabBarItem. Wdyt?