callstack / callstack/react-native-paper

Dialog.Title should accept a ref to allow focusing on modal open

Open
#4,383 0 comments 0 reactions 0 assignees View on GitHub
feature request
Dominant language
TypeScript
Stars
14.5k
Forks
2.2k
Avg merge
5d 23h
Merged PRs (30d)
12

Description

**Is your feature request related to a problem? Please describe.**
Currently, RNP modals are serious barriers to accessibility anywhere they are used, because they do not receive screen-reader focus when they open. This is a separate, and serious, [issue](https://github.com/callstack/react-native-paper/issues/3912). However, one workaround is to use React's `AccessibilityInfo.setAccessibilityFocus()` to manually set screen-reader focus to an element _within_ the dialog, usually the dialog header, on dialog open.

To do this, you must get a `reactTag` to pass to `setAccessibilityFocus()`; `findNodeHandle()` returns a `reactTag` when you pass it a `ref`. **SO**, to be able to set focus to the title of a dialog, you need to be able to pass a `ref` to the title of the dialog.

**Describe the solution you'd like**
Therefore, `Dialog.Title` should accept a `ref`, so focus can be manually set to it when using `setAccessibilityFocus()`.

**Describe alternatives you've considered**
The alternative is to either fix the underlying [issue](https://github.com/callstack/react-native-paper/issues/3912), or to not use RNP components for the dialog title. (Or, something janky like setting focus to a visually hidden title, and hiding the visual title from screen readers; but this type of approach is not best-practice.)

**Additional context**
I looked at opening a PR for this, and it will be more complicated than I'd hoped. `DialogTitle` needs to be wrapped in `forwardRef`; but then `TextComponent`, which can be either `Text` or `Title`, needs to also be able to take a `ref`, so both of those need to be wrapped in `forwardRef` as well.

I'd be happy to take this on if there was enthusiasm from the core team, and resources to review and approve it. But this would be a more involved PR than I've done for the project before, and would probably involve setting up the repo locally, enabling the linting etc. As the last couple tiny/simple PRs I've put up have been sitting now for 2 and 4 months respectively, I'd like to have a signal that the work will go somewhere before I jump in deeper.

But, if there are resources for approval and interest in it, it could be a good path for me to become more involved in supporting the project.

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.