eeue56 / eeue56/elm-html-test

Some way to find an element labelled by another

Open
#52 1 comment 2 reactions 1 assignee Claimed by @rtfeldman View on GitHub
Dominant language
Elm
Stars
68
Forks
15
PR merge metrics
No merged PRs in 30d

Description

Split from https://github.com/eeue56/elm-html-test/issues/32 by request.

some way to find the input that's associated with a label that matched another selector. In this example, find the `input` associated with the "A" label, and not the other `input` (this should also work in cases where the input and the label aren't siblings):

```elm
div []
[ label [ for "input-1" ] [ text "A" ]
, label [ for "input-2" ] [ text "B" ]
, input [ id "input-1" ] []
, input [ id "input-2" ] []
]
```

Possible low-level API: (See also https://github.com/eeue56/elm-html-test/issues/51)
```elm
dom
|> Query.find [ tag "label", text "A" ]
|> Query.getAttribute "for"
|> (\labelFor -> Query.find [ tag "input", id labelFor ] dom)
```

(I guess Query.getAttribute would probably have to return `Result _ String` or even `Result _ (Maybe String)` instead of `String`.)

Possible high-level API:
```elm
Query.find
[ tag "input"
, labelledBy [ tag "label", text "A" ]
]
```

Note that the solution should be usable both for the `for` attribute in `label` elements, and for [`aria-labelledby` attribute](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-labelledby_attribute) on all elements.

Contributor guide

No contributing guide indexed for this repository

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.