Narrator not announcing TouchableOpacity and TouchableHighlight components when they have borderRadius in style

[ishumsft]

Problem Description

The TouchableOpacity and TouchableHighlight components are not being announced by narrator when they have a style property of borderRadius.

The problem is similar to the problem happening in this issue

Steps To Reproduce

1. Create a TouchableOpacity
2. Create a Text element inside the TouchableOpacity with the text "Test Text"
3. Set accessibilityLabel = {"Test Text"} on the TouchableOpacity
4. Set accessibilityRole={"button"} on the TouchableOpacity
5. Set onPress = {() => console.log("Clicked!")} on the TouchableOpacity
6. Set style = {{ borderRadius: 8 }} on the TouchableOpacity

Expected Results

With narrator on, when highlighting this TouchableOpacity component by reaching it via pressing tab; narrator should read the accessibilityLabel

CLI version

7.0.3

Environment

System:
    OS: Windows 10 10.0.22000
    CPU: (8) x64 11th Gen Intel(R) Core(TM) i7-1185G7 @ 3.00GHz
    Memory: 15.25 GB / 31.71 GB
  npmPackages:
    @react-native-community/cli: Not Found
    react: ^17.0.2 => 17.0.2
    react-native: ^0.68.2 => 0.68.2
    react-native-windows: ^0.68.2 => 0.68.6
  npmGlobalPackages:
    *react-native*: Not Found

Target Platform Version

No response

Target Device(s)

Desktop

Visual Studio Version

Visual Studio 2019

Build Configuration

Debug

Snack, code example, screenshot, or link to a repository

https://snack.expo.dev/yewC-vxP5

[chiaramooney]

On react-native-gallery running on 0.69 I'm not able to repro this issue. The TouchableHighlight page does include examples with borderRadius and all of those are still announced and focusable with accessibilityLabel and accessibilityRole set.

See here for the gallery TouchableHighlight source: https://github.com/microsoft/react-native-gallery/blob/main/src/examples/TouchableHighlightExamplePage.tsx

Tested on 0.68 version on gallery and also is working. Will try XAMLIslands now.

[chiaramooney]

Check on XAMLIslands as well and was able to achieve narrator focus and announcing again. Maybe check the react-native-gallery touchable examples and see if there are any differences in the code.

[ishumsft]

@chiaramooney thanks for the reply. I just want to bring this to your attention:

This issue is not always reproducible as seen in conversation here: https://github.com/microsoft/react-native-windows/issues/6706#issuecomment-745218501

Also going through the comments on that issue, I understood that the fix for that was only went in 0.63 and not further https://github.com/microsoft/react-native-windows/pull/6847#issuecomment-759218291

[chiaramooney]

@ishumsft Interesting my tests were in a standalone app, and I couldn't repro the issue. From the thread, it sounds like the fix was not added to other releases because the issue seemed to be fixed in later RNW versions already. Maybe a good next step would be to add the fix that went into 63 into your copy of RNW and see if that resolves the issue for you. If so, we can look at adding that fix to later RNW versions.

[ishumsft]

@chiaramooney I tried apply the fix that went into 63 to my local copy. But that as well didn't work. I was not able to repro this in a separate app. But this is happening in our app 100% of the time.

Let me add some screen shots for reference.

I added two buttons side by side with all the same code but the difference of borderRadius in style. The button with the borderRadius was not working as expected while the other one was being announced by the narrator.

You can check the code I added here https://alexanderplatz.visualstudio.com/To-Do/_git/to-do-windows/commit/a368b8e029c05a4432b7f2eac17e83b047402388?refName=refs%2Fheads%2Fmaster

In the screen shots we can see the Narrator focus (in blue border) only appears on the non-rounded buttons. Although I can move my keyboard focus (in black border) to all the buttons rounded or otherwise. The narrator focus only remains on the non-rounded buttons (cross button has no border radius). The narrator announces the buttons correctly when they have the narrator focus (blue border)

[chiaramooney]

Flagging to discuss in triage.

[chrisglein]

Try getting a XAML live tree view + properties of the app and diff between what Chiara is seeing in her repro.

[ishumsft]

Sharing the live tree view, element properties of both the rounded and unrounded buttons

With border radius:

Property	Value
IsDataValidForForm	True
AcceleratorKey	Property does not exist
AccessKey	Property does not exist
AriaProperties	Property does not exist
AriaRole	Property does not exist
BoundingRectangle	[l=1378,t=1777,r=1522,b=1921]
ClassName	DynamicAutomationPeer
ClickablePoint	{X=1450,Y=1849}
ControlType	Button(50000)
Culture	16393
FillType	0
FrameworkId	XAML
HasKeyboardFocus	False
HeadingLevel	HeadingLevel_None (80050)
HelpText	Property does not exist
IsContentElement	False
IsControlElement	False
IsDialog	False
IsEnabled	True
IsKeyboardFocusable	False
IsOffscreen	False
IsPassword	False
IsPeripheral	False
IsRequiredForForm	False
LiveSetting	0
LocalizedControlType	button
Name	This button has border radius
NativeWindowHandle	0
OptimizeForVisualContent	False
Orientation	None(0)
ProcessId	11144
ProviderDescription	[pid:11144,providerId:0x0 Main(parent link):Unidentified Provider (unmanaged:Windows.UI.Xaml.dll)]
RuntimeId	[2A,13098C,4,4C]
VisualEffects	0

Without border radius:

Property	Value
AcceleratorKey	Property does not exist
AccessKey	Property does not exist
AriaProperties	Property does not exist
AriaRole	Property does not exist
BoundingRectangle	[l=1762,t=1777,r=1906,b=1921]
ClassName	DynamicAutomationPeer
ClickablePoint	{X=1834,Y=1849}
ControlType	Button(50000)
Culture	16393
FillType	0
FrameworkId	XAML
HasKeyboardFocus	False
HeadingLevel	HeadingLevel_None (80050)
HelpText	Property does not exist
IsContentElement	True
IsControlElement	True
IsDataValidForForm	True
IsDialog	False
IsEnabled	True
IsKeyboardFocusable	True
IsOffscreen	False
IsPassword	False
IsPeripheral	False
IsRequiredForForm	False
LiveSetting	0
LocalizedControlType	button
Name	This button does not have border radius
NativeWindowHandle	0
OptimizeForVisualContent	False
Orientation	None(0)
ProcessId	11144
ProviderDescription	[pid:11144,providerId:0x0 Main(parent link):Unidentified Provider (unmanaged:Windows.UI.Xaml.dll)]
RuntimeId	[2A,13098C,4,4E]
VisualEffects	0

Please notice the property IsKeyboardFocusable for both the buttons

[chiaramooney]

@ishumsft I think at this time the team is going to ask that you debug this issue yourself and put out a PR for the fix, since we are unable to reproduce the scenario on any of our branches/sample apps/fresh apps. Debugging information can be found here: https://github.com/microsoft/react-native-windows/wiki/VS-Code-Debugging

[ghost]

This issue has been automatically marked as stale because it has been marked as requiring author feedback but has not had any activity for 7 days. It will be closed if no further activity occurs within 7 days of this comment.

[chiaramooney]

Unassigning myself, as ask is now for issue filer to resolve bug.

[AgneLukoseviciute]

Closing out since this doesn't affect the team anymore and we haven't been able to repro anywhere else.