[findByLabelText] Adds a bad example using for w/ a non-form element (#534)

This came up at my work today. An engineer thought that a `for` attr on a `<label>` along with a related `<section>` `id` can be queried by `findByLabelText`.

But really, we end up with this error:
```
Timed out retrying: Found a label with the text of: Photos, however no form control was found associated to that label. Make sure you're using the "for" attribute or "aria-labelledby" attribute correctly.
```

I think making that explicit in the docs would avoid future confusion.

Author: sharmilajesupaul

docs/dom-testing-library/api-queries.md

@@ -220,6 +220,16 @@ If it is important that you query an actual `<label>` element you can provide a
 const inputNode = screen.getByLabelText('Username', { selector: 'input' })
 ```
 
+Note that it will not work in the case where a `for` attr on a `label` matches and `id` field on a non-form element.
+
+```js
+// This case is not valid
+// for/htmlFor between label and an element that is not a form element
+<section id="photos-section">
+<label for="photos-section">Photos</label>
+</section>
+```
+
 ### `ByPlaceholderText`
 
 > getByPlaceholderText, queryByPlaceholderText, getAllByPlaceholderText,