getByRole should accept a second argument to refine query as in react-testing-library

Describe the Feature

Should be able to query a Button element as follows:

getByRole('button', {name: /submit/i})

At the present time, this is impossible so I have to add redundant accessiblityLabel props, for example:

<Button accessibilityLabel="submit-button">Submit</Button>

And then, use queryByA11yLabel('submit-button')

[AugustinLF]

A thing you’ll need to consider is that if you match by name, you should also match by label text, since you should definitely match <Button accessibilityLabel="exit" onPress={...}><Icon type="door" /></Button> with getByRole('button', {name: 'exit'}).

Not necessarily relevant but which might be interesting to you, we’ve reimplemented that in userland in our codebase. As you can see the reasoning is the same (first find the element with the role, then try to match the name in its children). Since it does work for us (and does seem to work as well as web), I guess your implementation should do the job.

const queryByAccessibleName = (renderApi: Queries, name: string) =>
  renderApi.queryByLabelText(name) || renderApi.queryByText(name)

const getByRole = (role: AccessibilityRole, options: { name?: string } = {}) => {
      const elements = queryAllByAccessibleName(renderResult, name)

      const e = new Error(
        `Unable to find an accessible element with the role "${role}" and name "${name}"`
      )
      e.name = 'TestingLibraryElementError'
      Error.captureStackTrace(e, getByRole)

      if (elements.length === 0) {
        throw e
      }

      const elementWithRole = elements.find((element) => element.props.accessibilityRole === role)
      if (elementWithRole) {
        return elementWithRole
      }

      // a text can be nested within a button, so the accessibilityRole wouldn't be on the same
      // element
      try {
        const roledElements = renderResult.getAllByRole(role)
        for (const roledElement of roledElements) {
          const withinRoledElement = nativeWithin(roledElement)
          const labelledTextWithinRoledElement = queryByAccessibleName(withinRoledElement, name)
          if (labelledTextWithinRoledElement) {
            return labelledTextWithinRoledElement
          }
        }
        return
      } catch {
        throw e
      }

      throw e
}

[kiranjd]

@thymikee Issued a draft PR. Appreciate your feedback