{"action":"created","issue":{"url":"https://api.github.com/repos/emberjs/rfcs/issues/93","labels_url":"https://api.github.com/repos/emberjs/rfcs/issues/93/labels{/name}","comments_url":"https://api.github.com/repos/emberjs/rfcs/issues/93/comments","events_url":"https://api.github.com/repos/emberjs/rfcs/issues/93/events","html_url":"https://github.com/emberjs/rfcs/issues/93","id":107243724,"number":93,"title":"New API for Component Focus Management","user":{"login":"whastings","id":2724080,"avatar_url":"https://avatars.githubusercontent.com/u/2724080?v=3","gravatar_id":"","url":"https://api.github.com/users/whastings","html_url":"https://github.com/whastings","followers_url":"https://api.github.com/users/whastings/followers","following_url":"https://api.github.com/users/whastings/following{/other_user}","gists_url":"https://api.github.com/users/whastings/gists{/gist_id}","starred_url":"https://api.github.com/users/whastings/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/whastings/subscriptions","organizations_url":"https://api.github.com/users/whastings/orgs","repos_url":"https://api.github.com/users/whastings/repos","events_url":"https://api.github.com/users/whastings/events{/privacy}","received_events_url":"https://api.github.com/users/whastings/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"milestone":null,"comments":1,"created_at":"2015-09-18T17:27:31Z","updated_at":"2015-09-18T17:30:03Z","closed_at":null,"body":"I'm interested in proposing that new methods be added to Ember.Component to facilitate focus management for improving the accessibility of Ember apps. I envision the following new methods:\r\n\r\n* `focus()`: Sets focus to an element immediately. Takes an optional `child` argument. `child` will default to the selector specified in a new component property called `focusNode`. An arbitrary selector string, DOM element, or jQuery-wrapped element can also be passed for `child`. If no `child` is passed and `focusNode` is missing or falsey, the component's top-level element (`component.$()`) will be the element that receives focus.\r\n* `focusAfterRender()`: Functions just like `focus()`, but uses the Run Loop to delay focusing until after the next rendering cycle. Useful for when the element to focus is not yet on the page.\r\n\r\nI've written an initial implementation that I use in my practice Ember app to support screen reader users. It consists of the following:\r\n\r\n* [An Ember.Component monkey patch][monkey_patch] that adds the methods described above.\r\n* [A FocusManager service][service] that does the actual focusing work and ensures that only one element is focused per run of the after render queue.\r\n\r\nHere are some examples of utilizing the new API:\r\n\r\n* [Example 1][ex1]\r\n* [Example 2][ex2]\r\n\r\nThe biggest outstanding question I have right now is how a parent component can trigger focus of a child component, given that parents generally do not have references to their children. In my app, I'm currently calling `focusAfterRender()` in the parent, but passing in the child's selector.\r\n\r\nBefore I try to take this further, I'd like to know: is this new API a good candidate for an Ember RFC and for addition to Ember core?\r\n\r\n[monkey_patch]: https://github.com/whastings/ember-todo-app/blob/master/app/monkeypatches/component_focus_management.js\r\n[service]: https://github.com/whastings/ember-todo-app/blob/master/app/services/focus-manager.js\r\n[ex1]: https://github.com/whastings/ember-todo-app/blob/master/app/components/todo-list-app.js#L52\r\n[ex2]: https://github.com/whastings/ember-todo-app/blob/master/app/components/todo-list-app.js#L23"},"comment":{"url":"https://api.github.com/repos/emberjs/rfcs/issues/comments/141514238","html_url":"https://github.com/emberjs/rfcs/issues/93#issuecomment-141514238","issue_url":"https://api.github.com/repos/emberjs/rfcs/issues/93","id":141514238,"user":{"login":"stefanpenner","id":1377,"avatar_url":"https://avatars.githubusercontent.com/u/1377?v=3","gravatar_id":"","url":"https://api.github.com/users/stefanpenner","html_url":"https://github.com/stefanpenner","followers_url":"https://api.github.com/users/stefanpenner/followers","following_url":"https://api.github.com/users/stefanpenner/following{/other_user}","gists_url":"https://api.github.com/users/stefanpenner/gists{/gist_id}","starred_url":"https://api.github.com/users/stefanpenner/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/stefanpenner/subscriptions","organizations_url":"https://api.github.com/users/stefanpenner/orgs","repos_url":"https://api.github.com/users/stefanpenner/repos","events_url":"https://api.github.com/users/stefanpenner/events{/privacy}","received_events_url":"https://api.github.com/users/stefanpenner/received_events","type":"User","site_admin":false},"created_at":"2015-09-18T17:30:03Z","updated_at":"2015-09-18T17:30:03Z","body":"At the very least, would make a good add-on."}}