feat: add support for scoped queries

[smeijer]

What:
Add support for scoped queries.

Imagine having a checkout form with a shipping address and a billing address. Something like:

playground

<div>
  <form aria-labelledby="shipping-addr">
    <h1 id="shipping-addr">shipping</h1>
    <label for="input1">address</label>
    <input id="input1" name="address" placeholder="address" autocomplete="off" />
  </form>

  <form aria-labelledby="billing-addr">
    <h1 id="billing-addr">billing</h1>
    <label for="input2">address</label>
    <input id="input2" name="address" placeholder="address" autocomplete="off" />
  </form>
</div>

If we would select the "address input", playground will currently come up with a query like:

screen.getByRole('textbox', {
  name: /address/i
});

Which isn't correct. As that query will match both the shipping address as well as the billing address, and thereby it will error.

With this pull-request, playground will suggest a scoped query:

const view = within(screen.getByRole('form', {
  name: /billing/i
}));

view.getByRole('textbox', {
  name: /address/i
});

Why:
Because it's really nice!

How:

Checklist:

• Tests
• Ready to be merged