feat: Support finding elements by aria-label and aria-labelledby (form helpers + assertions) - #319
Conversation
Allow form fields to be located by their accessible name provided via `aria-label` or `aria-labelledby`, in addition to `<label>` elements. When a field is reachable by both, the `<label>` match takes precedence.
germsvel
left a comment
There was a problem hiding this comment.
Thanks for opening this PR @Wigny! I really appreciate it.
(sorry for radio silence on my side. I get back to phoenix_test as much as I can, but sometimes I'm too swamped).
There are 2 open questions that I need to think about before merging this:
-
Should we change the order of precedence?
aria-labelled-by>aria-label>label/inner text? I believe that's how the browser works. We've tried to keep in line with that as much as possible, but it might be overly expensive here, and it might be worth the trade-off to do it like you have here. That's been an issue I've run into before when thinking about implementing this, so perhaps it just makes sense to support it in a different order. -
This only supports finding elements by
aria-label/aria-labelled-byin assertions. Things likeclick_button("Close")where "Close" is thearia-label="Close"don't work with these changes (I tested that briefly). And I'm not sure if this supports form helpers (likefill_in,check, etc.). That's not the end of the world. It just means we can't close the related GitHub issue. But we could get this in, and then try to layer on support for aria labels in a separate PR.
What do you think? You interested in taking a stab at support aria-label and labelled by for other things too? Or do you want to change the title/description to be about aria-label in assertion helpers?
| `aria-label` or `aria-labelledby` attribute. Note: if a field is reachable by | ||
| both a `<label>` and an `aria-*` attribute, the `<label>` match takes precedence. |
There was a problem hiding this comment.
Thanks for adding docs!
I know this is true in the code, but I wonder if we should do it the other way around: aria-labelled-by > aria-label > label/inner-text. I believe that's how browsers sort the priority (I was reading MDN).
But that also brings up a problem -- finding by aria-labelled-by is expensive, since we're trying to find it across all the DOM :( So, maybe this is a good trade-off? I don't know, to be honest. I'm gonna think about it a little.
|
Actually, since this is a net improvement. I'm okay with going with this. I also think it's okay that the precedence is inverted, especially since you mentioned it in the docs. I'm gonna go ahead and merge this as is, and then, I'll see about layering on But if you have thoughts on the precedence part, I'd love to hear them! We can always change things a bit. |
Closes #243.