{"id":13804490,"url":"https://github.com/ember-a11y/ember-component-focus","last_synced_at":"2025-04-21T13:31:00.086Z","repository":{"id":57223564,"uuid":"47718574","full_name":"ember-a11y/ember-component-focus","owner":"ember-a11y","description":"A mixin for adding methods to your Ember components that help you manage the currently focused element.","archived":false,"fork":false,"pushed_at":"2020-05-06T12:21:03.000Z","size":330,"stargazers_count":23,"open_issues_count":3,"forks_count":6,"subscribers_count":13,"default_branch":"master","last_synced_at":"2025-04-06T16:46:35.365Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/ember-a11y.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2015-12-09T20:59:03.000Z","updated_at":"2025-03-09T14:22:03.000Z","dependencies_parsed_at":"2022-08-30T02:10:19.602Z","dependency_job_id":null,"html_url":"https://github.com/ember-a11y/ember-component-focus","commit_stats":null,"previous_names":[],"tags_count":5,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ember-a11y%2Fember-component-focus","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ember-a11y%2Fember-component-focus/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ember-a11y%2Fember-component-focus/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ember-a11y%2Fember-component-focus/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ember-a11y","download_url":"https://codeload.github.com/ember-a11y/ember-component-focus/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":249340149,"owners_count":21253862,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-08-04T01:00:48.781Z","updated_at":"2025-04-21T13:30:59.403Z","avatar_url":"https://github.com/ember-a11y.png","language":"JavaScript","funding_links":[],"categories":["Packages"],"sub_categories":["a11y"],"readme":"# Ember Component Focus\n\nThis [ember-cli][ember-cli] addon provides a mixin for adding methods to your\nEmber components that help you manage the currently focused element.\n\nProper focus management is essential for making dynamic single-page applications\naccessible to screen readers and other assistive technologies. For example, if\nyou're writing a todo app, you might want to move focus from a creation form to\na new todo item when the user submits the form. This addon makes it easy to move\nfocus within a component by handling issues like setting `tabindex` on elements\nthat aren't focusable by default and removing `tabindex=\"-1\"` on blur.\n\n[ember-cli]: http://www.ember-cli.com/\n\n\nRun the following inside your Ember application to install this addon.\n\n```bash\nember install ember-component-focus\n```\n\nOr you can install directly from npm:\n\n```bash\nnpm install --save ember-component-focus\n```\n\n## Demo\n\n[This todo app][demo-app] makes use of ember-component-focus to create an accessible UI.\n\n[demo-app]: https://github.com/whastings/ember-todo-app\n\n## Usage\n\nTo use the focus management methods in your component, you need to mix-in\nthe `focusable-component` mixin:\n\n```javascript\n// app/components/your-component.js\nimport Ember from 'ember';\nimport FocusableComponent from 'ember-component-focus/mixins/focusable-component';\n\nexport default Ember.Component.extend(FocusableComponent, {\n  // Your component's definition...\n});\n```\n\nThe mixin adds two properties and two methods to your component.\n\n### focusNode Property\n\nThe `focusNode` property allows you to specify the selector of one of your\ncomponent's child elements that you want to receive focus when one of the\nmethods added by the mixin is invoked. It defaults to `null`, so override it in\nyour component's definition if you want to set a default element to focus.\n\n### componentFocusManager Property\n\nThis is a reference to the Focus Manager service that handles interaction with\nthe DOM and listening for DOM events. You probably won't need to use it\ndirectly.\n\n### focus() Method\n\nThe `focus()` method sets focus on a child element immediately. The element to\nfocus defaults to the value of `focusNode`, but you can also pass in the child\nelement to focus or a string selector for the element to focus. If you don't\npass anything and `focusNode` is `null`, focus will move to the component's top\nelement (`component.element`). This method returns the element that ended up\nreceiving focus.\n\n#### Example\n\n```javascript\n// When this component is first inserted into the DOM, it will set focus to its\n// header element.\nexport default Ember.Component.extend(FocusableComponent, {\n  focusNode: 'h1',\n\n  // ...\n\n  didInsertElement() {\n    this._super(...arguments);\n    this.focus();\n  },\n\n  // ...\n});\n```\n\n### focusAfterRender() Method\n\nThis method works just like focus, accepting the same arguments, but it\nschedules setting focus for after the next render cycle (using the [Ember Run\nLoop's][run-loop] `afterRender` queue). This method is most useful for when you\nwant to move focus to a child element that is not yet rendered but will be after\nthe next render cycle. Simply pass it the selector of the element to be\nrendered. It returns a promise that will be resolved with the element that ends\nup receiving focus.\n\n#### Example\n\n```javascript\n// This component will focus the element for a new todo after the model object\n// for that todo has been saved and the element representing the todo has rendered.\nexport default Ember.Component.extend(FocusableComponent, {\n  actions: {\n    addTodo() {\n      let todoName = this.get('todoName');\n      let todo = this.store.createRecord('Todo', {name: todoName});\n      todo.save().then(() =\u003e this.focusAfterRender(`[data-id=todo-${todo.id}]`));\n    }\n  },\n\n  // ...\n});\n```\n\n[run-loop]: http://emberjs.com/api/classes/Ember.run.html\n\n## License\n\nCopyright 2015 LinkedIn Corp. Licensed under the Apache License, Version 2.0\n(the \"License\"); you may not use this file except in compliance with the\nLicense. You may obtain a copy of the License at\n[http://www.apache.org/licenses/LICENSE-2.0][apache-license]\n\nUnless required by applicable law or agreed to in writing, software distributed\nunder the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR\nCONDITIONS OF ANY KIND, either express or implied.\n\n[apache-license]: http://www.apache.org/licenses/LICENSE-2.0\n\n## Notice\n\nember is a trademark of Tilde Inc. and is used with permission.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fember-a11y%2Fember-component-focus","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fember-a11y%2Fember-component-focus","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fember-a11y%2Fember-component-focus/lists"}