More accessibility customization - take background component out of focus order

[ally-bryand]

Hi @gorhom.

My team is currently using your bottom sheet, but the bottom sheet currently has some built-in a11y features that don't align with our needs. Specifically, the BottomSheetBackgroundComponent is accessible, and shows up in the accessibility focus order. We need the option to set that accessible prop to false for it to not be focusable. Here is the code I'm referring to:

// BottomSheetBackground.tsx

const BottomSheetBackgroundComponent = ({
  pointerEvents,
  style,
}: BottomSheetBackgroundProps) => (
  <View
    pointerEvents={pointerEvents}
    **accessible={true}**
    accessibilityRole="adjustable"
    accessibilityLabel="Bottom Sheet"
    style={[styles.container, style]}
  />
);

Would you be okay with making accessible modifiable through props? If so, I would be okay with attempting to do the work myself and submitting an MR.

[consuelo-sanna]

Hi guys,
I have the same problem and I'm currently using a patch for setting the accessibility properties, there are already a few PRs for v2 and v4, I can make a PR for v5 if needed

Anyway, I've noticed that if I set the BottomSheetBackgroundComponent accessible={false}, I CAN'T close the Bottom Sheet with the voice over if I "magic tap" in the backDrop, unless the modal is far smaller then the screen.

Have you @ally-bryand the same problem?
Does someone know why setting the background to not accessible only passes the event if the bottom sheet does not cover more than 80% of the screen ??

[ally-bryand]

Hey @consuelo-sanna. We haven't run into that specific issue since we are not using BottomSheetBackgroundComponent. But we have run into issues where our app behaves differently based on the a11y tools being open or not. We had to resort to checking if the tools were open and conditional change our components/props based on that.

[consuelo-sanna]

Hi sorry, do you mean you are not using the BottomSheetBackDropComponent perhaps?
The backgroundComponent is part of the bottom sheet as far as I know, unless you set it to null or use a custom one (but based on this discussion I don't think that's the case)

[ally-bryand]

Sorry, you are right and my wording was inaccurate. We are using the BottomSheetBackgroundComponent, we just haven't set accessible={false}.

To clarify, we want the ability to do that. We just haven't forked the code or anything like that in order to modify that prop or add the ability to pass the value in as a prop