Skip to content

Allow custom accessibility labels within the bottom sheet #1311

@BethThomas141

Description

@BethThomas141

Feature Request

Currently in BottomSheetBackground.tsx there is an accessibility label of "Bottom Sheet" and in BottomSheetHandlContainer.tsx there is an accessibility label of "Bottom sheet handle" with an accessibility hint also using the phrase "Bottom Sheet". We would like the option to override the phrase "Bottom sheet" on all of these accessibility labels and use a more user-friendly term.

Why it is needed

We are making an app with a high focus on accessibility using this drawer.
Suppose the drawer contains a list of a users nearby destinations, and is understood by us and as users as the 'nearby drawer'.
When using a screen reader and swiping through selectable on-screen components, when you reach the nearby drawer, it reads the phrase "Bottom sheet handle, adjustable", and on another swipe we hear "Bottom sheet, adjustable".

To users, it's not particularly clear what the phrase "Bottom sheet" means. It would be extremely helpful to us if we could instead have them hear:
"Nearby drawer handle, adjustable", and on another swipe "Nearby drawer, adjustable".

Possible implementation

<BottomSheet> could take a new prop e.g.

<BottomSheet ... accessibleSheetName={} ...>

and this could be passed in to the accessibility labels, e.g. in BottomSheetHandleContainer.tsx:

<Animated.View
        key="BottomSheetHandleContainer"
        accessible={true}
        accessibilityRole="adjustable"
        accessibilityLabel={`${accessibleSheetName} handle`}
        accessibilityHint={`Drag up or down to extend or minimize the ${accessibleSheetName}`}
        onLayout={handleContainerLayout}
      >

Metadata

Metadata

Assignees

No one assigned

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions