{"action":"created","issue":{"url":"https://api.github.com/repos/jbandura/ember-legit-forms/issues/17","repository_url":"https://api.github.com/repos/jbandura/ember-legit-forms","labels_url":"https://api.github.com/repos/jbandura/ember-legit-forms/issues/17/labels{/name}","comments_url":"https://api.github.com/repos/jbandura/ember-legit-forms/issues/17/comments","events_url":"https://api.github.com/repos/jbandura/ember-legit-forms/issues/17/events","html_url":"https://github.com/jbandura/ember-legit-forms/pull/17","id":173321531,"number":17,"title":"[Feature] Set proper ID on inputs and labels + custom","user":{"login":"michalsnik","id":4093559,"avatar_url":"https://avatars.githubusercontent.com/u/4093559?v=3","gravatar_id":"","url":"https://api.github.com/users/michalsnik","html_url":"https://github.com/michalsnik","followers_url":"https://api.github.com/users/michalsnik/followers","following_url":"https://api.github.com/users/michalsnik/following{/other_user}","gists_url":"https://api.github.com/users/michalsnik/gists{/gist_id}","starred_url":"https://api.github.com/users/michalsnik/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/michalsnik/subscriptions","organizations_url":"https://api.github.com/users/michalsnik/orgs","repos_url":"https://api.github.com/users/michalsnik/repos","events_url":"https://api.github.com/users/michalsnik/events{/privacy}","received_events_url":"https://api.github.com/users/michalsnik/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":1,"created_at":"2016-08-25T22:03:38Z","updated_at":"2016-09-05T13:29:37Z","closed_at":null,"pull_request":{"url":"https://api.github.com/repos/jbandura/ember-legit-forms/pulls/17","html_url":"https://github.com/jbandura/ember-legit-forms/pull/17","diff_url":"https://github.com/jbandura/ember-legit-forms/pull/17.diff","patch_url":"https://github.com/jbandura/ember-legit-forms/pull/17.patch"},"body":"Hi @jbandura \r\n\r\nI was working now for some time using extensively your plugin. It's a breeze :)\r\n\r\nI do however encountered an issue.\r\nI wanted to improve accessibility and have proper `for` attribute on `label` that corresponds to `id` on input.\r\n\r\nFirst I had:\r\n```\r\n<label for=\"some-id\">Lorem ipsum</label>\r\n{{lf-input\r\n    id=\"some-id\"\r\n    name='assetUrl'\r\n    property=asset.url\r\n    on-update=(action (mut asset.url))\r\n    validate=validateFunc\r\n}}\r\n```\r\nBut setting ID on `lf-input` or any other component was setting it on outer `div` inside the component, not the actual `input`.\r\n\r\nSo I added the possibility to use it like this:\r\n```diff\r\n<label for=\"some-id\">Lorem ipsum</label>\r\n{{lf-input\r\n-   id='some-id'\r\n+   inputId='some-id'\r\n    name='assetUrl'\r\n    property=asset.url\r\n    on-update=(action (mut asset.url))\r\n    validate=validateFunc\r\n}}\r\n```\r\nAnd now it sets proper ID on `input`.\r\n\r\nThen I also removed my `label` and used the one you prepared in `input-wrapper`:\r\n```diff\r\n{{lf-input\r\n    inputId='some-id'\r\n+   label='Lorem ipsum'\r\n    name='assetUrl'\r\n    property=asset.url\r\n    on-update=(action (mut asset.url))\r\n    validate=validateFunc\r\n}}\r\n```\r\nI made sure that proper `for` attribute is set on any label generated by `ember-legit-forms`.\r\n\r\nWhen you don't provide `inputID` it will just generate first free `emberID` and set it as `id` on input/select/textarea and `for` on label.\r\n\r\nExample output:\r\n```html\r\n<!-- with `inputId` set -->\r\n<div id=\"ember909\" class=\"ember-view\">\r\n  <label class=\"control-label\" for=\"some-id\">Lorem ipsum</label>\r\n  <input id=\"some-id\" class=\"form-control ember-view\">\r\n</div>\r\n\r\n<!-- with `inputId` not set -->\r\n<div id=\"ember909\" class=\"ember-view\">\r\n  <label class=\"control-label\" for=\"ember889\">Lorem ipsum</label>\r\n  <input id=\"ember889\" class=\"form-control ember-view\">\r\n</div>\r\n```\r\n\r\nLet me know what do you think about it. I'm happy to hear any suggestions :)\r\n\r\nI added some test for this already."},"comment":{"url":"https://api.github.com/repos/jbandura/ember-legit-forms/issues/comments/244747275","html_url":"https://github.com/jbandura/ember-legit-forms/pull/17#issuecomment-244747275","issue_url":"https://api.github.com/repos/jbandura/ember-legit-forms/issues/17","id":244747275,"user":{"login":"jbandura","id":12050034,"avatar_url":"https://avatars.githubusercontent.com/u/12050034?v=3","gravatar_id":"","url":"https://api.github.com/users/jbandura","html_url":"https://github.com/jbandura","followers_url":"https://api.github.com/users/jbandura/followers","following_url":"https://api.github.com/users/jbandura/following{/other_user}","gists_url":"https://api.github.com/users/jbandura/gists{/gist_id}","starred_url":"https://api.github.com/users/jbandura/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/jbandura/subscriptions","organizations_url":"https://api.github.com/users/jbandura/orgs","repos_url":"https://api.github.com/users/jbandura/repos","events_url":"https://api.github.com/users/jbandura/events{/privacy}","received_events_url":"https://api.github.com/users/jbandura/received_events","type":"User","site_admin":false},"created_at":"2016-09-05T13:29:37Z","updated_at":"2016-09-05T13:29:37Z","body":"thanks for the input @michalsnik - will try to review it today/tomorrow (gotta catch up after vacation) :)"}}
{"actor":{"display_login":"jbandura"}}